目錄
三、專案的屬性
一、指定為flex布局
任何乙個容器都可以指定為flex布局，如果值為flex則容器為塊標籤
容器預設存在兩根軸，
水平主軸是main axis,結束位置叫做main end;
垂直主軸是cross axis,結束位置是cross end
1.1
xx
}
1.flex-direction
direction:方向;趨勢;
flex-direction決定主軸的方向
flex-direction: row | row-reverse | column | column-reverse;
row:水平方向，起點在左端
row-reverse:水平方向，起點在右端
column:垂直方向,起點在左端
column-reverse:垂直方向，起點在右端
預設下，所有都排在一條軸線上，flex-wrap定義當一條軸線排不下時，如何換行
flex-wrap: nowrap | wrap | wrap-reverse;
nowrap:不換行
wrap:換行，第一行在上方
wrap-reverse:換行，第一行在下方
flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，預設值為row nowrap。
flex-flow: ;
//將上面兩個標籤組合起來簡寫
justify-content屬性定義了專案在主軸上的對齊方式
justify-content: flex-start | flex-end | felx-center | space-between | space-around;
}flex-start:左對齊
flex-end:右對齊
center: 居中對齊
space-between:兩端對齊,專案之間間隔相等
space-around:專案兩側間隔相等
algn-items定義專案在交叉軸上如何對齊
align-items: flex-start | flex-end | center | baseline | stretch;
flex-start交叉軸的起點對齊
flex-end:交叉軸的終點對齊
center:交叉軸的中點對齊
baseline:與第一行文字的基線對齊
stretch:如果未設定高度或設為auto,將佔滿整個容器
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
flex-start：與交叉軸的起點對齊。
flex-end：與交叉軸的終點對齊。
center：與交叉軸的中點對齊。
space-between：與交叉軸兩端對齊，軸線之間的間隔平均分布。
space-around：每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。
stretch（預設值）：軸線佔滿整個交叉軸。
1.order屬性
order屬性定義專案的排列順序。數值越小，排列越靠前，預設為0。
order:x;
order:-1;
數值越小,排列越前
flex-grow屬性定義專案的佔比例，預設為0
flex-grow:x;flex-shrink屬性定義了專案的縮小比例,預設為1,如果空間不足，該專案將縮小
4.flex-basis屬性
flex-basis屬性定義了在分配多餘空間之前，專案佔據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的預設值為auto，即專案的本來大小。
flex-basis:|auto;
可以設為px的值,將佔據固定空間
flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，預設值為0 1 auto。後兩個屬性可選。
flex:none;|align-self屬性允許單個專案有與其他專案不一樣的對齊方式，可覆蓋align-items屬性。預設值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同於stretch。
align-self: auto | flex-start | flex-end | center | baseline | stretch;flex布局筆記
flex基本術語 display 定義乙個父容器，設定 display flex inline flex flex direction 設定主軸方向 預設橫軸 設定 row row reverse column column reverse flex wrap 設定容器子元素是否換行 預設不換行 設...
flex布局筆記
父容器配置display flex以後,就有一些flex布局專用的屬性可以設定了主要是以下幾個 1 flex direction 這個屬性決定了父容器中的子元素的排列方向,一共有四個屬性 column 從上到下 row 從左到右 column reverse 從下到上 row reverse 從右到...
Flex布局筆記
採用 flex 布局的元素，稱為 flex 容器 flex container 簡稱 容器 它的所有子元素自動成為容器成員，稱為flex 專案 flex item 簡稱 專案 總結flex布局原理 就是通過給父盒子新增flex屬性，來控制子盒子的位置和排列方式 flex direction屬性值 屬...