flex布局 容器內item屬性

1、order

(1) flex布局內item元素沒有指定order屬性時，預設值都是0。

(2) flex布局內排列子item是根據每個子item的order值大小排列的，order值越小越靠前。

和android裡的weight屬性類似

(1) 所有子item的flex-grow預設值都是0

(2) 所有子item的flex-grow值相等：所有子item平分父容器的寬度

(3) 子item1的寬度設了固定值200px，別的子item設定了flex-grow，則父容器寬度減去200px，剩餘寬度給剩下的子item按flex-grow比例分。

子item的flex-shrink預設值都是1。當剩餘空間不足時，flex-shrink為0的子item不會被縮小，flex-shrink大於0的子item會被縮小。

當flex布局裡的排列方向為水平方向，子item設定了width，也設定了flex-basis，那麼item的寬度以flex-basis為準；當flex布局裡的排列方向垂直方向，子item設定了height，也設定了flex-basis，那麼item的高度以flex-basis為準；

flex屬性為flex-grow、flex-shrink、flex-basis的簡寫，預設值為：0 1 auto，後兩個是可以選的。

簡寫：flex:1 代表 flex:1 1 0%

flex: auto 代表 flex:1 1 auto

flex:none 代表 flex:0 0 auto

align-self允許單個子item與其他子item不一樣的對齊方式，可覆蓋父容器的align-items。預設值為auto。

取值如下：

auto：表示繼承父容器的align-items屬性，如果沒有父元素，等同於stretch。

flex-start：上對齊。

flex-end：下對齊

center：居中

baseline：基線對齊

stretch：元素被拉伸以適應容器

效果：

為box3新增order屬性：

.box3

現在給每個子box設定：

效果：

現在給box1設定寬度400px，其餘box設定flex-grow:2

效果：

3、flex-shrink測試：

效果（所有子item的flex-shrink預設值為1，都被縮小）：

現在給box1設定flex-shrink:0

.box1

4、flex-basis測試：

效果：現在給子item設定flex-basis：

效果：6、align-self測試

效果：現在給第乙個子item設定align-self：

.box1

flex 布局下關於容器內成員 flex屬性的理解

flex布局分為容器的設定和容器內成員的設定，容器的設定是管理成員的排列方式，也就是管理排列的方向和對齊的位置。成員的設定則是關於成員的大小和顯示的位置 order 彈性布局，彈性布局，自然要提現他的彈性，所謂彈性也就是對空間的分配。成員設定中的flex屬性，就是對於額外空間的管理。flex可以設定...

Flex 布局 容器屬性

flex 布局，意為 彈性布局 任何乙個容器都可以指定為 flex 布局，行內元素也可以使用 flex 布局。注意 設為 flex 布局後，子元素的 float clear 和 vertrical align 屬性都將失效。採用 flex 布局的元素，稱為 flex 容器，簡稱容器 它的所有子元素自...

關於flex布局容器屬性

容器屬性 flex direction 決定主軸的方向 row 從下到上 row reverse 從上到下 column 從左到右 column reverse 從右到左 flex wrap 如果一行排列不下如何換行 nowrap 不換行 wrap 換行 wrap reverse 換行，第一行在下面...