详细介绍弹性盒子(display:flex)

ゝ一纸荒年。 2024-03-08 08:01 86阅读 0赞

#### 文章目录 ####

*  什么是弹性盒子
    
     *  如何使用弹性盒子
     *  flex系列
     *  flex-direction 对齐方向
        
         *  水平对齐垂直对齐
         *  flex-wrap 换行
         *  flex-flow
         *  flex模型说明
     *  容器的属性
     *   *  justify-content X轴对齐方式
         *  align-content Y轴对齐方式
         *  总结属性值
         *  Y轴对齐的另外一种：align-items
         *  align-content和align-items的区别
     *  对于一些不常用的补充
     *  flex项排序——order
        
         *  flex放大——flex-grow
         *  flex缩小——flex-shrnk
         *  flex-basis 主轴空间
         *  flex属性 = flex-grow + flex-shrink + flex-basis
         *  flex嵌套

### 什么是弹性盒子 ###

一般来说我们在css中用到的display大多数都接block(块级元素)、inline-block(行内块元素)、inline(行内元素)，这些在我们所平时需要的大部分地方都很好使，但是在某些地方会具有一定的局限性，让我们很难调样式，那么弹性盒子(弹性布局)就有可能会很好的帮助到你

弹性盒子可以**批量式**的改变**子元素**的布局！

那么弹性盒子用在什么地方比较合适呢：  
1.当一个盒子里的子元素需要垂直居中一个块的内容  
2.当盒子里所有的子元素占用等量的可用宽度/高度时  
3.当多列布局中都需要相同的高度(不用理会内容)

所以，弹性布局最适合用在什么地方呢？对！就是我们前端初学并且可能都要一直接触的购物页面。  
那些繁琐看起来一样，感觉写起来很简单，但是调起样式来令人头大的购物商品页面，什么左浮动右浮动什么边距我们统统不要，不要1226，不要998，弹性盒子两三句话就可以直接搞定！炒鸡实惠。

### 如何使用弹性盒子 ###

在刚刚的介绍里面可以发现，很多的描述都有关父子，所以我们弹性盒子的设置，首先就是在**父级**盒子里面加上display:flex; 来人，上代码。

没人…那我自己来

### flex系列 ###

**flex系列之flex常用版**  
首先，这是没有添加弹性盒子的  
![dec1c34e0f4760d141d034de143e6cf5.png][]

css:

html:

<div>flex-flow: column wrap;</div>
    <ul class="box"><li>1</li><li>2</li><li>3</li><li>4</li>
    </ul>

--------------------

当添加了弹性盒子之后就会  
![a0ed2c46db56e38b161c97ace312421c.png][]

css:

.box {width: 600px;height: 250px;background-color: black;display: flex;}

--------------------

**当加入属性：**

#### flex-direction 对齐方向 ####

##### 水平对齐 #####

![b34b5d21f7cfe1a8e4b26330f2345763.png][]

css:

.box {width: 600px;height: 250px;background-color: black;display: flex;flex-direction: row;}

--------------------

![a0a5745f46d17be67284ce20e0327181.png][]  
css:

.box {width: 600px;height: 250px;background-color: black;display: flex;flex-direction: row-reverse;}

row：主轴对齐，也可以说是水平对齐，也就是从左到右对齐；  
row-reverse：主轴对齐，reverse(翻转)，所以这里是从右到左对齐；

--------------------

##### 垂直对齐 #####

![d416cb3366a9817bf55489671c1c28ba.png][]

![这两张图是最开始截的只有三个li，将就看看][li]

> **column**：交叉轴对齐，也可以说是垂直对齐，也就是从上到下对齐；  
> **column-reverse**：交叉轴对齐，同理这里是从下到上对齐；

--------------------

#### flex-wrap 换行 ####

![463bc34b7202eba1f5ed0e0700cda222.png][]

![cf3234dd7b85ea8ac25bcda234d2be17.png][]  
css:

.box {width: 600px;height: 250px;background-color: black;display: flex;flex-direction: row;flex-wrap: nowrap;}

在从左到右对齐的条件下：

> **nowrap** ：默认值，不换行；不换行的话，如果所有子元素的宽/高总值大于父元素的宽/高，那么为了子元素不溢出，会把内容挤压变形到自适应的宽高；  
> **warp**：对齐方向不溢出的自动换行；

*  *这里只是单纯换不换行，不改变li的顺序哦。*

之前就说了，弹性盒子是为了方便，所以这里！我们当然可以**简化：**

#### flex-flow ####

> flex-direction + flex-wrap = flex-flow

![水平对齐 水平溢出就自动换行][9c9447abdd4c34fbde3d2bb97c0af390.png]

![水平对齐 自适应宽][4f95964bda5fd12e97eeccd83fe284cf.png]

