CSS中的flex概述

一、Flex 布局概述

Flex 布局（弹性布局）是 CSS3 中一种用于在容器中布局子元素的强大方式。它提供了一种简便的方法来控制元素在容器中的排列方向、对齐方式、分布等。使用display: flex;或display: inline - flex;（inline - flex使元素在一行内显示为弹性容器，类似于inline - block与block在常规布局中的区别）来将一个元素设置为弹性容器。

二、容器的属性

• flex - direction

用于确定主轴的方向，有以下几个取值：

row（默认值）：主轴为水平方向，起点在左端。

row - reverse：主轴为水平方向，起点在右端。

column：主轴为垂直方向，起点在上端。

column - reverse：主轴为垂直方向，起点在下端。

• justify - content

定义了子元素在主轴上的对齐方式：

flex - start（默认值）：子元素向主轴的起点对齐。

flex - end：子元素向主轴的终点对齐。

center：子元素在主轴上居中对齐。

space - between：子元素沿主轴均匀分布，两端的子元素与容器边缘对齐。

space - around：子元素沿主轴均匀分布，每个子元素两侧都有相等的间隔。

space - evenly：子元素沿主轴均匀分布，每个子元素之间以及与容器边缘的间隔都相等。

• align - content

当有多行（或多列，取决于flex - direction）子元素时，该属性定义了这些行（列）在交叉轴上的对齐方式：

flex - start：行（列）向交叉轴的起点对齐。

flex - end：行（列）向交叉轴的终点对齐。

center：行（列）在交叉轴上居中对齐。

space - between：行（列）沿交叉轴均匀分布，两端的行（列）与容器边缘对齐。

space - around：行（列）沿交叉轴均匀分布，每行（列）两侧都有相等的间隔。

space - evenly：行（列）沿交叉轴均匀分布，每行（列）之间以及与容器边缘的间隔都相等。

• align - items

定义了单个子元素在交叉轴上的对齐方式：

flex - start：子元素向交叉轴的起点对齐。

stretch（默认值，当子元素未设置交叉轴方向的尺寸时）：子元素沿交叉轴方向拉伸，填满容器。

flex - end：子元素向交叉轴的终点对齐。

center：子元素在交叉轴上居中对齐。

baseline：子元素根据它们的基线对齐。

三、子元素（项目）的属性

• order

用于指定子元素的排列顺序。默认值为 0，值越小的子元素越排在前面。例如，一个子元素的order: - 1;，它会比order: 0的子元素更靠前排列。

• flex - grow

定义了子元素在剩余空间中的伸展比例。如果容器中有剩余空间，子元素将按照它们的flex - grow值来分配这些空间。例如，有两个子元素，一个flex - grow: 1;，另一个flex - grow: 2;，那么剩余空间将按照 1:2 的比例分配给这两个子元素。

• flex - shrink

与flex - grow相反，它定义了子元素在空间不足时的收缩比例。例如，当容器空间小于子元素的总宽度（或高度）时，子元素将按照flex - shrink值来收缩。

• flex - basis

用于指定子元素在分配空间之前的初始大小。可以是长度值（如200px）或者是一个百分比。它类似于元素的width或height属性，但在 Flex 布局中有特殊的意义。

• align - self

允许单个子元素覆盖容器的align - items属性，用于在交叉轴上自定义该子元素的对齐方式，其取值与align - items相同。