flex(彈性布局)，是一種響應式布局，能自動伸縮盒模型達到自適應的效果。
彈性布局由彈性容器(flex container)和彈性專案(flex item)組成。
在彈性容器中，水平方向稱為主軸(main axis)(起點main start,終點main end)；垂直方向稱為縱軸(cross axis)(起點cross start,終點cross end)。
在彈性專案中，元素的寬度稱為main size，高度稱為cross size。
通過display: flex屬性，可將元素宣告塊級彈性容器；通過dsplay: inline-fex，可將元素宣告為行內彈性容器。
flex-direction屬性
flex-direction指定主軸(main cross)的方向，即元素排列的方向。
// 需先宣告為flex布局
flex-direction: row | row-reverse | column | column-reverse
// 屬性解釋：
row: 水平方向，從左往右
row-reverse: 水平方向，從右往左
column: 垂直方向，從上往下
column-reverse: 垂直方向，從下往上
flex-wrap屬性，指定彈性專案的換行方式，即彈性專案超過一行時如何換行。
flex-wrap: no-wrap | wrap | wrap-reverse
// 屬性解釋：
no-wrap: 不換行(預設)
wrap: 正常換行
wrap-reverse: 換行，第一行在下方，從下往上換行
flex-flow屬性，為flex-direction和flex-wrap的合併屬性。
// 第乙個為flex-direction,第二個為flex-wrap
flex-fow:
justify-content屬性，指定彈性內容在主軸上的排列方式。
justify-content: flex-start | flex-center | flex-end | space-between | space-around
// 屬性解釋：
flex-start: 從主軸起點(main start)到主軸終點(main end)
center: 居中
flex-end: 從主軸終點(main end)到主軸起點(main start)
space-between: 專案周圍的空間相等，但空隙會摺疊
space-between: 專案周圍的空間相等，但空隙不摺疊
align-items屬性，指定彈性專案在縱軸上的對齊方向。
align-items: flex-start | center | flex-end | base-line | stretch
// 屬性解釋：
flex-start: 專案對齊縱軸的起點(cross start)
center: 居中
flex-end: 專案對齊縱軸的終點(cross end)
baseline: 基於基線對齊
stretch: 拉伸(預設)，從起點(cross start)到終點(croos end)
align-content屬性，指定當主軸(main axis)隨專案換行時，多條主軸線如何對齊。
align-content: flex-start | center | flex-end | space-between | space-around | stretch
// 屬性解釋：
flex-start: 從縱軸起點(cross start)到終點(cross end)
center: 居中
flex-end: 從縱軸終點(cross end)到縱軸起點(cross start)
space-between: 專案周圍的空間相等，但空隙會摺疊
space-between: 專案周圍的空間相等，但空隙不摺疊
stretch: 拉伸(預設)，拉伸專案以布滿縱軸長度
儘管flex看起來像二維布局，但其實是個一維布局，縱軸(cross axis)沒有換行(wrap)的行為，自然就沒有justify-items屬性。
儘管彈性容器已經有設定彈性專案的各種布局行為，但總有個別彈性專案需要自定義布局方式。
order屬性
order屬性，指定彈性專案的排列序號，數值越小越靠前。
order:flex-grow屬性，指定彈性專案在有空餘空間的放大比例。
// 預設為0：表示即使有剩餘空間也不放大
flex-grow:
flex-shrink屬性，指定彈性專案在空間不夠時的縮小比例。
// 預設為1：表示空間不夠時專案將縮小
flex-shrink:
flex-basis屬性，指定彈性專案的基本長度。
flex-basis:flex屬性，為flex-grow、flex-shrink和flex-basis的合併屬性。
flex: flex-grow,flex-shrink,flex-basis
// 補充：
預設: 0,1,auto
auto: 1,1,auto
none: 0,0,auto
align-self屬性，指定彈性專案在縱軸上的對齊方式，將覆蓋掉彈性容器的align-items屬性。
align-self: auto flex-start | center | flex-end | base-line | stretch
// 屬性解釋：
auto: 自動
flex-start: 專案對齊縱軸的起點(cross start)
center: 居中
flex-end: 專案對齊縱軸的終點(cross end)
baseline: 基於基線對齊
stretch: 拉伸(預設)，從起點(cross start)到終點(croos end)
css布局之彈性布局flex
作用 彈性布局flex能按照我們的設定自動計算各子元素之間的間距並將之布局好，而不需要像定位那樣手動計算布局。彈性布局是定義在乙個父容器中，加上display flex樣式使父容器的布局方式成為彈性布局。父容器中的子元素都會成為行內塊，預設所有子元素橫向排列，子元素的float clear和vert...
css之彈性布局
彈性布局在移動端可以大膽使用，但在pc端使用，如果要相容低版本低版本 ie 則不能使用彈性布局 採用flex布局的元素，被稱為flex容器，他的直接子元素被稱為flex專案 外鏈轉存失敗,源站可能有防盜煉機制,建議將儲存下來直接上傳 img kguifkop 1594006874098 c user...
css 彈性布局
什麼是彈性布局？flex布局，是h5新出的布局方式，主要代替傳統float浮動布局。注意 布局要給父元素設定，子元素按照布局方式排列，他會使塊級元素不獨佔一行。特點 當沒有給彈性布局設定換行時，子元素不會自動換行會在一行顯示。display flex 設定彈性布局 flex direction 設定...