面試題 flex（二）

 3.flex布局

　　(1)左中右三等分：

　　　 給父元素添加display:flex

　　(2)左右布局，一側定寬，一側自適應撐滿

 

<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知識點：

1 flex-direction:屬性決定主軸的方向；
　　　　　　　　　　 row 水平方向，起點在左端
　　　　　　　　　　 row-reverse 水平方向，起點右端
　　　　　　　　　　 column 縱向方向，起點在上
　　　　　　　　　　 column 縱向方向，起點在下

2 flex-wrap:決定是否換行，默認都是排在一行
　　　　　　　no-wrap;(默認)不換行
　　　　　　　wrap; //換行，第一行在上方
　　　　　　　wrap-reverse;//換行；第二行在上方

3 flex-flow:flex-direction和flex-wrap的縮寫，默認為row nowrap
　flex-flow:<flex-direction> ||<flex-wrap>

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

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

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

flex-start：交叉軸的起點對齊。
flex-end：交叉軸的終點對齊。
center：交叉軸的中點對齊。
baseline: 項目的第一行文字的基線對齊。
stretch（默認值）：如果項目未設置高度或設為auto，將占滿整個容器的高度。

 6 align-content 定義了多跟軸線的對齊方式；如果該項目只有一根軸線，該屬性不起作用；

.box { align-content: flex-start | flex-end | center | space-between | space-around | stretch; }

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

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