CSS中盒子display属性的flex布局及其属性

CSS中盒子display属性的flex布局

在学习css的display布局属性时，相关教程讲的过多的一般是inline和block，而在应用中，flex布局也十分常见，但在基础教程中一般不予提及。
flex布局可以为盒子模型提供具有灵活性的布局方式，目前已被主流浏览器所支持，任何一个盒子容器都可以指定为flex布局（此时被称 flex容器 ）。
容器默认存在两根主轴：水平方向主轴( main axis )和垂直方向交叉轴( cross axis )，也可叫做纵轴。默认flex容器内的子元素（将这些子元素称为 flex item ）均按主轴排列。

flex容器的属性

flex容器的属性共6种：

flex-direction
flex-wrap
flex-flow
justify-content
align-item
align-content

下面依次对这六种属性进行介绍。

属性一. flex-direction

决定主轴的方向（即flex item的排列方向）：

row（默认）：主轴水平方向，起点在左端
row-reverse：主轴水平方向，起点在右端
column：主轴垂直方向，起点在上边沿
column-reserve：主轴垂直方向，起点在下边沿

属性二. flex-wrap

决定flex item的换行方式：

nowrap（默认）：不换行
wrap：换行
wrap-reverse：换行，第一行在下方

如果设置为不换行，如果各子元素宽度超过页面宽度，即使各子元素设置了固定宽高，也会横向按比例压缩在一起。

属性三. flex-flow

该属性是flex-direction和flex-wrap的简写，默认值为row nowrap。

属性四. justify-content*

决定flex item在主轴上的对齐方式，尤其是在设置CSS样式时候使用频率较高，我也是css初级练习时用到了这个属性来专门来了解了一下flex的使用。

flex-start（默认值）：左对齐
flex-end：右对齐
center：居中
space-between：两端对齐，各flex item间隔相等
space-around：每个flex item两侧的间隔相等，即项目之间的间隔比项目与边框的间隔大一倍

属性五. align-items*

决定交叉轴上的对齐方式，和属性四相对应，是两个不同方向的对齐方式。

flex-start（默认值）：起点对齐
flex-end：终点对齐
center：中间对齐
stretch：如果项目未设置高度或设为auto，将占满整个容器的高度
baseline：每个flex item第一行文字的基线对齐

为了便于理解，从w3school看到了很好的区分方法，如下图所示，用户可以点击不同的属性查看布局方式，真的很方便，点此进入操作链接。

属性六. align-content

该属性定义多根轴线的对齐方式，与属性五不同的是，它只用来操作“多根”。

flex-start（默认值）：与交叉轴的起点对齐
flex-end：与交叉轴的终点对齐
center：与交叉轴的中点对齐
space-between：与交叉轴的两端对齐，轴线之间的间隔平均分布
space-around：每根轴线两侧的间隔相等，即轴线之间的间隔比轴线与边框的间隔大一倍
stretch：轴线占满整个交叉轴

为了便于理解，从w3school看到了很好的区分方法，如下图所示，用户可以点击不同的属性查看布局方式，真的很方便，点此进入操作链接。

参考文档

display:flex布局方式-Brimen_do
浅谈CSS3中display属性的Flex布局