弹性盒子/flex

弹性盒

弹性盒子（flexbox或者flexble box）是css3的一种新布局方式。其最大的优点是可以适配不同的屏幕大小。因为是css3新增属性，所以会有兼容问题，在部分低版本浏览器上不支持此属性。

---

 

1.定义弹性盒

父元素定义弹性盒：display:flex/flex-inline;前缀写法display：-webkit-flex；

2.设置主轴方向

定义主轴方向：flex-direction；其属性值有：

• column表示上下排列；
• column-reverse表示从下至上排列；
• row表示左右排列，为默认排列方式，效果和左浮动一样，只不过浮动是定义 在元素本身，而弹性盒定义在元素的父元素上，所以父元素也没有浮动带来的 影响；
• row-reverse表示从右往左排列。

3.设置主轴对齐方式

设置主轴对齐方式：justify-content；其属性值有：

• flex-start表示沿主轴顶部（左边）对齐，为默认值；
• flex-end表示沿主轴底部（右边）对齐；
• Center：表示弹性盒的子元素沿主轴居中对齐；
• space-between表示两端对齐；
• space-around为两端对齐，且两端留有间距（两端环绕对齐）；

4.设置侧轴对齐方式

设置侧轴对齐方式：align-items；其属性值有：

• center表示沿着侧轴居中对齐；
• flex-start表示沿侧轴顶部对齐，为默认值；
• flex-end表示沿侧轴底部对齐；
• 侧轴对齐方式没有换行时没有两端对齐。
• 因为高度会继承，如果需要设置高度自适应（盒子高度是由内容撑开），当只 有一行（flex-warp：nowarp）的时候，子元素不设置高度，子元素的高度就会继承父元素，这时只需添加属性align-items：flex-start；就可以解决子元素高度继承问题

4.1换行后侧轴对齐方式

换行后需要实现侧轴对齐方式属性为align-content，其属性值有

• Center表示上下居中对齐；
• Spare-around表示上下两端对齐，且留有间距（上下环绕对齐）
• Spare-between表示上下两端对齐

• 换行后会子元素高度固定后会出现高度继承的bug，虽然表面上看不出来，但盒子的实际占位为每行二分之一，此时添加属性align-content：flex-start；即可解决

5.设置自动换行

当子元素超出父元素之后换行属性为flex-wrap；其属性值设置有：

• wrap表示子元素超出父元素后自动换行；
• wrap-reverse表示子元素超出父元素后自动换行并且反向；
• nowrap为不换行，是flex-wrap的默认值。
• 设置主轴方向和换行简写属性：flex-flow：row wrap；表示flex-direction值为row，flex-wrap值为warp。

6.其他属性

6.1order属性

Order添加在弹性盒子元素里，值越小越靠前，默认值是0，如果在弹性盒子元素中任意一个元素设置order值为-1，且其他子元素不设置order的值，则此元素将会排在第一个显示，如果order的值设置为1，则此元素将会排在最后一个显示。

6.2flex-grow属性

Flex-grow为主轴的扩展值，是添加到子元素里的，可以简写为flex，通过此元素可以实现三栏布局和竖排三栏布局。假设abc三个盒子，a和c盒子高度设为100px，b占剩余高度，就可以在父元素添加弹性盒属性，并设置上下排列，给b添加flex-grow属性，属性值设为1，就可以实现，flex属性值最大为1，设为10或者更高显示结果和设置为1的结果相同，也可以设置为0.9，表示b占剩余高度的90%。

6.3flex-shrink属性

Flex-shrink为收缩属性，此元素是添加在弹性盒的子元素中的，设置属性值为0可以实现禁止收缩。

6.4align-self属性

Align-self为设置在子元素身上的侧轴对齐方式

6.5flex-basis属性

Flix-basis相当于给子元素设置宽度，在大部分情况下可以替代宽度，是设置在子元素身上的属性

 

7.弹性盒的计算：

7.1flex-grow的计算

假设有box宽度1000px，box的子元素a宽度200px，b宽度300px，给box加 上弹性盒属性，a的flex值设为1；b的flex值设为3；则a最终的宽度为 200+[（1000-200-300）*1/4]=325px，而b的宽度为300+[（1000+200+300） *3/4]=875px；即为a和b按比例扩展

7.2Flex-shrink属性拓展

假设有box宽度1000px，box的子元素a宽度400px，b宽度800px，给box加 上弹性盒属性，分别给a和b添加属性flex-shirnk，属性值分别设为1和3，这时 会涉及到总权重，总权重计算方法为400*1+800*3=2800，a的宽度为200÷[2800 ÷（400*1）]=28，a的宽度为400+（1200-400-800-28）=572px，b的宽度为剩余宽度。

注意：

弹性盒的子元素不能浮动（浮动失效），但是在父元素会生效。

---

结束语

好啦，以上就是小谭要分享的内容了，如果还有什么小谭没有提到的，欢迎各位大佬前来补充交流，小谭不胜荣幸！