Flex 布局语法

前端

2023-09-15 14:18:41

Flex 布局：语法详解

引言

布局一直是 CSS 的核心知识，而 Flex 布局则是近年来流行的一种布局方式。它提供了强大的控制权和灵活性，让开发者可以轻松创建复杂的布局。本文将深入探讨 Flex 布局的语法，帮助读者快速掌握其使用方式。

Flex 布局使用一个特殊的容器元素，称为 "Flex 容器"，以及它内部的子元素，称为 "Flex 项目"。Flex 容器通过 display: flex; 属性启用。

Flex 方向

Flex 容器可以通过 flex-direction 属性设置主轴方向，即项目的排列方式。常见的选项有：

row：水平排列项目
row-reverse：水平排列项目，但反向
column：垂直排列项目
column-reverse：垂直排列项目，但反向

Flex 对齐

Flex 项目可以在主轴和交叉轴（垂直于主轴）上对齐。

主轴对齐

justify-content 属性控制项目在主轴上的对齐方式：
- flex-start：对齐到主轴的起始端
- flex-end：对齐到主轴的结束端
- center：居中对齐
- space-between：在项目之间平均分配剩余空间
- space-around：在项目周围平均分配剩余空间

交叉轴对齐

align-items 属性控制项目在交叉轴上的对齐方式：
- flex-start：对齐到交叉轴的起始端
- flex-end：对齐到交叉轴的结束端
- center：居中对齐
- stretch：拉伸项目以填满交叉轴的可用空间

Flex 项目大小

Flex 项目的大小可以通过 flex-basis、flex-grow 和 flex-shrink 属性控制。

flex-basis：指定项目的初始大小（默认为项目的实际大小）
flex-grow：控制项目在分配剩余空间时的增长倍率（默认为 0）
flex-shrink：控制项目在需要缩小时的收缩倍率（默认为 1）

Flex 项目顺序

Flex 项目可以通过 order 属性设置在 Flex 容器内的顺序（默认为 0）。较高的值将项目放置在较前的顺序。

实例

.flex-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.flex-item {
  flex: 1 1 auto;
  min-width: 100px;
  background-color: #eee;
  padding: 10px;
}