?3.flex布局

　　(1)左中右三等分：

　　　 給父元素添加display:flex

　　(2)左右布局，一側(cè)定寬，一側(cè)自適應(yīng)撐滿

?

<div style="display:flex; height:100%; width:100%;">
<div style="width:300px; background:red;">
sss
</div>
<div style="width:100%; background:green;">
ssssss
</div>
</div>

flex知識點(diǎn)：
1 flex-direction:屬性決定主軸的方向；
　　　　　　　　　　 row 水平方向，起點(diǎn)在左端
　　　　　　　　　　 row-reverse 水平方向，起點(diǎn)右端
　　　　　　　　　　 column 縱向方向，起點(diǎn)在上
　　　　　　　　　　 column 縱向方向，起點(diǎn)在下

2 flex-wrap:決定是否換行，默認(rèn)都是排在一行
　　　　　　　no-wrap;(默認(rèn))不換行
　　　　　　　wrap; //換行，第一行在上方
　　　　　　　wrap-reverse;//換行；第二行在上方
3 flex-flow:flex-direction和flex-wrap的縮寫，默認(rèn)為row nowrap
　flex-flow:<flex-direction> ||<flex-wrap>

4 justify-content:定義在item在主軸上的對齊方式
　　　　　　　　　　　flex-start 從左到右
　　　　　　　　　　　flex-end 從右到左
　　　　　　　　　　　center 居中
　　　　　　　　　　 space-between 兩端對齊
　　　　　　　　　　　space-around 每個item兩側(cè)中間相等

5 justify-content:定義在item在主軸上的對齊方式

　　align-items:item在縱軸上的對齊方式：屬性如下圖：

flex-start：交叉軸的起點(diǎn)對齊。 flex-end：交叉軸的終點(diǎn)對齊。 center：交叉軸的中點(diǎn)對齊。 baseline: 項(xiàng)目的第一行文字的基線對齊。 stretch（默認(rèn)值）：如果項(xiàng)目未設(shè)置高度或設(shè)為auto，將占滿整個容器的高度。 6 align-content 定義了多跟軸線的對齊方式；如果該項(xiàng)目只有一根軸線，該屬性不起作用； .box {align-content: flex-start | flex-end | center | space-between | space-around | stretch; }

flex-start：與交叉軸的起點(diǎn)對齊。 flex-end：與交叉軸的終點(diǎn)對齊。 center：與交叉軸的中點(diǎn)對齊。 space-between：與交叉軸兩端對齊，軸線之間的間隔平均分布。 space-around：每根軸線兩側(cè)的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。 stretch（默認(rèn)值）：軸線占滿整個交叉軸。

https://www.cnblogs.com/yangguoe/p/9969140.html
　

轉(zhuǎn)載于:https://www.cnblogs.com/menghan94/p/11186000.html

總結(jié)

以上是生活随笔為你收集整理的面试题 flex（二）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。