flexbox 研究

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

flexbox的樣式屬性主要作用于兩個部分，一個是伸縮容器，一個是伸縮子項目

容器樣式

display: flex | inline-flex

設置這個屬性就代表當前這個元素變成了伸縮容器，一個是塊狀容器，一個是行內塊狀容器

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’>

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

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

主軸方向的對其方式

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

flex-end：伸縮項目向一行的結束位置靠齊。

center：伸縮項目向一行的中間位置靠齊。

space-between：伸縮項目會平均地分布在行里。第一個伸縮項目一行中的最開始位置，最后一個伸縮項目在一行中最終點位置。

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

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

定義伸縮項目交叉軸在當前行的對齊方式

flex-start：伸縮項目在側軸起點邊的外邊距緊靠住該行在側軸起始的邊。

flex-end：伸縮項目在側軸終點邊的外邊距靠住該行在側軸終點的邊 。

center：伸縮項目的外邊距盒在該行的側軸上居中放置。

baseline：伸縮項目根據他們的基線對齊。

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

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

定義伸縮項目在伸縮容器內部的對齊方式

同上

伸縮項目樣式

order: <integer>

子元素順序

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

根據需要用來定義伸縮項目的擴展能力。它接受一個不帶單位的值做為一個比例。主要用來決定伸縮容器剩余空間按比例應擴展多少空間。

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

根據需要用來定義伸縮項目收縮的能力。

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

這個用來設置伸縮基準值，剩余的空間按比率進行伸縮。

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

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

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。