flex佈局介紹和簡單案例
flex佈局可以幫我們快速佈局一些區塊,實現你想要的效果,不用再去float,position之類的.我們在佈局網頁的時候很多時候都是一些特殊佈局,flex就能幫我快速去佈局,不需要去定位.
任何一個盒子都可以指定為flex佈局,但是要注意，設為 Flex 佈局以後，子元素的float、clear和vertical-align屬性將失效。
基本案例1：
<ul>
<li>音樂</li>
<li>影視</li>
<li>旅遊</li>
</ul>body,html{ margin:0; padding:0; } ul{ display: flex; background: #ccc; list-style-type:none; padding: 0 } li{ flex: 1;/*一共3個li,每一個佔1/3*/ text-align: center; line-height: 0.8rem; font-size: 0.24rem }
基本案例2：
<body> <header> <p>Header</p> </header> <div class="container"> <main class="content"></main> <nav class="nav"></nav> <aside class="ads"></aside> </div> <footer> <p>Footer</p> </footer> </body>
body{ display:flex; flex-direction:column;/*佈局從上向下*/ } header,footer{ display: flex; background: #abcdef; width: 100%; height: 1rem; justify-content: center;/*水平居中*/ align-items: center;/*垂直居中*/ } header p,footer p{ font-size: 0.24rem } .container{ display:flex; height: 2rem } .container .content{ flex:1;/*佔1/4份 1+2+1=4，所以說一共4份*/ background: pink; } .container .nav{ flex:2;/*佔2/4份*/ background: #ccc; } .container .ads{ flex:1;/*佔1/4份*/ background: orange }
屬性：
flex-direction
row（預設值）：主軸為水平方向，起點在左端。
row-reverse：主軸為水平方向，起點在右端。
column：主軸為垂直方向，起點在上沿。
column-reverse：主軸為垂直方向，起點在下沿。
flex-wrap
nowrap（預設）：不換行。
wrap：換行，第一行在上方。
wrap-reverse：換行，第一行在下方。
flex-flow
flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，預設值為row nowrap。
.box {
flex-flow: <flex-direction> || <flex-wrap>;
}
justify-content（水平方向，假設主軸為從左到右）
flex-start（預設值）：左對齊
flex-end：右對齊
center： 居中
space-between：兩端對齊，專案之間的間隔都相等。
space-around：每個專案兩側的間隔相等。所以，專案之間的間隔比專案與邊框的間隔大一倍。
align-items（垂直方向）
flex-start：交叉軸的起點對齊。
flex-end：交叉軸的終點對齊。
center：交叉軸的中點對齊。
baseline: 專案的第一行文字的基線對齊。
stretch（預設值）：如果專案未設定高度或設為auto，將佔滿整個容器的高度。
align-content（定義了多根軸線的對齊方式。如果專案只有一根軸線，該屬性不起作用。）
flex-start：與交叉軸的起點對齊。
flex-end：與交叉軸的終點對齊。
center：與交叉軸的中點對齊。
space-between：與交叉軸兩端對齊，軸線之間的間隔平均分佈。
space-around：每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。
stretch（預設值）：軸線佔滿整個交叉軸。