理解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