![垂直对齐 垂直溢出就自动换行][e0d09705a933d5ed9198b5289b5b2814.png]

![垂直对齐 自适应高][a56dcc527b8fffd8630fe4ee01af9b6a.png]

#### flex模型说明 ####

稍微的列举了一些弹性盒子的属性，想必应该是有些了解了，那么现在就正儿八经的了解一下flex模型的一些官方术语。  
![flex模型图][flex]

*  **主轴（main axis）** 是水平flex元素放置的方向延伸的轴；  
    该轴的开始和结束被称为 main start 和 main end。
 *  **交叉轴（cross axis）** 是垂直于flex元素放置方向的轴；  
    该轴的开始和结束被称为 cross start 和 cross end。

--------------------

### 容器的属性 ###

flex常用版结束，现在是**容器超好用之极端版**，接下来的这些东西正常使用当然都没问题，但是如果出现父级的宽/高小于子级的宽/高，那又会出现什么情况呢，上代码。

#### justify-content X轴对齐方式 ####

**当父级的高不够时**  
![靠左对齐][d307ecf5e39aaabde89bcfb7c7721da7.png]  
css:

.box {width: 600px;height: 250px;background-color: black;display: flex;flex-flow: row wrap;justify-content: flex-start;}

![靠右对齐][07f4583f83471545c70e24c9678317e5.png]

![中间对齐][bc075b4463fbdbaccc95e11920771464.png]

![间距相等 两边不留白][688b13c6c22aeeaab348089c79f28105.png]

![间距相等 两边留白等于间距的一半][d400b50ea455a14c2ef06637ee3262d6.png]

![间距相等 两边留白和间距一样][2b8a9ce1fbcd546ca0dfffd91963bfda.png]  
**当父级的宽度(width)<2倍子级的宽度(width)时：**  
因为宽度不够，X轴没有间距所以按顺序实现每行第一个左边不留白  
![76585c7140fa5ee748921d413a99b03f.png][]  
**由于父级宽度的限制 space-around 和 space-evenly 会一样：**  
![7ace6811c8e5b2b445a93d0c1bc12011.png][]

![31dbd5db07c3b5d899b9213358e989f0.png][]

#### align-content Y轴对齐方式 ####

**当父级的高不够时**  
![顶部对齐父级][f43ab7d1b7e387ac8e0f2995a1f50f58.png]  
css:

.box {width: 600px;height: 250px;background-color: black;display: flex;flex-wrap: wrap;justify-content: space-evenly;align-content: flex-start;}

![底部对齐父级][3806a8dcaff50bc8f1e85a81aba41f26.png]

![中间对齐(横)中线][83a9f307614763474856f92cf4372824.png]

*  **当父级的高度(height)<2倍子级的高度(height)时：**  
    因为高度不够，Y轴没有间距所以按顺序实现每排第一个上面不留白  
    ![d4a9758e3d0ece78c986af788167e147.png][]
 *  **由于父级高度的限制 space-around 和 space-evenly 会一样（这里的上面也是用margin撑起来的）：**  
    ![1466dbde6101a7b67b6a032501f9d3d2.png][]  
    css:

.box {width: 600px;height: 250px;background-color: black;display: flex;flex-wrap: wrap;justify-content: space-evenly;align-content: space-around;margin-top: 80px;}

![865871e5c3aff08ac5e2adeb7bc70330.png][]

##### 总结属性值 #####

> **flex-start**：(默认值)起始对齐——左对齐，顶部对齐；  
> **flex-end**：结束对齐——右对齐，底部对齐；  
> **center**：居中；  
> **space-between**：间距相等，两边不留白；  
> **space-around**：间距相等，两边留白=间距的一半；  
> **space-evenly**：间距相等，两边留白和间距一样；

#### Y轴对齐的另外一种：align-items ####

![ceb94107dbcf5994af0649bfa7e69c3e.png][]

![98f304b0f82911fa7b8f3b494ab9e425.png][]

![0ef84773a4373ac8ac4dfd4c27f0b3a2.png][]

![第一行文字基线对齐][ae0b970e990b4706a8f53c9780337ac1.png]  
css:

.box {width: 600px;background-color: black;display: flex;flex-wrap: wrap;justify-content: space-evenly;/* align-content: space-evenly; */align-items: flex-start;}

html:

<div>align-items: ;</div><ul class="box"><li>1</li><li style="height:80px;">2</li><li style="height:120px;">3</li><li>4</li></ul>

> **flex-start**：交叉轴的起点对齐;  
> **flex-end**：交叉轴的终点对齐;  
> **center**：交叉轴的中点对齐;  
> **baseline**: 如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，项目的第一行文字的基线对齐；  
> **stretch**（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度;

看到这里应该就有疑惑了，那 align-content 和 align-items 有啥区别呢？  
有！大有区别

#### align-content和align-items的区别 ####

