一篇让你弄懂是什么是flex布局

nehcnil

已于 2022-06-09 16:40:06 修改

阅读量5.5k

点赞数 7

文章标签： css css3 前端 vscode

于 2022-06-04 17:09:56 首次发布

本文链接：https://blog.csdn.net/linchen_00/article/details/125122162

版权

一、flex布局与传统布局

传统布局：兼容性好、布局繁琐且不能较好地在移动端布局

flex布局：布局简单方便，很适合在移动端布局，但存在版本兼容支持问题

二、flex布局原理

flex 是 flexible Box 的缩写，意为 “弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 flex 布局。

采用 flex 布局的元素，称为 flex 容器（flex container），它的所有子元素自动成为容器成员，称为 flex 项目（flex item）。 flex就是通过给父盒子添加flex属性，来控制子盒子的位置和排列等。

PS：将父盒子设为 flex 布局以后，子元素的 float（浮动）、clear（清除浮动）和 vertical-align（垂直居中）属性将失效。

三、flex布局常见父元素属性

3.1 flex-direction

作用：设置主轴方向，默认为水平从左到右

属性值：row（从左到右，默认）、row-reverse（从右到左）、column（从上到下）、column-reverse（从下到上）

<style>
        #box2,
        #box3 {
            height: 300px;
            width: 300px;
        }

        #box1 {
            height: 100vh;
            width: 100vw;
            background-color: skyblue;
            display: flex;
            /* 1.flex-direction: row; */
            /* 2.flex-direction: row-reverse; */
            /* 3.flex-direction: column; */
            flex-direction: column-reverse; 
        }
        #box2 {
            background-color: red;
        }
        #box3{
            background-color: green;
        }
</style>



<body>
    <div id="box1">
        <div id="box2">111</div>
        <div id="box3">222</div>
    </div>
</body>

1.row

2.row-reverse

3.column

4.column-reverse

3.2 justify-content

作用：设置主轴上子元素的排列方式（默认从头部方向）

属性值：flex-start（从头部开始，默认）、flex-end（从尾部开始排列）、center（主轴居中对齐）、space-around（平分剩余空间）、space-between（先两边贴边再平分剩余空间）

<style>
        .item {
            height: 300px;
            width: 300px;
        }

        #box1 {
            height: 100vh;
            width: 100vw;
            background-color: skyblue;
            display: flex;
            justify-content: /* flex-start（从头部开始，默认）
                             flex-end（从尾部开始排列）
                             center（主轴居中对齐）
                             space-around（平分剩余空间）
                             space-between（先两边贴边再平分剩余空间）*/
        }
        #box2 {
            background-color: red;
        }
        #box3{
            background-color: green;
        }
        #box4{
            background-color: yellow;
        }
</style>



<body>
    <div id="box1">
        <div id="box2" class="item">111</div>
        <div id="box3" class="item">222</div>
        <div id="box4" class="item">333</div>
    </div>
</body>

1.flex-start

2.flex-end

3.center

4.space-around

5.space-between

3.3 flex-wrap

作用：设置子元素是否换行（默认不换行）

属性值：nowrap（不换行，默认）、wrap（换行）

PS：不换行时，如果装不开，会缩小子元素的宽度，放到父元素里面

<style>
        .item {
            height: 400px;
            width: 400px;
        }

        #box1 {
            height: 100vh;
            width: 100vw;
            background-color: skyblue;
            display: flex;
            flex-wrap: /*nowrap
                         wrap*/
        }
        #box2 {
            background-color: red;
        }
        #box3{
            background-color: green;
        }
        #box4{
            background-color: yellow;
        }
        #box5{
            background-color: white;
        }
        #box6{
            background-color: blue;
        }
        #box7{
            background-color: gray;
        }
        
</style>




<body>
    <div id="box1">
        <div id="box2" class="item">111</div>
        <div id="box3" class="item">222</div>
        <div id="box4" class="item">333</div>
        <div id="box5" class="item">444</div>
        <div id="box6" class="item">555</div>
        <div id="box7" class="item">666</div>
    </div>
</body>

1.nowrap

2.wrap

3.4 align-items

作用：设置侧轴上的子元素排列方式，需要子项为单行（默认为拉伸，需要子盒子未指定高度）

属性值：flex-start（从上到下）、flex-end（从下到上）、center（挤在一起居中）、stretch（拉伸，默认）

PS：侧轴为主轴的垂直方向，主轴为水平时方向为从上到下，主轴为垂直时方向为从左到右

<style>
        .item {
            height: 400px;
            width: 400px;
        }

        #box1 {
            height: 100vh;
            width: 100vw;
            background-color: skyblue;
            display: flex;
            align-items: /*flex-start
                         flex-end
                         center
                         stretch*/
        }
        #box2 {
            background-color: red;
        }
        #box3{
            background-color: green;
        }
        #box4{
            background-color: yellow;
        }
        #box5{
            background-color: white;
        }
        #box6{
            background-color: blue;
        }
        #box7{
            background-color: gray;
        }
        
</style>

1.flex-start

2.flex-end

3.center

4.stretch

3.5 align-content

作用：设置子项在侧轴上的排列方式并且只能用于子项出现换行的情况（默认拉伸）

