flex布局属性详解之容器属性篇

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。

关于flex布局的另一个重要概念是flex轴（flex axis），即容器（父元素）所定义的主轴。主轴的默认方向是水平的，可以使用flex-direction属性来改变主轴方向。

容器属性是Flexbox布局系统中很重要的一部分，它们可以用来控制容器的尺寸、对齐方式和对齐内容的方式。本文将详细介绍Flexbox容器属性，帮助你更好地理解和使用Flexbox布局。

1. flex-direction 属性

flex-direction属性用于设置容器的默认排列方向，它可以取四个值：row、column、row-reverse和column-reverse。

• row：默认值。容器的排列方向为水平排列，即主轴为水平方向。
• column：容器的排列方向为垂直排列，即主轴为垂直方向。
• row-reverse：与row相反，容器的排列方向为水平排列，但子元素排列顺序是反向的。
• column-reverse：与column相反，容器的排列方向为垂直排列，但子元素排列顺序是反向的。

2. flex-wrap 属性

flex-wrap属性用于设置容器是否换行，它可以取三个值：nowrap、wrap和wrap-reverse。

• nowrap：默认值。容器不换行，子元素在主轴上连续排列。
• wrap：容器换行，子元素在主轴上排列到一定宽度后就会换行。
• wrap-reverse：与wrap相反，容器换行，但子元素排列顺序是反向的。

3. flex-flow 属性

flex-flow属性是flex-direction和flex-wrap的简写，它允许你同时设置容器的排列方向和换行方式。

例如：

.container {
  flex-flow: row wrap;
}

这将使容器在水平方向排列，并在子元素到达容器宽度后换行。

4. justify-content 属性

justify-content属性用于设置子元素在容器中的水平对齐方式，它可以取七个值：flex-start、flex-end、center、space-around、space-between、space-evenly和initial。

• flex-start：默认值。子元素在容器的左端（如果是水平排列）或顶部（如果是垂直排列）。
• flex-end：子元素在容器的右端（如果是水平排列）或底部（如果是垂直排列）。
• center：子元素在容器的中间。
• space-around：子元素在容器中均匀分布，两端都有空白。
• space-between：子元素在容器中均匀分布，两端没有空白。
• space-evenly：子元素在容器中均匀分布，并且两端都有相同的空白。
• initial：使用浏览器的默认值。

5. align-items 属性

align-items属性用于设置子元素在容器中的垂直对齐方式，它可以取七个值：flex-start、flex-end、center、baseline、stretch、space-around、space-between和initial。

• flex-start：默认值。子元素在容器的顶部（如果是水平排列）或左端（如果是垂直排列）。
• flex-end：子元素在容器的底部（如果是水平排列）或右端（如果是垂直排列）。
• center：子元素在容器的中间。
• baseline：子元素的基线在容器的基线上。
• stretch：子元素拉伸以填充容器的高度。
• space-around：子元素在容器中均匀分布，上下都有空白。
• space-between：子元素在容器中均匀分布，上下没有空白。
• initial：使用浏览器的默认值。

6. align-content 属性

align-content属性用于设置容器中子元素在主轴上的对齐方式，它可以取七个值：flex-start、flex-end、center、space-around、space-between、space-evenly和initial。

• flex-start：默认值。子元素在容器的顶部（如果是水平排列）或左端（如果是垂直排列）。
• flex-end：子元素在容器的底部（如果是水平排列）或右端（如果是垂直排列）。
• center：子元素在容器的中间。
• space-around：子元素在容器中均匀分布，上下都有空白。
• space-between：子元素在容器中均匀分布，上下没有空白。
• space-evenly：子元素在容器中均匀分布，并且上下都有相同的空白。
• initial：使用浏览器的默认值。