CSS-Flex布局

Flex布局知识点整理

Flex布局是CSS中一种弹性盒子布局模型，用于更灵活地控制容器内项目的排列和对齐。以下是CSS Flex布局的主要知识点和示例：

1. 弹性容器属性

1.1 display

描述：定义弹性容器的类型，将容器设置为弹性容器。

• 值：
  • flex（水平排列）,
  • inline-flex（垂直排列）

.container {
  display: flex;
  /* 或者 */
  display: inline-flex;
}

1.2 flex-direction

描述：定义主轴的方向，决定项目在容器中的排列方式。

• 值：
  • row（水平方向，从左往右排列）,
  • row-reverse（水平方向，从右往左排列）,
  • column（垂直方向，从上往下排列）,
  • column-reverse（垂直方向，从下往上排列）

.container {
  flex-direction: row;
  /* 或者 */
  flex-direction: column;
}

1.3 flex-wrap

描述：定义项目是否换行。

• 值：
  • nowrap（不换行，项目都在一行上排列）,
  • wrap（换行，按需分配多行）,
  • wrap-reverse（换行，倒序分配多行）

.container {
 flex-wrap: nowrap;
 /* 或者 */
 flex-wrap: wrap;
}

1.4 flex-flow

描述：是flex-direction和flex-wrap的简写形式。

• 值：
  • <flex-direction> <flex-wrap>（分别设置主轴方向和是否换行）

.container {
  flex-flow: row wrap;
}

1.5 justify-content

描述：定义项目在主轴上的对齐方式。

• 值：
  • flex-start（左对齐）,
  • flex-end（右对齐）,
  • center（居中对齐）,
  • space-between（两端对齐，项目之间间隔相等）,
  • space-around（每个项目两侧间隔相等）

.container {
  justify-content: center;
}

1.6 align-items

描述：定义项目在交叉轴上的对齐方式。

• 值：
  • flex-start（顶部对齐）,
  • flex-end（底部对齐）,
  • center（垂直居中对齐）,
  • baseline（项目的基线对齐）,
  • stretch（拉伸填满容器高度）

.container {
  align-items: center;
}

1.7 align-content

描述：定义多行项目在交叉轴上的对齐方式。

• 值：
  • flex-start（顶部对齐）,
  • flex-end（底部对齐）,
  • center（垂直居中对齐）,
  • space-between（两端对齐，项目之间间隔相等）,
  • space-around（每个项目两侧间隔相等）,

  • stretch（拉伸填满容器高度）
    

.container {
  align-content: stretch;
}

2. 弹性项目属性

2.1 flex

描述：定义项目的伸缩比例，用于分配剩余空间。

• 值：
  • <flex-grow> <flex-shrink> <flex-basis>（分别设置放大比例、缩小比例和初始大小）

.item {
  flex: 1;
}

2.2 flex-grow

描述：定义项目的放大比例。

• 值：
  • 一个非负数，决定项目是否放大，与其他项目的放大比例有关。

.item {
  flex-grow: 1;
}

2.3 flex-shrink

描述：定义项目的缩小比例。

• 值：
  • 一个非负数，决定项目是否缩小，与其他项目的缩小比例有关。

.item {
  flex-shrink: 1;
}

2.4 flex-basis

描述：定义项目在主轴上的初始大小。

• 值：
  • 一个长度值或auto，决定项目在主轴上的初始大小。

.item {
  flex-basis: 100px;
}

2.5 align-self

描述：定义单个项目在交叉轴上的对齐方式，覆盖容器的align-items属性。

• 值：
  • auto（继承父容器的align-items属性）,
  • flex-start（顶部对齐）,
  • flex-end（底部对齐）,
  • center（垂直居中对齐）,
  • baseline（项目的基线对齐）,
  • stretch（拉伸填满容器高度）

.item {
  align-self: center;
}

以上是CSS Flex布局的主要知识点和示例，灵活运用这些属性，可以实现多种排列和对齐方式，适应不同的页面布局需求

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TVXkV6P1-1691816753063)(/static/img/f4bff2e5a77fb1b5e401914529b4f892.FLex.png.webp)]