弹性布局（flex)

一、弹性布局简介

弹性布局，也称为Flex布局（Flexbox），是一种用于设计Web页面布局的CSS技术。它的目标是在不同屏幕尺寸和设备上创建灵活的、自适应的布局，使开发者能够更轻松地控制元素在容器内的排列和分布。Flex布局的核心思想是通过指定容器（flex container）和其内部的子元素（flex it

基本概念：

①  容器： 需要添加弹性布局的父元素；

②  项目： 弹性布局容器中的每一个子元素，称为项目；

基本方向：

①  主轴： 在弹性布局中，我们会通过属性规定水平/垂直方向为主轴；

②  交叉轴： 与主轴垂直的另一方向，称为交叉轴。

二、弹性布局的设置

 给容器添加 display: flex ; 即可开始采用弹性布局。

• 将元素定义为弹性容器，使其内部的子元素成为弹性项目，从而使用弹性布局。
• 弹性容器的直接子元素会受到弹性布局的影响，成为弹性项目。
• 默认情况下，弹性容器的子元素在主轴上水平排列。

将弹性布局分为父类（容器）和子类（项目）两大类有助于理解和应用弹性布局的概念和属性。弹性布局的核心思想是通过在容器和项目上设置属性来实现灵活的元素排列和分布。

 父容器的属性

1.flex-direction：决定子类在主轴上的排列方向

• row（默认）：从左往右
• row-reverse：从右往左
• column：从上往下
• column-reverse：从下往上

 

 

 2.flex-wrap：子元素的换行显示

• nowrap（默认）：子元素在一行内显示，不换行（默认值）。
• wrap：子元素在多行显示，根据空间进行换行。 

• wrap-reverse： 子元素在多行显示，但换行时从下往上排列。

 

     

 3. justify-content：子类在主轴上的对齐方式 

• justify-content: flex-start;子元素在主轴上起点对齐（默认值）。

• justify-content: flex-end;子元素在主轴上终点对齐。

• justify-content: center;子元素在主轴上居中对齐。

• justify-content: space-between;子元素在主轴上平均分布，首尾元素靠容器两端。

• justify-content: space-around;子元素在主轴上平均分布，每个元素两侧有相等的空间。

• justify-content: space-evenly;子元素在主轴上平均分布，每个元素前后都有相等的空间。

 

 4.flex-flow 是flex-direction和flex-wrap的缩写形式，默认值为：flex-flow: row wrap;

 5. align-items：子类在交叉轴上的对齐方式

• align-items: flex-start;子元素在交叉轴上顶部对齐（默认值）。

• align-items: flex-end;子元素在交叉轴上底部对齐。

• align-items: center;子元素在交叉轴上居中对齐。

• align-items: baseline;子元素在交叉轴上基线对齐。

• align-items: stretch;子元素在交叉轴上拉伸，占满容器的交叉轴高度。

 

 6.align-content：子类在交叉轴上的分布 

• align-content: flex-start;多行子元素在交叉轴上起点对齐（默认值）。

• align-content: flex-end;多行子元素在交叉轴上终点对齐。

• align-content: center;多行子元素在交叉轴上居中对齐。

• align-content: space-between;多行子元素在交叉轴上平均分布，首尾元素靠容器两端。

• align-content: space-around;多行子元素在交叉轴上平均分布，每个元素两侧有相等的空间。

• align-content: space-evenly;多行子元素在交叉轴上平均分布，每个元素前后都有相等的空间。

 子元素的属性方式

order: <integer>;

• 定义子元素的显示顺序。
• 默认情况下，子元素的 order 值为 0，较小的值会使元素在弹性容器内更靠前显示。
• 可以用负数和正数来控制显示顺序。

flex-grow: <number>;

• 指定子元素在剩余空间中的放大比例。
• 用于定义子元素如何分配弹性容器中的剩余空间。
• 默认情况下，所有子元素的 flex-grow 值为 0，表示不会放大。
• 数值越大，表示在分配剩余空间时被放大的程度越大。

 lex-shrink: <number>;

• 定义子元素在空间不足时的缩小比例。
• 用于定义子元素在弹性容器中的空间不足时如何缩小。
• 默认情况下，所有子元素的 flex-shrink 值为 1，表示会均匀地缩小以适应容器。
• 数值越大，表示在空间不足时被缩小的程度越大。

 flex-basis: <length>|auto;

• 定义子元素的初始大小。
• 可以使用长度单位（如像素）或 auto 关键字来定义。
• 默认情况下，子元素的初始大小由其内容决定。
• 设置为 auto 时，子元素的大小会根据内容自动调整。

 flex: <flex-grow> <flex-shrink> <flex-basis>;

• 是 flex-grow、flex-shrink 和 flex-basis 属性的缩写形式。
• 示例：flex: 1 0 auto; 表示子元素会放大，但不会缩小，初始大小由内容决定。 

 align-self：

• auto:子元素继承父元素的 align-items 属性值（默认值）。

• flex-start:子元素在交叉轴上顶部对齐。

• flex-end:子元素在交叉轴上底部对齐。

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

• baseline:子元素在交叉轴上基线对齐。

• stretch:子元素在交叉轴上拉伸，占满容器的交叉轴高度。