详解 CSS3中最好用的布局方式——flex弹性布局（看完就会）

坚毅的小解同志的前端社区

发布于 2022-11-28 15:33:38

2.1K0

文章包含个人理解，错误请指出。
往期css3文章 CSS3基础属性大全 CSS3动画属性 animation详解（看完就会） CSS3 transform 2D转换之移动旋转缩放（详细讲解看完就会） CSS3 Z—Index 详解 CSS3 positon定位详解（通俗易懂）

介绍

flex布局的优点缺点以及布局原理

优点

		1.优点在于容易操作，根据flex规则很容易达到某个布局效果。
		2.集合了百分比布局和浮动的优点，可以具体设置宽度  
		也免于设置以及清除浮动，同样可以达到相同的效果。

缺点

		 1.pc端布局稍差，IE11及以下版本不支持。

布局原理

		1.通过给父盒子添加flex属性，来控制子盒子的位置和排列方式
		2.设置flex属性的容器称为flex父容器，父容器的子元素称为子容器
		（flex项目）

当设置flex布局之后，子元素的float，clear，vertical-align属性将失效

学习

由于篇幅原因会演示一部分，想学会就要积极动手

父容器常见属性

主轴

1.flex-direction（设置主轴方向）

flex布局中分为主轴和侧轴，默认主轴为x轴（水平向右），侧轴为y轴（水平向下）， direction属性可以改变主轴的方向，以及更换主轴。

属性值	说明
row	左→右
row-reverse	右→左
column	上→下
column-reverse	下→上

演示

  <style>
        div {
            /* 没有设置flex属性 */
            width: 300px;
            height: 300px;
            background-color: red;
        }

        div span {
            width: 100px;
            height: 100px;
            background-color: aqua;
        }
    </style>
</head>

<body>
    <div>
        <span class="a">1</span>
        <span class="b">2</span>
        <span class="c">3</span>
    </div>
</body>

可以看出行内元素的特性产生了这种效果 span元素由内容的多少来决定大小，中间的间隙则是默认的white-space属性产生的回车效果，

 <style>
        div {
            /* 给父容器设置flex布局 */
            display: flex;
            width: 800px;
            height: 300px;
            background-color: red;
            /* 默认值为row */
            flex-direction: row;
        }

        div span {
            color: green;
            width: 100px;
            height: 100px;
            background-color: aqua;
        }
    </style>

设置成flex布局之后，新效果的产生是因为flex布局会将行内元素转换成行内快元素，标签的大小由设置的宽高决定，而不是内容，元素之间的缝隙也消失了。

我们修改 direction属性看看效果

flex-direction: row-reverse; 把默认主轴设置为了反向行（x）排列

2.justify-content 设置主轴上子元素的排列方式

使用这个属性之前应当确认好主轴

属性值	说明
flex-start	从左到右或者是从上到下（看主轴）
flex-end	排列到尾部。（跟主轴反转做好区分）
center	在主轴居中对齐
space-around	平分剩余空间
space-between	先两边贴边再平方剩余空间

演示

justify-content: flex-end;

      div {
            /* 给父容器设置flex布局 */
            display: flex;
            width: 800px;
            height: 300px;
            background-color: red;
            /* 默认值为row */
            flex-direction: row;
            /* 设置主轴排列方式 */
            justify-content: flex-end;
        }

同样是从左往右排列只不过是会排列到尾部

justify-content: space-around;

 <style>
        div {
            /* 给父容器设置flex布局 */
            display: flex;
            width: 800px;
            height: 300px;
            background-color: red;
            /* 默认值为row */
            flex-direction: row;
            /* 设置主轴排列方式 */
            justify-content: space-around;
        }


        div span {
            color: green;
            width: 100px;
            height: 100px;
            background-color: aqua;
        }
    </style>

主轴 x轴剩余空间平均分配

3.flex-wrap设置子元素是否换行

属性值	说明
nowrap	不换行（默认值）
wrap	换行
wrap-reverse	换行后位置互换

<style>
        div {
            /* 给父容器设置flex布局 */
            display: flex;
            width: 800px;
            height: 300px;
            background-color: red;
            /* 默认值为row */
            flex-direction: row;
            /* 设置主轴排列方式 */
            justify-content: space-around;
        }


        div span {
            color: green;
            width: 100px;
            height: 100px;
            background-color: aqua;
        }
    </style>
</head>

<body>
    <div>
        <span class="a">1</span>
        <span class="b">2</span>
        <span class="c">3</span>
        <span class="d">4</span>
        <span class="e">5</span>
    </div>
</body>

多添加了两个span标签设置了分配剩余空间的属性后父容器撑不下并不会变大，而是会压缩子元素和剩余空间，首先是会分配剩余空间给新的标签，当剩余空间没有了，会压缩子元素的大小。（居中也是）

如果没有设置分配空间而是给的margin外边距则不会压缩剩余空间会直接改变子元素本身的大小。

    div {
            /* 给父容器设置flex布局 */
            display: flex;
            width: 600px;
            height: 300px;
            background-color: red;
            /* 默认值为row */
            flex-direction: row;
            /* 设置换行 */
            flex-wrap: wrap;
        }

剩余空间不够则会直接换行,第一行和第二行中间的距离可以设置下面学到的align-content：flex-start属性消除。

flex-flow属性试direction和wrap属性的结合属性可以直接设置 flex-flow:row wrap;

