理解Flexbox的屬性

 

首先要開始使用Flexbox，必須先讓父元素變成一個Flex容器。在父元素中顯式的設置display:flex或者display:inline-flex。

瞭解下面兩個知識點對之後的學習很是重要

1、Flex容器（Flex Container）：父元素顯式設置了display:flex

2、Flex項目（Flex Items）：Flex容器內的子元素

Flex容器的屬性有哪些？

flex-direction: row || column || row-reverse || column-reverse；row指的是從左到右按行排列，一次類推可知道其餘的排列方式。

flex-wrap屬性有三個屬性值：ul { flex-wrap: wrap || nowrap || wrap-reverse; }

wrap-reverse：換的行到本來那一行的上面了，相反的方向換行。

flex-flow是flex-direction和flex-wrap兩個屬性的速記屬性。

 

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

定義了Flex項目在Main-Axis上的對齊方式。

space-between讓除了第一個和最一個Flex項目的二者間間距相同（兩端對齊）

其中space-around讓每一個Flex項目具備相同的空間。第一個Flex項目和最後一個Flex項目距Main-Axis開始邊緣和結束邊緣的的間距是其餘相鄰Flex項目間距的一半。

 

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

Stretch，align-items的默認值是stretch。讓全部的Flex項目高度和Flex容器高度同樣。

flex-start：正如你所但願的flex-start讓全部Flex項目靠Cross-Axis開始邊緣（頂部對齊）。

center讓Flex項目在Cross-Axis中間（垂直居中對齊）。

Baseline：讓全部Flex項目在Cross-Axis上沿着他們本身的基線對齊。

著做權歸做者全部。

商業轉載請聯繫做者得到受權,非商業轉載請註明出處。

原文: http://www.w3cplus.com/css3/understanding-flexbox-everything-you-need-to-know.html © w3cplus.com

著做權歸做者全部。

商業轉載請聯繫做者得到受權,非商業轉載請註明出處。

原文: http://www.w3cplus.com/css3/understanding-flexbox-everything-you-need-to-know.html © w3cplus.com