CSS Flexbox（弹性盒子）：介绍与使用

CSS Flexbox 是一个用于设计复杂布局结构的强大工具。以下是一些常用的 Flexbox 属性及其用法。

display: flex

介绍

设置一个元素为弹性容器。

使用示例

.container {
  display: flex;
}

说明

这会使 .container 的所有直接子元素成为弹性项目。

flex-direction

介绍

定义主轴的方向。

使用示例

.container {
  flex-direction: row;
}

说明

这会使 .container 的子元素从左到右排列。

justify-content

介绍

定义如何沿主轴对齐子元素。

使用示例

.container {
  justify-content: center;
}

说明

这会使 .container 的子元素在主轴上居中对齐。

align-items

介绍

定义如何沿交叉轴对齐子元素。

使用示例

.container {
  align-items: center;
}

说明

这会使 .container 的子元素在交叉轴上居中对齐。

flex-wrap

介绍

定义弹性容器是单行还是多行，并确定换行方式。

使用示例

.container {
  flex-wrap: wrap;
}

说明

这允许 .container 的子元素在需要时换行。

flex

介绍

这是一个用于设置 flex-grow, flex-shrink 和 flex-basis 的简写属性。

使用示例

.item {
  flex: 1;
}

说明

这会使 .item 元素占用所有可用空间。

align-self

介绍

允许单个弹性项目有不同的对齐方式。

使用示例

.item {
  align-self: flex-end;
}

说明

这会使 .item 元素在交叉轴上对齐到底部。

常用推荐

1. display: flex: 几乎所有的 Flexbox 布局都从这里开始。
2. flex-direction 和 justify-content: 这两个属性是进行主轴对齐的关键。
3. align-items 和 align-self: 用于交叉轴对齐，特别有用当你需要垂直居中元素时。

希望这篇文章能帮助你更好地理解和使用 CSS Flexbox！