侧轴

1.align-items设置侧轴子元素的排列方式（单行使用）

属性值	说明
flex-start	从上到下
flex-end	从下到上
center	居中
stretch	拉伸（不能设置高度）

    <style>
        div {
            /* 给父容器设置flex布局 */
            display: flex;
            width: 600px;
            height: 300px;
            background-color: red;
            /* 默认值为row */
            flex-direction: row;
             /* 主轴水平居中 */
            justify-content: center;
             /* 侧轴垂直居中 */
            align-items: center;
        }
        div span {
            color: green;
            width: 100px;
            height: 100px;
            background-color: aqua;
            margin: 15px;
        }
    </style>
</head>
<body>
    <div>
        <span class="a">1</span>
        <span class="b">2</span>
        <span class="c">3</span>
    </div>
</body>

这样就实现了水平垂直居中，以往如果用外边距margin：auto，往往只能做到水平居中，还需要搭配其他的属性。

2.align-content 设置侧轴上的子元素的排列方式（多行）

属性值	说明
flex-start	在侧轴的头部开始排列
flex-end	排列到侧轴的尾部
center	居中
space-around	平分侧轴剩余空间
space-between	子项在侧轴先分布在两头，再平分剩余空间
stretch	行拉伸以占据剩余空间（不能有高度）

 <style>
        div {
            /* 给父容器设置flex布局 */
            display: flex;
            width: 600px;
            height: 300px;
            background-color: red;
            /* 默认值为row */
            flex-direction: row;
         /* 水平平分 */
            justify-content: space-around;
         /* 垂直平分 */
            align-content: space-around;
         /* 换行 */
            flex-wrap: wrap;
        }

        div span {
            color: green;
            width: 100px;
            height: 100px;
            margin: 20px;
            background-color: aqua;

        }
    </style>
</head>

<body>
    <div>
        <span class="a">1</span>
        <span class="b">2</span>
        <span class="c">3</span>
        <span class="a">1</span>
        <span class="b">2</span>
        <span class="c">3</span>
        <span class="b">2</span>
        <span class="c">3</span>
    </div>
</body>

子容器常见属性

1.flex属性

flex属性定义子项目在分配剩余空间时，自己占的份数。

  <style>
        div {
            /* 给父容器设置flex布局 */
            display: flex;
            width: 600px;
            height: 300px;
            background-color: red;
        /* 先两端对齐再分配剩余空间 */
            justify-content: space-between;
        }

        .b {
            flex: 1;
        }

        div span {
            color: green;
            width: 100px;
            height: 100px;
            border: solid 3px orange;
            background-color: aqua;
        }
    </style>
</head>

<body>
    <div>
        <span class="a">1</span>
        <span class="b">2</span>
        <span class="c">3</span>
    </div>

设置的两端补齐在平分， 1和3占在两边 2应该在中间然后 2的两边是相同大小的剩余空间，因为给2设置的flex为1，所以中间2就补满了。

    <style>
        div {
            /* 给父容器设置flex布局 */
            display: flex;
            width: 600px;
            height: 300px;
            background-color: red;
        }

        .a {
            flex: 3;
        }

        .b {
            flex: 3;
        }

        .c {
            flex: 1;
        }

        div span {
            color: green;
            width: 100px;
            height: 100px;
            border: solid 3px orange;
            background-color: aqua;
        }
    </style>

分成七份，1和2各占三份，3占一份。

2.align-self控制单个子元素侧轴的排列方式

设置单个子元素的排列方式会覆盖align-items

  <style>
        div {
            /* 给父容器设置flex布局 */
            display: flex;
            width: 600px;
            height: 300px;
            background-color: red;
            align-items: flex-end;

        }

        .a {
            flex: 3;
            align-self: flex-start;
        }

        .b {
            flex: 3;
        }

        .c {
            flex: 1;
        }

        div span {
            color: green;
            width: 100px;
            height: 100px;
            border: solid 3px orange;
            background-color: aqua;
        }
    </style>

给第一个span单独设置了start另外两个是end

3.order修改标签的排列顺序

<style>
        div {
            /* 给父容器设置flex布局 */
            display: flex;
            width: 600px;
            height: 300px;
            background-color: red;
            align-items: flex-end;

        }

        .a {
            flex: 3;
            align-self: flex-start;
        }

        .b {
            flex: 3;
        }

        .c {
            flex: 1;
            order: -1;
        }

        div span {
            color: green;
            width: 100px;
            height: 100px;
            border: solid 3px orange;
            background-color: aqua;
        }
    </style>

order默认为0，第三个span标签order设置为-1，变成了最小的，所以变成了第一个，此属性可以帮助我们不修改标签的位置来改变页面元素。

总结

常见父项属性

flex-direction：设置主轴的方向
justify-content：设置主轴上的子元素排列方式
flex-wrap：设置子元素是否换行
align-content：设置侧轴上的子元素的排列方式（多行）
align-items：设置侧轴上的子元素排列方式（单行）
flex-flow：复合属性，相当于同时设置了 flex-direction 和 flex-wrap

flex布局子项常见属性

flex 子项目占的份数
align-self 控制子项自己在侧轴的排列方式
order 属性定义子项的排列顺序（前后顺序）

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022-10-09，如有侵权请联系 cloudcommunity@tencent.com 删除

容器

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

容器

登录后参与评论

0 条评论

热度