flexbox 研究

研究flexbox需要清楚一個(gè)概念，主軸和交叉軸的概念，而這兩個(gè)軸是可以交換的

flexbox的樣式屬性主要作用于兩個(gè)部分，一個(gè)是伸縮容器，一個(gè)是伸縮子項(xiàng)目

容器樣式

display: flex | inline-flex

設(shè)置這個(gè)屬性就代表當(dāng)前這個(gè)元素變成了伸縮容器，一個(gè)是塊狀容器，一個(gè)是行內(nèi)塊狀容器

flex-direction: row | row-reverse | column | column-reverse

flex-direction代表主軸布局方向

row: 左－> 右 ，row-reverse: 右 -> 左 ，column：上 －> 下 ，column-reverse：下 －> 上

flex-wrap: nowrap | wrap | wrap-reverse

flex-wrap:代表的是超出布局的元素如何顯示，分別是不換行，換行，換行之后從右向左排列

flex-flow: <‘flex-direction’> || <‘flex-wrap’>

這個(gè)是“flex-direction”和“flex-wrap”屬性的縮寫版本。同時(shí)定義了伸縮容器的主軸和側(cè)軸。其默認(rèn)值為“row nowrap”。

justify-content: flex-start | flex-end | center | space-between | space-around

主軸方向的對其方式

flex-start(默認(rèn)值)：伸縮項(xiàng)目向一行的起始位置靠齊。

flex-end：伸縮項(xiàng)目向一行的結(jié)束位置靠齊。

center：伸縮項(xiàng)目向一行的中間位置靠齊。

space-between：伸縮項(xiàng)目會(huì)平均地分布在行里。第一個(gè)伸縮項(xiàng)目一行中的最開始位置，最后一個(gè)伸縮項(xiàng)目在一行中最終點(diǎn)位置。

space-around：伸縮項(xiàng)目會(huì)平均地分布在行里，兩端保留一半的空間。

align-items: flex-start | flex-end | center | baseline | stretch

定義伸縮項(xiàng)目交叉軸在當(dāng)前行的對齊方式

flex-start：伸縮項(xiàng)目在側(cè)軸起點(diǎn)邊的外邊距緊靠住該行在側(cè)軸起始的邊。

flex-end：伸縮項(xiàng)目在側(cè)軸終點(diǎn)邊的外邊距靠住該行在側(cè)軸終點(diǎn)的邊 。

center：伸縮項(xiàng)目的外邊距盒在該行的側(cè)軸上居中放置。

baseline：伸縮項(xiàng)目根據(jù)他們的基線對齊。

stretch（默認(rèn)值）：伸縮項(xiàng)目拉伸填充整個(gè)伸縮容器。此值會(huì)使項(xiàng)目的外邊距盒的尺寸在遵照「min/max-width/height」屬性的限制下盡可能接近所在行的尺寸。

align-content: flex-start | flex-end | center | space-between | space-around | stretch

定義伸縮項(xiàng)目在伸縮容器內(nèi)部的對齊方式

同上

伸縮項(xiàng)目樣式

order: <integer>

子元素順序

flex-grow: <number> (默認(rèn)值為： 0)

根據(jù)需要用來定義伸縮項(xiàng)目的擴(kuò)展能力。它接受一個(gè)不帶單位的值做為一個(gè)比例。主要用來決定伸縮容器剩余空間按比例應(yīng)擴(kuò)展多少空間。

flex-shrink: <number> (默認(rèn)值為： 1)

根據(jù)需要用來定義伸縮項(xiàng)目收縮的能力。

flex-basis: <length> | auto (默認(rèn)值為： auto)

這個(gè)用來設(shè)置伸縮基準(zhǔn)值，剩余的空間按比率進(jìn)行伸縮。

flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

這是“flex-grow”、“flex-shrink”和“flex-basis”三個(gè)屬性的縮寫

align-self: auto | flex-start | flex-end | center | baseline | stretch

總結(jié)

以上是生活随笔為你收集整理的flexbox 伸缩布局的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。