CSS 弹性布局

这篇具有很好参考价值的文章主要介绍了CSS 弹性布局。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

提示:这篇比较重要,做复杂页面时经常会用到!会不断更新❗


前言

提示:这里可以添加本文要记录的大概内容:

弹性布局的总体思想是把布局不写在标记上,而是把布局的样式代码写在最大的父标记上

让布局实现自适应和自动调整,可以在不同屏幕大小和设备上保持一定的布局效果,同时也可以方便地进行响应式设计

一些常用示例代码:

    /* 弹性布局 */
    display: flex;
    /* 主轴水平居中 */
    justify-content: center;
    /* 侧轴垂直居中 */
    align-items: center;
    /* 改变主轴方向,主轴方向垂直设置,默认是row水平 */
    flex-direction: column;
    /* 折行显示 */
    flex-wrap: wrap;

提示:以下是本篇文章正文内容,下面案例可供参考

主轴和侧轴

盒子变成弹性盒子后标记怎么排列?它是按照两个轴为方向进行排列显示(主轴和侧轴)

默认主轴是水平的,默认侧轴是垂直的

先设置一个大div,里面放五个小div,并分别控制他们的样式

【示例代码】:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .p{
            width: 300px;
            height: 300px;
            border: 2px solid black;
            margin-top: 50px;
            margin-left: 100px;
        }
        .s{
            width: 50px;
            height: 50px;
            background-color: aqua;
        }
    </style>
</head>
<body>
    <!-- div.p>div{div$}.s*5 公式生成-->
    <div class="p">
        <div class="s">div1</div>
        <div class="s">div2</div>
        <div class="s">div3</div>
        <div class="s">div4</div>
        <div class="s">div5</div>
    </div>

</body>
</html>

输出效果:从上到下,五个小div默认排列
CSS 弹性布局

在父标记内加上弹性布局 display: flex;
输出显示:
CSS 弹性布局

弹性盒子中的子标记,是先按照主轴排列,再按照侧轴排列
主轴侧轴彼此垂直交叉

flex-direction 主轴方向

flex-direction:row      /*子元素沿主轴方向排列,也就是水平方向 row为默认值*/
flex-direction:column   /*子元素沿侧轴方向排列,也就是垂直方向 */

主轴默认是水平方向,【flex-direction: column; 垂直排列】
column主轴方向是垂直的(列)
row主轴方向是水平的(行)

弹性盒子中的子标记都会变成:行内块类型

子标记里的5个div宽都是50px,总宽度是250px,接下来看一下他在整个大div宽300px内的显示
CSS 弹性布局
如果把5个小div的宽度改成80px,那总宽是400px,而大div总宽是300px,那会不会主轴不满然后侧轴排列?

输出结果:
CSS 弹性布局
这就是弹性盒子的特点:等比例压缩了

弹性盒子中的子标记占据的总尺寸超过弹性盒子的尺寸,默认弹性盒子会讲子标记等比例的压缩
CSS 弹性布局

flex-wrap 折行

如果说不想让他等比例压缩,要他折行显示侧轴排列时用到

在父标记中加入flex-wrap: wrap;

输出显示:
CSS 弹性布局

弹性盒子对于一些简单的样式声明,他会完成一些复杂的计算和排列

弹性盒子尺寸小于子标记的总尺寸时,会在侧轴排列(折行显示)

主轴排列方式

/* 默认row,主轴排列 */
flex-direction: row;

justify-content:

flex-start:默认左对齐

主轴水平→左对齐,主轴垂直→上对齐

justify-content: flex-start;

总代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .p{
            width: 500px;
            height: 300px;
            border: 2px solid black;
            margin-top: 50px;
            margin-left: 100px;
            /* 弹性布局 */
            display: flex;
            /* 水平向右排列(默认值) */
            flex-direction: row;
            flex-wrap: wrap;

            justify-content: space-evenly;
        }
        .s{
            width: 80px;
            height: 50px;
            background-color: aqua;
        }
    </style>
</head>
<body>
    <!-- div.p>div{div$}.s*5 公式生成-->
    <div class="p">
        <div class="s">div1</div>
        <div class="s">div2</div>
        <div class="s">div3</div>
        <div class="s">div4</div>
        <div class="s">div5</div>
    </div>

</body>
</html>

flex-end:右对齐

主轴水平右对齐,主轴是垂直下对齐

justify-content: flex-start;

CSS 弹性布局

center:居中

主轴水平整体水平居中,主轴是垂直整体垂直居中

justify-content: center;

CSS 弹性布局

space-between:两端对齐

主轴水平,左右两端的子标记紧挨着父标记的边框,
主轴垂直,上下两端子标记紧挨着父标记的边框,子标记之间间距相等

justify-content: space-between;

