1.flex-direction :設定主軸的方向
2.justify-content： 設定主軸上的子元素排列方式
3.flex-wrap：設定子元素是否換行
4.align-content：設定側軸上的子元素的排列方式 （多行）
5.align-items：設定側軸上的子元素排列方式（單行）
6.flex-flow：復合屬性，相當於同時設定了flex-ditection和flex-wrap
1.主軸和側軸 ，預設水平向右? 的x軸是主軸『說明row
預設從左到右
row-reverse
從右到左
column
從上到下
column-reverse
從下到上
注意⚠️：使用前，確定那個是主軸
屬性值說明
flex-start
從頭開始，如果主軸是x軸，則從左到右
flex-end
從尾排列
center
從主軸居中對齊
space-around
平分剩餘空間
space-between
先兩邊貼邊，再平分剩餘空間
預設情況下，專案排再一條直線上，flex布局預設不換行說明nowrap
預設值，不換行
wrap
換行
控制子項在側軸（預設是y軸）上的排列方式，在子項為單項的時候使用說明flex-start
從上到下
flex-end
從下到上
center
擠到一起居中（垂直居中）
stretch
拉伸（預設值）
設定子項在側軸上的排列方式，並且只能在用於子項出現"換行"的情況，在單行下無效說明flex-start
預設值，在側走的頭部開始排列
flex-end
在側軸的尾部開始排列
center
在側軸的中間顯示
space-around
子項在側軸平分剩餘空間
space-between
子項在側軸先分布在兩頭，再平分剩餘空間
stretch
設定子項元素高度平分父元素高度
是flex-direction和flex-wrap屬性的復合屬性
flex-flow：row wrap
flex屬性是定義子項分配剩餘空間，用flex來表示佔多少份數
舉個?：
.item
1. align-self 屬於允許單個專案，有與其他專案不一樣的對齊方式，可覆蓋align-items屬性
2. 預設值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同於stretch
舉個?：
span:nth--child(2)
數值越小，排列越靠前 ，預設為0background:liner-gradient(起始方向，顏色1，顏色2，.......)
background:-webkit-liner-gradient(left,red,blue)
background:-webkit-liner-gradient(left,top,red,blue)
背景漸變必須新增瀏覽器私有字首
其實方向可能是方位名詞或度數，省略則為top
flex布局 父項常見屬性
通過給父盒子新增flex屬性，來控制盒子的位置和排列方式。屬性 說明flex direction 設定主軸方向 justify content 設定主軸上的子元素排列方式 flex wrap 設定子元素是否換行 align content 設定側軸上的子元素排列方式 單行 align items 設...
flex布局常見屬性
flex direction row 從左到右 預設值 flex direction row reverse 從右到左排序 flex direction columm 從上到下 flex direction columm reverse 從下到上justify content flex start ...
flex布局的常見屬性
主軸與側軸 flex布局中，是分為主軸和側軸兩個方向，同樣的叫法有 行和列 x軸y軸 常見的父項屬性 flex direction 設定主軸的排列方向 子元素事是跟著主軸來排列的 row 預設值從左向右 row reverse 從右向左 column 從上到下 column reverse 從下到上...