三、子盒子屬性
pc端相容性不好，移動端完全支援。
1.子元素都變成行內塊元素。
2.浮動和定位全部失效。
3.任何乙個容器都可以指定為flex布局
4.flexible box的縮寫
5.float,clear和vertical-align都失效。
父盒子開啟flex布局模式。
設定主軸方向，即元素排列方向
預設主軸是往右，側軸是向下，可以修改的。值描述
row預設值，主軸是從左到右
row-reverse
主軸變成從右往左
column
主軸變成從上往下，側軸是從左往右
column-reverse
主軸變成從下往上，側軸是從左往右
設定主軸上元素的對齊方式，不能設定側軸上的對齊方式，使用前要先確定主軸是哪個。值描述
flex-start
預設值，從頭部開始依次排列
flex-end
從尾部開始排列
center
在主軸上居中對齊，x軸是主軸就水平居中，y軸是主軸就垂直居中
space-around
平分剩餘空間，兩邊不靠邊 ，空間為倆個元素之間的空間的一半
space-between
先兩邊貼邊，再平分剩餘空間
設定子元素是否換行
flex預設是不換行的。
不換行時，再增加元素，會自動縮小子元素的寬度。值描述
nowrap
預設值，不換行
wrap
換行設定側軸上的子元素排列方式（多行），在上面換行後，子元素可能排列不整齊了。
需要在側軸上也對齊一下。值描述
flex-start
預設值，從側軸頭部開始依次排列
flex-end
從側軸尾部開始排列
center
在側軸居中對齊，x軸是側軸就水平居中，y軸是側軸就垂直居中
space-around
平分剩餘空間，兩邊不靠邊 ，空間為倆個元素之間的空間的一半
space-between
先兩邊貼邊，再平分剩餘空間 ，平分之後再設定外邊距。
stretch
設定子元素高度平分父元素高度。
設定側軸上子元素的排列方式（單行），單行使用，多行使用上面的。值描述
flex-start
預設值，從上到下
flex-end
從下到上
center
垂直居中
stretch
拉伸，有高度了不會拉伸，沒有高度會沿著側軸拉伸，貼邊為止
復合屬性，相當於同時設定flex-direction和flex-warp
flex-flow
:row wrap;
跟的數字，預設是0，
寫幾份就佔幾份。
也可以寫百分比，表示佔父級的多少份。
為來不讓子盒子在側軸上移動一起移動，只讓指定的盒子移動，在側軸上移動值描述
flex-start
預設值，從上到下
flex-end
從下到上
center
垂直居中
給子盒子排序
預設是0，數值越小，排列在前。
flex布局（彈性布局）
flex是flexible box的縮寫，意為 彈性布局 用來為盒狀模型提供最大的靈活性。任何乙個容器都可以指定為flex布局。box行內元素也可以使用flex布局。boxwebkit核心的瀏覽器，必須加上 webkit字首。box注意，設為flex布局以後，子元素的float clear和vert...
Flex布局（彈性布局）
flex是flex box的縮寫，即彈性布局。任何乙個容器都可以指定為flex布局。行內元素也可以使用flex布局。webkit核心的瀏覽器，必須加上 webkit字首。box.box.box注意 設為flex布局以後，子元素的float clear和vertical align屬性將失效。採用fl...
Flex布局 彈性布局
1.flex direction flex direction屬性決定主軸的方向 即專案的排列方向 flex direction row row reverse column column reverse 2.flex wrap 預設情況下，專案都排在一條線 又稱 軸線 上。flex wrap屬性定...