父标记宽度500px
CSS 弹性布局
父标记宽度200px
CSS 弹性布局

space-around:子标记之间的间距是子标记与父标记边框之间的间距2倍

子标记之间的间距是子标记与父标记边框之间的间距2倍

justify-content: space-around;

父标记宽度200px
CSS 弹性布局
父标记宽度500px
CSS 弹性布局
父标记宽度800px
CSS 弹性布局

space-evenly:间距平均

子标记之间的间距和子标记与父标记边框之间的间距相等

justify-content: space-evenly;

CSS 弹性布局

总结

justify-content主轴排列方式:

  1. flex-start主轴水平是左对齐,主轴是垂直上对齐
  2. flex-end主轴水平是右对齐,主轴是垂直下对齐
  3. center主轴水平是整体水平居中,主轴是垂直的整体垂直居中
  4. space-between主轴水平左右两端的子标记紧挨着父标记边框,主轴垂直上下两端的子标记紧挨着父标记边框,子标记之间间距相等
  5. space-around子标记之间的间距是子标记与父标记边框之间的间距2倍
  6. space-evenly子标记之间的间距和子标记与父标记边框之间的间距相等

侧轴排列方式

只需要在父标记中加上下面代码
根据上面主轴的显示效果,可以理解成把它们逆时针旋转90°

/* 侧轴排列 */
flex-direction: column;

justify-content:

比如说space-evenly:间距平均
子标记之间的间距和子标记与父标记边框之间的间距相等

justify-content: space-evenly;

CSS 弹性布局

align-items 侧轴排列方式

lign-items:侧轴排列方式
flex-start:侧轴垂直上对齐,侧轴水平左对齐
flex-end:侧轴垂直下对齐,侧轴水平右对齐
center:侧轴垂直居中,侧轴水平居中
align-items: flex-start;垂直方向上这几个标记靠上方

【案例代码】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .p{
            width: 500px;
            height: 300px;
            border: 2px solid black;
            margin-top: 50px;
            margin-left: 100px;
            /* 弹性布局 */
            display: flex;
            /* 主轴方向 column主轴方向是垂直的,row主轴方向是水平的(行)*/
            flex-direction: row;
            flex-wrap: wrap;

            justify-content: flex-start;
            /* align-items,侧轴排列方式 */
            align-items: flex-start;
        }
        .s{
            width: 80px;
            height: 50px;
            background-color: aqua;
        }
    </style>
</head>
<body>
    <!-- div.p>div{div$}.s*5 公式生成-->
    <div class="p">
        <div class="s">div1</div>
        <div class="s">div2</div>
        <div class="s">div3</div>
        <div class="s">div4</div>
        <div class="s">div5</div>
    </div>

</body>
</html>

align-items: flex-start;侧轴垂直上对齐,侧轴水平左对齐
CSS 弹性布局

align-items: flex-end;侧轴垂直下对齐,侧轴水平右对齐
CSS 弹性布局
align-items: center;侧轴垂直居中,侧轴水平水平居中
CSS 弹性布局


align-content 侧轴排列方式(多行)

align-content侧轴排列方式与align-items侧轴排列方式区别在于:多行显示时会看出效果

首先看一下

align-items: center; 
/* align-content: center; */

【案例代码】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .p{
         /* 此处把宽度改小,使其多行显示 */
            width: 200px;
            height: 300px;
            border: 2px solid black;
            margin-top: 50px;
            margin-left: 100px;
            /* 弹性布局 */
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;

            justify-content: flex-start;

            align-items: center; 
            /* align-content: center; */
        }
        .s{
            width: 80px;
            height: 50px;
            background-color: aqua;
        }
    </style>
</head>
<body>
    <!-- div.p>div{div$}.s*5 公式生成-->
    <div class="p">
        <div class="s">div1</div>
        <div class="s">div2</div>
        <div class="s">div3</div>
        <div class="s">div4</div>
        <div class="s">div5</div>
    </div>

</body>
</html>

每一行中都在中间
CSS 弹性布局

 /* align-items: center;  */
 align-content: center;

CSS 弹性布局

flex 子标记样式

前面的标记都放在了父标记中,只有flex是唯一一个安排在子标记中的样式

flex是弹性布局中唯一一个设置在子标记中的样式
flex:整数;子标记占据父标记尺寸空间的比例
flex: 0 0 整数px; 代表子标记固定的尺寸,【0 0】:不压缩不扩大,固定

第一种写法:子标记中写数字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .p{
            width: 400px;
            height: 200px;
            border: 2px green solid;
            /* 变弹性盒子 */
            display: flex;
        }
        .p>div{
            height: 100px;
        }

        .s1{
            background-color: red;
            flex: 1;
        }
        .s2{
            background-color: yellow;
            flex: 2;
        }
        .s3{
            background-color: blue;
            flex: 2;
        }
    </style>
