css flex學(xué)習(xí)筆記

一帝牡，什么是flex布局

Flex 是 Flexible Box 的縮寫婴洼，意為"彈性布局"海蔽，用來為盒狀模型提供最大的靈活性钥组。任何一個(gè)容器都可以指定為 Flex 布局输硝。

.box{
  display: -webkit-flex; /* Safari */
  display: flex;
}

行內(nèi)元素也可以使用 Flex 布局。

.box{
  display: -webkit-inline-flex; /* Safari */
  display: inline-flex;
}

$\color{red}{注意程梦，設(shè)為 Flex 布局以后点把，子元素的float、clear和vertical-align屬性將失效屿附。}$

二郎逃，容器屬性

flex-direction：主軸方向
flex-wrap：換行
flex-flow：1,2合并
justify-content：主軸對齊
align-items：交叉軸對齊
align-content：多軸對齊

1，flex-direction 設(shè)定主軸方向挺份，屬性值：row | row-reverse | column | column-reverse

row：主軸為水平方向褒翰，起點(diǎn)在左端（默認(rèn)值）。
row-reverse：主軸為水平方向匀泊，起點(diǎn)在右端袄琳。
column：主軸為垂直方向卖擅，起點(diǎn)在上沿。
column-reverse：主軸為垂直方向，起點(diǎn)在下沿红伦。

2，flex-wrap 設(shè)定是否換行方向棘伴，屬性值：nowrap | wrap | wrap-reverse

nowrap：不換行（默認(rèn)）
wrap：主軸下方換行
wrap-reverse：主軸上方換行

3，flex-flow 1,2屬性的合并忌傻，屬性值：<flex-direction> || <flex-wrap>

例如：.box { flex-flow: row wrap; }

4，justify-content 屬性定義了項(xiàng)目在主軸上的對齊方式搞监，屬性值：flex-start | flex-end | center | space-between | space-around

flex-start（默認(rèn)值）：左對齊
flex-end：右對齊
center：居中
space-between：兩端對齊水孩，項(xiàng)目之間的間隔都相等。
space-around：每個(gè)項(xiàng)目兩側(cè)的間隔相等腺逛。所以荷愕，項(xiàng)目之間的間隔比項(xiàng)目與邊框的間隔大一倍。

5棍矛，align-items 屬性定義項(xiàng)目在交叉軸上如何對齊安疗，屬性值：flex-start | flex-end | center | baseline | stretch

flex-start：交叉軸的起點(diǎn)對齊。
flex-end：交叉軸的終點(diǎn)對齊够委。
center：交叉軸的中點(diǎn)對齊荐类。
baseline: 項(xiàng)目的第一行文字的基線對齊。
stretch（默認(rèn)值）：如果項(xiàng)目未設(shè)置高度或設(shè)為auto茁帽，將占滿整個(gè)容器的高度玉罐。

6， align-content 屬性定義了多根軸線的對齊方式潘拨。如果項(xiàng)目只有一根軸線吊输，該屬性不起作用

flex-start：與交叉軸的起點(diǎn)對齊。
flex-end：與交叉軸的終點(diǎn)對齊铁追。
center：與交叉軸的中點(diǎn)對齊季蚂。
space-between：與交叉軸兩端對齊，軸線之間的間隔平均分布琅束。
space-around：每根軸線兩側(cè)的間隔都相等扭屁。所以，軸線之間的間隔比軸線與邊框的間隔大一倍涩禀。
stretch（默認(rèn)值）：軸線占滿整個(gè)交叉軸料滥。

三，項(xiàng)目的屬性

order：屬性定義項(xiàng)目的排列順序艾船。數(shù)值越小葵腹，排列越靠前，默認(rèn)為0丽声。
flex-grow：屬性定義項(xiàng)目的放大比例礁蔗，默認(rèn)為0，即如果存在剩余空間雁社，也不放大浴井。如果一個(gè)項(xiàng)目的flex-grow屬性為2，其他項(xiàng)目都為1霉撵，則前者占據(jù)的剩余空間將比其他項(xiàng)多一倍磺浙。
flex-shrink：屬性定義了項(xiàng)目的縮小比例洪囤，默認(rèn)為1，即如果空間不足撕氧，該項(xiàng)目將縮小瘤缩。如果一個(gè)項(xiàng)目的flex-shrink屬性為0，其他項(xiàng)目都為1伦泥，則空間不足時(shí)剥啤，前者不縮小。
flex-basis：屬性定義了在分配多余空間之前不脯，項(xiàng)目占據(jù)的主軸空間（main size）府怯。瀏覽器根據(jù)這個(gè)屬性，計(jì)算主軸是否有多余空間防楷。它的默認(rèn)值為auto牺丙，即項(xiàng)目的本來大小。它可以設(shè)為跟width或height屬性一樣的值（比如350px）复局，則項(xiàng)目將占據(jù)固定空間冲簿。
flex：屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認(rèn)值為0 1 auto亿昏。該屬性有兩個(gè)快捷值：auto (1 1 auto) 和 none (0 0 auto)峦剔。
align-self：屬性允許單個(gè)項(xiàng)目有與其他項(xiàng)目不一樣的對齊方式，可覆蓋align-items屬性角钩。默認(rèn)值為auto羊异，表示繼承父元素的align-items屬性，如果沒有父元素彤断，則等同于stretch。屬性值：auto | flex-start | flex-end | center | baseline | stretch

最后編輯于：2019.12.09 13:54:18

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者