**align-content**：只能用于父级**设有高度**的情况下，因为涉及到间距和两边的留白情况，所以当父级无高度的话，这个就没有办法实现，也就是无效设置；  
**align-items**：可以用于父级**无高度**时，align-items的对齐会将父级盒子撑起来，而且这个没有间距设置，所以上图展示中不存在溢出的情况；  
第二个看起来是不是好用一点，但是宝子们，如果父级无高的话那就没有办法设置交叉轴的间距哦！而且！！如果父级设置高的话，第二个就不存在把盒子撑开的情况了，多出来的还是会溢出的。

--------------------

### 对于一些不常用的补充 ###

上面所说的基本上就能解决绝大部分的问题，如果还没有，那你继续往下看。

#### flex项排序——order ####

弹性盒子可以在不影响到源顺序（即 DOM 树里元素的顺序）的直接改变flex项的布局功能  
![6a961db288c11f754c756605b1b04554.png][]

![a\{order: 1;\}][a_order_ 1]  
css:

.box {width: 1000px;height: 300px;background-color: black;display: flex;flex-wrap: wrap;justify-content: space-evenly;align-content: space-evenly;}.a {order: 1;}

html:

<div>a{order: 1;}</div><ul class="box"><li class="a">1</li><li class="b" style="height:80px;">2</li><li class="c" style="height:120px;">3</li><li class="d">4</li></ul>

>  *  所有的flex项默认的 *order* 值为 0

*  *order* 值相同的按照源顺序显示
 *  *order* 值越大的位置越靠后，这里可以和z-index联想
 *  *order* 值可以设置负数

#### flex放大——flex-grow ####

> flex-grow：将剩下的间距等比例的用被设置的子元素填满，也就是缩放子元素来填满间隙。

默认的flex-grow的值都为0，也就是不允许放大。flex-grow的值为倍数。  
![默认样式][d0ab939c3538e6edf5fe390392eaddb4.png]  
css：