</head>
<body>
    <div class="p">
        <div class="s1"></div>
        <div class="s2"></div>
        <div class="s3"></div>
    </div>
</body>
</html>

CSS 弹性布局
第二种写法:固定样式写法

这里以s1举例

        .s1{
            background-color: red;
            /* s1,固定150px */
            flex: 0 0 150px;
        }

flex: 0 0 整数px; 代表子标记固定的尺寸,【0 0】:不压缩不扩大,固定

输出效果:
s2和s3是125×100
CSS 弹性布局文章来源地址https://www.toymoban.com/news/detail-514059.html


到了这里,关于CSS 弹性布局的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • CSS3弹性布局

    2009年,W3C提出一种崭新的布局方案—弹性盒(Flexbox)布局,使用该模型可以轻松地创建自适应窗口的流动布局,或者自适应字体大小的弹性布局。W3C的弹性盒布局分为旧版本、新版本及混合过渡版本3种不同的设计方案,其中混合过渡版本主要针对IE10进行兼容。目前,CSS3弹性布

    2024年02月06日
    浏览(44)
  • CSS弹性布局

    ​ 弹性盒子是 CSS3 的一种新的布局模式。 ​ CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。 ​ 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐

    2024年02月21日
    浏览(34)
  • css 弹性布局的详细说明

    CSS弹性布局(Flexible Box Layout,简称Flexbox)是一种用于创建自适应和可伸缩布局的CSS模块。它提供了一种简单而强大的方式来对容器中的子元素进行布局,使它们能够自动调整大小、排列和对齐。 Flexbox通过在容器和子元素上应用一些特定的CSS属性来实现布局。下面是一些常用

    2024年02月16日
    浏览(44)
  • CSS3弹性盒布局详解

    弹性盒( Flexible Box 或 Flexbox) 布局是CSS3提供的一种新的布局模式,是一种当页面需要适应不同的屏幕大小及设备类型时,确保元素拥有恰当行为的一种布局方式。 弹性盒的结构: 从图中所知,弹性盒由 弹性容器 , 弹性子元素 和 轴 构成,在默认情况下,弹性子元素的排布

    2024年01月18日
    浏览(42)
  • html&CSS-----弹性布局案例展示

    目录 前言 效果展示 ​编辑 代码 思路分析         上一期我们学习了弹性布局,那么这一期我们用弹性布局来写一个小案例,下面看代码(上一期链接htmlCSS-----弹性布局_灰勒塔德的博客-CSDN博客) html代码: CSS代码: 首先我们去创建一个大盒子box,作为容器,里面放入5个

    2024年02月12日
    浏览(42)
  • css3 flex弹性布局详解

    2009年,W3C 提出了一种新的方案----Flex 布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。 Flex 是 Flexible Box 的缩写,意为\\\"弹性布局\\\",用来为盒状模型提供最大的灵活性。 开启flex布局:

    2024年02月05日
    浏览(44)
  • css之Flex弹性布局(父项常见属性)

    本篇博客会讲解css中的弹性布局的常见用法, 将一个div定义成flex容器,它分为主轴与交叉轴(其中左右边对应主轴的 start、end ,上下边对应交叉轴的 start、end ) 🪂行排列 flex-direction: row 🪂将行排列进行翻转排列 flex-direction: row-reverse 注意:由于翻转时主轴的start、end会进

    2024年02月08日
    浏览(50)
  • JavaWeb-CSS的盒模型与弹性布局

    每一个HTML就相当于一个矩形的\\\"盒子\\\". 这个盒子由以下几个部分组成 边框 border 内容 content(下图中间蓝色部分) 内边距 padding 外边距 margin 边框 边框的基础属性: 粗细: border-width 样式: border-style 颜色:border-color 接下来我们设计一个500x250的盒子 我们为其设置一个边框 我们会发现

    2024年02月07日
    浏览(41)
  • 第二章:CSS基础进阶-part3:弹性例子布局

    1、普通盒模型 2、弹性盒布局 使用弹性盒布局能让容器的宽度跟随浏览器窗口的变化而变换 这是一个简写flex-direction和flex-wrap属性。共同定义了flex容器的主轴和交叉轴。默认是row nowrap。

    2024年02月13日
    浏览(41)
  • 【前端】CSS(引入方式+选择器+常用元素属性+盒模型+弹性布局)

    层叠样式表(Cascading Style Sheets) 对元素位置的排版进行精确控制,实现结构和样式的分离 CSS 控制页面的展示效果 HTML决定页面的结构 选择器+{一条/N条声明} 选择器:要修改谁 声明:具体要修改什么内容。声明的属性是键值对,用分号区分,键和值用: 通常情况下,把style放

    2024年04月15日
    浏览(51)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包