下列屬性用於設定容器，也就是父盒子
在flex布局中，分為主軸和側軸。
預設情況下，水平方形為主軸，水平向右，垂直方向為側軸，垂直向下。
flex-direction屬性可以改變預設的主軸設定
body
div
span
flex-direction:row; //設定容器的主軸為x軸，此值為預設值。反轉主軸，設定水平方向為主軸，專案從右向左排列
flex-direction: row-reverse;flex-direction:column;反轉主軸，設定垂直方向為主軸，專案從下向上排列
flex-direction: column-reverse;使用此屬性之前，要確定主軸是哪乙個，主軸不一樣，設定的值也不一樣
flex-start
body
div
span
這與沒設定 justify-content:flex-start 沒有區別
修改 justiry-content 的值為 flex-end
flex-end
/* 設定專案從右到左排列 */
注意：這裡僅僅是改變了專案的起始方向，並沒有改變專案的排列順序，而我們上面說的 flex-direction 的翻轉會改變專案的排列順序
將 justify-content 的值設定為 center，所有元素居中顯示，兩邊編劇一致。
center居中
justify-content:space-around;
問題：為什麼明明是評分剩餘空間，專案的中間距離，看起來是左側兩側邊距的2倍？
注意：
y軸為主軸和軸為主軸類似。
傳統布局中，設定子盒子浮動後，如果1行佔不下，會自動另起一行
但是在 flex 布局中，則不然。
發現，當1行站不下所有專案時，會自動縮小專案的寬度
如果不希望改變寬度，而是另起一行，只需要在容器中據加入如下設定即可
flex-wrap:wrap;
效果圖如下：
預設的是flex-wrap:nowrap;縮小寬度，一行顯示。
看上面的效果圖，發現，兩行之間的垂直間距很大，為什麼呢？
擴充套件
如果 主軸是y軸，顯示效果如下：
設定專案在側軸上的排列方式
但是此屬性適合專案為單行時
側軸預設是y軸，當然可以改變
在容器中加入align-items:center;
效果圖如下：
flex-direction:column;
效果圖：
當然此屬性的只也可以設定為其他幾個
其他幾個值都比較簡單，稍微需要注意的是 stretch ，意思是拉伸，如果主軸是x軸，那麼就會拉伸專案的高度與父元素一樣高，但是專案不能設定固定高度，否則無效
設定側軸上的子元素的排列方式
這與 align-items 相似，區別在於，此屬性用來設定多行專案（也就是專案換行）時的排列方式，在單行專案下時沒有效果的
**align-items 和 align-content 對比
flex-direction 和 flex-wrap 的復合屬性
flex-flow: column nowrap;
移動端布局 flex布局
flex布局原理flex direction 預設主軸x軸水平向右 y軸垂直向下 屬性值描述row 預設從左到右 row reverse 從右到左 column 從上到下 column reverse 從下到上 justify content 屬性值描述 flex start 預設從頭部開始如果主軸...
Flex移動端布局
目前使用flex布局典型的 有天貓和網易新聞。首先，利用flex的專案不需要對viewport進行縮放，直接 簡單回顧一下flex的屬性 一 設定在容器上的屬性 1 flex direction 屬性決定主軸的方向 即專案的排列方向 2 flex wrap 預設顯示在一條軸線上，如果排不下如何換行。...
flex移動端 布局
在移動端中，一般用flex布局來解決當螢幕適應時出現布局錯亂的現象 步驟 1，在開始階段先開啟flex布局，就是在父盒子上display flex 開啟flex布局 而且flex都是對父元素操作來影響子元素的，這裡的子元素是一級子元素，只能影響一級子元素，而且是 所有的一級子元素，其中有幾個重要且常...