什么是Flexbox

Flexbox是CSS3中引入的一种新的布局模式，它提供了一种更加有效的方式来对容器中的子项进行排列、对齐和分配空间。

基本概念

容器和项目

使用Flexbox布局的元素称为Flex容器（flex container），它的所有子元素自动成为容器成员，称为Flex项目（flex item）。

主轴和交叉轴

  • 主轴（main axis）：Flex项目沿着主轴排列
  • 交叉轴（cross axis）：垂直于主轴的轴

常用属性

容器属性

.container {
  display: flex;
  flex-direction: row; /* row | column */
  justify-content: center; /* 主轴对齐 */
  align-items: center; /* 交叉轴对齐 */
  flex-wrap: wrap; /* 换行 */
}

项目属性

.item {
  flex-grow: 1; /* 放大比例 */
  flex-shrink: 1; /* 缩小比例 */
  flex-basis: auto; /* 初始大小 */
  align-self: flex-start; /* 单独对齐 */
}

实例演示

水平垂直居中

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

等分布局

.container {
  display: flex;
}

.item {
  flex: 1;
}

总结

Flexbox是现代CSS布局的基础，掌握它对于前端开发非常重要。