.box {width: 1000px;height: 300px;background-color: black;display: flex;flex-wrap: wrap;justify-content: space-evenly;align-content: space-evenly;}.a {flex-grow: 0;}li {width: 200px;height: 200px;list-style: none;border: 1px solid #000;background-color: pink;}

![flex-grow：1][flex-grow_1]  
css:

.box {width: 1000px;height: 300px;background-color: black;display: flex;flex-wrap: wrap;justify-content: space-evenly;align-content: space-evenly;}.a {flex-grow: 1;}li {width: 200px;height: 200px;list-style: none;border: 1px solid #000;background-color: pink;}

![a\{flex-grow: 1;\} b\{flex-grow: 2;\}][a_flex-grow_ 1_ b_flex-grow_ 2]

![a\{flex-grow: 1;\} b\{flex-grow: 2;\}][a_flex-grow_ 1_ b_flex-grow_ 2 1]  
css:

.box {width: 1000px;height: 300px;background-color: black;display: flex;flex-wrap: wrap;justify-content: space-evenly;align-content: space-evenly;}.a {flex-grow: 1;}.b {flex-grow: 2;}li {width: 200px;height: 200px;list-style: none;border: 1px solid #000;background-color: pink;}

#### flex缩小——flex-shrnk ####

> flex-grow：1；默认为1，主轴空间不够时允许项目缩小 。是给所有子级设置的。

![flex-grow：1；][flex-grow_1 1]  
css:

.box {width: 1000px;height: 300px;background-color: black;display: flex;/* flex-wrap: wrap; */justify-content: space-evenly;align-content: space-evenly;}li {width: 300px;height: 200px;list-style: none;border: 1px solid #000;background-color: pink;flex-shrink: 1;}

![flex-grow：0；][flex-grow_0]  
css:

.box {width: 1000px;height: 300px;background-color: black;display: flex;/* flex-wrap: wrap; *//* justify-content: space-evenly; */align-content: space-evenly;}li {width: 300px;height: 200px;list-style: none;border: 1px solid #000;background-color: pink;flex-shrink: 0;}

#### flex-basis 主轴空间 ####

> flex-basis：auto; //项目占主轴空间 默认auto

#### flex属性 = flex-grow + flex-shrink + flex-basis ####

> flex属性：  
> 默认为flex: 0 1 auto; // 不能放大 可以缩小 主轴空间自动

后两个可选

> 快捷键：auto(1 1 auto)和none(0 0 auto)

#### flex嵌套 ####

flex存在嵌套关系，在一个盒子中并不是只能存在一个display: flex，可以按照你需要的所使用。

--------------------

本来我是没有想写弹性盒子的，因为这玩意太长了，无奈一人血书非让我写，所以宝子们按照需要的看哈，真的好长。

[dec1c34e0f4760d141d034de143e6cf5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/08/302a76e420384d3ca40aa10e9fe2473b.png
[a0ed2c46db56e38b161c97ace312421c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/08/e77a1c8d42b44ecc81bf1803d2354c14.png
[b34b5d21f7cfe1a8e4b26330f2345763.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/08/34045cbb2cf04800ab01718fbd0b3cf6.png
[a0a5745f46d17be67284ce20e0327181.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/08/9d931b01a3bd4612ad217e0c9c74000c.png
[d416cb3366a9817bf55489671c1c28ba.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/08/60edc1fb329642c68d3164b4ee32484b.png
[li]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/08/089f7597ee714d6a9a586a938875ec83.png
[463bc34b7202eba1f5ed0e0700cda222.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/08/2ed3cf0869aa4f09a8d54e5ca5daf6d8.png
[cf3234dd7b85ea8ac25bcda234d2be17.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/08/7afb7894f51b446eb44cd9176eefac36.png
[9c9447abdd4c34fbde3d2bb97c0af390.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/08/9423d6863be74d71beb85990ddf59e24.png
[4f95964bda5fd12e97eeccd83fe284cf.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/08/93915ef4a9a9419b98a70d2cb3b84189.png
[e0d09705a933d5ed9198b5289b5b2814.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/08/b4707608d6984823a2fe75bbf24e029c.png
[a56dcc527b8fffd8630fe4ee01af9b6a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/08/af4310eddecc47929dc8b8297c96e9dd.png
[flex]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/08/27d2feff12a948de9404b6564e63480b.png
[d307ecf5e39aaabde89bcfb7c7721da7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/08/4e094c827e8243ed86710b1fc47d65ba.png
[07f4583f83471545c70e24c9678317e5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/08/be4aa3acb6cf407baf127480c95b3752.png
[bc075b4463fbdbaccc95e11920771464.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/08/d372110ad3ec4f19b9495a60ea76be7e.png
[688b13c6c22aeeaab348089c79f28105.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/08/8ac733130e2d4b08a197e0879d26ed5b.png
[d400b50ea455a14c2ef06637ee3262d6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/08/7f78e4cc28004ebe94b498ee239c3c85.png
[2b8a9ce1fbcd546ca0dfffd91963bfda.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/08/01ca11dab6e4461ead931da58d01b3a2.png
[76585c7140fa5ee748921d413a99b03f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/08/20ab678946a34cb7b6ce38d55965e23e.png
[7ace6811c8e5b2b445a93d0c1bc12011.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/08/66633bf3d94443b7b2b9dc98dcf1256b.png
[31dbd5db07c3b5d899b9213358e989f0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/08/10d087d6d312484180b44bf2bd5b2eda.png
[f43ab7d1b7e387ac8e0f2995a1f50f58.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/08/83ec4d62f1104c76b7903a487fcdf784.png
[3806a8dcaff50bc8f1e85a81aba41f26.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/08/2924d62be5d549ed806ec90078f53a83.png
[83a9f307614763474856f92cf4372824.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/08/c6b6773117854e729d6d162465d7ecb4.png
[d4a9758e3d0ece78c986af788167e147.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/08/3e9a1ea89abc42c091c4355861315f9c.png
[1466dbde6101a7b67b6a032501f9d3d2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/08/f686ca9d7edf4b80bf1110e56b26ddd8.png
[865871e5c3aff08ac5e2adeb7bc70330.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/08/d6d7ca381e5f42a7bc8bef4311114f92.png
[ceb94107dbcf5994af0649bfa7e69c3e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/08/82345bfbc9a44ec5925a6b7b3800dec3.png
[98f304b0f82911fa7b8f3b494ab9e425.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/08/3fe63d79527a4714b57a93afd2d36ab1.png
[0ef84773a4373ac8ac4dfd4c27f0b3a2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/08/4a629862f24b4d46a5e16b22c74f912a.png
[ae0b970e990b4706a8f53c9780337ac1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/08/70c5455aade3469e97dd00cf3e7b9c5f.png
[6a961db288c11f754c756605b1b04554.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/08/b1c346d795114b5b8fe050a41be64f0d.png
[a_order_ 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/08/3617df6709dc4202aee0ec03382b1389.png
[d0ab939c3538e6edf5fe390392eaddb4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/08/2ad38ee36af245ec9a10f4143eb94a1c.png
[flex-grow_1]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/08/53e54a0b94a149baaaffc31e6c3fdf3d.png
[a_flex-grow_ 1_ b_flex-grow_ 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/08/8db306566aa641d4a671b5ab46a565e7.png
[a_flex-grow_ 1_ b_flex-grow_ 2 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/08/fb8da1768cb6484e9764d588e17ec7fe.png
[flex-grow_1 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/08/4e59065733554d3bbda3af6620cb665e.png
[flex-grow_0]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/08/3e9c2e4703134a859bc89ae8feebcf98.png