flex布局原理flex-direction
預設主軸x軸水平向右 y軸垂直向下
屬性值描述row
預設從左到右
row-reverse
從右到左
column
從上到下
column-reverse
從下到上
justify-content
屬性值描述
flex-start
預設從頭部開始如果主軸是x軸則從左到右
flex-end
從尾部開始排列
center
在主軸居中對齊
space-between
平分剩餘空間
space-around
先兩頭對齊，在平分剩餘空間
注意:使用屬性之前先確定好主軸是x還是y
flex-wrap
預設子元素不換行，裝不開子元素會縮小子元素的大小放到父元素內。
屬性值描述nowrap
預設不換行 （大小可能會改變）
wrap
換行align-items 設定側軸上子元素的排列方式(單行)
屬性值描述
flex-start
從頭部開始
flex-end
從尾部開始
center
居中顯示
stretch
拉伸 (不設定高度，高度由父盒子決定)
align-content 設定側軸上的子元素的排列方式（多行）
屬性值描述
flex-start
在側軸的頭部開始排列
flex-end
從側軸尾部開始排列
center
在側軸中間顯示
space-between
子元素在側軸平分剩餘空間
space-around
子元素在側軸先兩頭對齊，在平分剩餘空間
stretch
拉伸align-content 和align-items區別
flex-flow
屬性是 flex-direction 和 flex-wrap 屬性的復合屬性
flex-flow:row wrap; /*x主軸，換行 */
flex屬性
定義子專案分配剩餘空間，用flex來表示佔多少份
.item>
section
section div:nth-child(1)
section div:nth-child(2)
section div:nth-child(3)
style
>
>
>
>
div>
>
div>
>
div>
section
>
body
>
span:nth-child(2)>
divdiv span
div span:nth-child(3)
style
>
head
>
>
>
>
1span
>
>
2span
>
>
3span
>
div>
body
>
數值越小，排列越靠前，預設為0。
注意：和 z-index 不一樣。
>
divdiv span
div span:nth-child(2)
div span:nth-child(3)
style
>
head
>
>
>
>
1span
>
>
2span
>
>
3span
>
div>
body
>
Flex移動端布局
目前使用flex布局典型的 有天貓和網易新聞。首先，利用flex的專案不需要對viewport進行縮放，直接 簡單回顧一下flex的屬性 一 設定在容器上的屬性 1 flex direction 屬性決定主軸的方向 即專案的排列方向 2 flex wrap 預設顯示在一條軸線上，如果排不下如何換行。...
flex移動端 布局
在移動端中，一般用flex布局來解決當螢幕適應時出現布局錯亂的現象 步驟 1，在開始階段先開啟flex布局，就是在父盒子上display flex 開啟flex布局 而且flex都是對父元素操作來影響子元素的，這裡的子元素是一級子元素，只能影響一級子元素，而且是 所有的一級子元素，其中有幾個重要且常...
移動端布局方式 flex布局
1 justify content屬性 左右居中 justify content屬性定義了專案在主軸上的對齊方式。justify content flex start flex end center space between space around flex start 預設值 左對齊 flex...