深入探索弹性盒子模型，让布局更轻松

前端

2023-07-06 18:13:56

Flexbox：布局设计的新篇章

Flexbox的基本原理

Flexbox（弹性盒子布局模型）是CSS中一种强大的布局模式，它让开发者能够轻松实现各种复杂的布局。Flexbox中的元素被视为容器，容器中的子元素称为项目。容器的属性决定了项目如何在容器中排列和调整。

理解容器属性：

flex-direction： 定义项目排列方向（横向或纵向）
flex-wrap： 定义项目是否允许换行
justify-content： 定义项目在容器中的水平对齐方式
align-items： 定义项目在容器中的垂直对齐方式

了解项目属性：

order： 定义项目的排列顺序
flex-grow： 定义项目在容器中增长的比率
flex-shrink： 定义项目在容器中收缩的比率
align-self： 定义项目在容器中的对齐方式，可以覆盖容器的align-items属性

Flexbox布局的实战应用

水平排列项目：

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.item {
  width: 100px;
  height: 100px;
  background-color: red;
}

垂直排列项目：

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.item {
  width: 100px;
  height: 100px;
  background-color: blue;
}

流式布局：

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
}

.item {
  width: 100px;
  height: 100px;
  background-color: green;
}

栅格布局：

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
}

.item {
  width: 200px;
  height: 200px;
  background-color: yellow;
}