值
描述
flex-direction:row;
從左到右水平排列元素（預設值）
flex-direction:row-reverse;
從右向左排列元素
flex-direction:column;
從上到下垂直排列元素
flex-direction:column-reverse;
從下到上垂直排列元素
選項說明
flex-wrap:nowrap;
元素不拆行或不拆列（預設值）
flex-wrap:wrap;
容器元素在必要的時候拆行或拆列。
flex-wrap:wrap-reverse;
容器元素在必要的時候拆行或拆列，但是以相反的順序
注意：flex-flow是flex-direction與flex-wrap的組合簡寫模式
flex-flow: row-reverse wrap-reverse;說明justify-content：flex-start;
元素緊靠主軸起點
justify-content：flex-end;
元素緊靠主軸終點
justify-content：center;
元素從彈性容器中心開始
justify-content：space-between;
第乙個元素靠起點，最後乙個元素靠終點，餘下元素平均分配空間
justify-content：space-around;
每個元素兩側的間隔相等。元素之間的間隔比元素與容器的邊距的間隔大一倍
justify-content：space-evenly;
元素間距離平均分配
選項說明
align-items:stretch;
元素被拉伸以適應容器（預設值）
align-items:center;
元素位於容器的中心
align-items:flex-start;
元素位於容器的交叉軸開頭
align-items:flex-end;
元素位於容器的交叉軸結尾
注意；如果設定了width | height | min-height | min-width | max-width | max-height，將影響stretch的結果，因為stretch優先順序你於寬高設定。
選項說明
align-content:stretch;
將空間平均分配給元素
align-content:flex-start;
元素緊靠交叉軸起點
align-content:flex-end;
元素緊靠交叉軸終點
align-content:center;
元素從彈性容器中心開始
align-content:space-between;
第乙個元素靠起點，最後乙個元素靠終點，餘下元素平均分配空間
align-content:space-around;
每個元素兩側的間隔相等。所以，專案之間的間隔比專案與邊框的間隔大一倍
align-content:space-evenly;
元素間距離平均分配
選項說明
align-self:stretch;
將空間平均分配給元素
align-self:flex-start;
元素緊靠交叉軸起點
align-self:flex-end;
元素緊靠交叉軸終點
align-self:center;
元素從彈性容器中心開始
用於將彈性盒子主軸的可用空間，分配給彈性元素。flex-grow:1;可以用小數或整數
如果全部設定flex-shrink:0;都不縮小，單個可以整數或者小數設定縮小比例
可以是長度單位，也可以是百分比。flex-basis的優先順序高於width、height屬性，小於max-height,min-height。
注意：flex是flex-grow、flex-shrink 、flex-basis縮寫組合。flex:1 1 200px;
用於控制彈性元素的位置，預設為order:0數值越小越在前面，可以負數或整數。
學習彈性布局flexbox
學習基礎語法，可以根據demo裡面的 理解每乙個屬性和值。css3 彈性框 flexible box 或 flexbox 是一種當頁面需要適應不同的螢幕大小以及裝置型別時確保元素擁有恰當排布行為的布局方式。包含著彈性專案的父元素。通過設定display屬性的值為flex或inline flex來定義...
flex彈性布局學習
一 介紹 flex flexible box 彈性布局盒模型 是2009年w3c提出的一種可以簡潔 快速彈性布局的屬性。主要思想是給予容器控制內部元素高度和寬度的能力。目前已得到以下瀏覽器支援 二 了解兩個基本概念 容器 需要新增彈性布局的父元素 專案 彈性布局容器中的每乙個子元素，稱為專案 容器預...
彈性布局學習總結
請注意 1.css 列 css columns 在彈性盒子中不起作用 2.float,clearandvertical align在flex專案中不起作用 flex direction 適用於父累容器的元素上 設定或檢索伸縮紙盒物件的子元素在父容器中的位置 值 flex direction row ...