属性值：flex-start（侧轴头部开始）、flex-end（侧轴尾部开始）、center（侧轴中间显示）、space-around（平分侧轴剩余空间）、space-bwtween（先占据两边再平分）、stretch（拉伸，默认）

<style>
        .item {
            height: 400px;
            width: 400px;
        }

        #box1 {
            height: 100vh;
            width: 100vw;
            background-color: skyblue;
            display: flex;
            flex-wrap: wrap;
            align-content: /* flex-start
                              flex-end
                              center
                              space-around
                              space-between
                              stretch */
        }
        #box2 {
            background-color: red;
        }
        #box3{
            background-color: green;
        }
        #box4{
            background-color: yellow;
        }
        #box5{
            background-color: white;
        }
        #box6{
            background-color: blue;
        }
        #box7{
            background-color: gray;
        }
        
</style>

1.flex-start

2.flex-end

3.center

4.space-around

5.space-between

6.stertch

3.6 flex-flow

作用：flex-direction和flex-warp的复合属性

属性值：flex-direction和flex-warp属性的组合，第一个为flex-direction属性，第二个为flex-warp属性，可部分省略（如：flex-flow:column）

四、flex布局子元素常见属性

4.1 flex-grow

作用：定义子项目分配剩余空间，需要主轴存在剩余空间（默认为0）

属性值：0（默认，保持初始），正数n（放大因子，占据剩余空间份数）

PS：设置后的宽度（或高度）为原先设置值加上分配得到的

如下例，设置grow的三个元素分配得到的分别为（320-100）=220，（540-100）=440，（760-100）=660

<style>
        .item {
            height: 100px;
            width: 100px;
        }

        #box1 {
            height: 100vh;
            width: 100vw;
            background-color: skyblue;
            display: flex;
        }
        #box2 {
            background-color: red;
            flex-grow: 1;
        }
        #box3{
            background-color: green;
            flex-grow: 2;
        }
        #box4{
            background-color: yellow;
            flex-grow: 3;
        }
        #box5{
            background-color: white;
        }
        #box6{
            background-color: blue;
        }
        #box7{
            background-color: gray;
        }
</style>

4.2 flex-shrink

作用：超出范围时缩小（默认为1，可缩小）

属性值：0（不可收缩，维持初始大小）、1（可缩小，默认），正数n（收缩因子，被收缩的份数）

例：超出400，两个子元素分别设置shrink为1和3，则前者缩小100，后者缩小300

<style>
        .item {
            height: 400px;
            width: 400px;
        }

        #box1 {
            height: 100vh;
            width: 100vw;
            background-color: skyblue;
            display: flex;
        }
        #box2 {
            background-color: red;
            flex-shrink: 1;
        }
        #box3{
            background-color: green;
            flex-shrink: 2;
        }
        #box4{
            background-color: yellow;
            flex-shrink: 3;
        }
        #box5{
            background-color: white;
        }
        #box6{
            background-color: blue;
        }
        #box7{
            background-color: gray;
        }
        
</style>

4.3 flex-basis

作用：定义在分配多余空间之前，项目占据的主轴空间（默认为auto，即项目本来大小），浏览器根据这个属性，计算主轴是否有多余空间。

属性值：auto（默认）、xxxpx（项目占据xxxpx）

 <style>
        .item {
            height: 400px;
            width: 400px;
        }

        #box1 {
            height: 100vh;
            width: 100vw;
            background-color: skyblue;
            display: flex;
        }
        #box2 {
            background-color: red;
            flex-basis: 800px;
        }
        #box3{
            background-color: green;
        }
        #box4{
            background-color: yellow;
        }
        #box5{
            background-color: white;
        }
        #box6{
            background-color: blue;
        }
        #box7{
            background-color: gray;
        }
</style>

4.4 align-self

作用：使此项目有与其他项目不一样的对齐方式，可覆盖align-items属性（默认为auto，表示基继承align-items属性

属性值：align-items的属性

<style>
        .item {
            height: 400px;
            width: 400px;
        }

        #box1 {
            height: 100vh;
            width: 100vw;
            background-color: skyblue;
            display: flex;
            align-items: flex-end;
        }
        #box2 {
            background-color: red;
            align-self: center;
        }
        #box3{
            background-color: green;
        }
        #box4{
            background-color: yellow;
            align-self: flex-start;
        }
        #box5{
            background-color: white;
        }
        #box6{
            background-color: blue;
        }
        #box7{
            background-color: gray;
        }
        
</style>

5.5 order

作用：定义项目的排列顺序（默认为0）

属性值：number（数值越小越靠前，与z-index不一样）

 <style>
        .item {
            height: 400px;
            width: 400px;
        }

        #box1 {
            height: 100vh;
            width: 100vw;
            background-color: skyblue;
            display: flex;
        }
        #box2 {
            background-color: red;
            order: 1;
        }
        #box3{
            background-color: green;
        }
        #box4{
            background-color: yellow;
        }
        #box5{
            background-color: white;
            order: -1;
        }
        #box6{
            background-color: blue;
            order: -2;
        }
        #box7{
            background-color: gray;
        }
</style>