用Flexbox铺路，通向灵动布局之路(上)

2024-02-14 12:23:07

网页布局一直是前端开发中至关重要的一环。从早期的表格布局到后来的浮动布局，开发者们一直在寻求更灵活、更易于维护的布局方案。随着互联网的快速发展，网页需要适配各种不同尺寸的屏幕，传统的布局方式显得力不从心。Flexbox，作为一种全新的布局模式，凭借其强大的灵活性和简洁的语法，迅速成为前端开发的宠儿。

Flexbox，全称为Flexible Box Layout，意为弹性盒子布局。它将网页布局视为一个个盒子，通过设置盒子的排列方式、尺寸和间距，轻松实现各种复杂的布局效果。Flexbox的核心思想是将容器内的子元素视为一个整体，通过控制容器的属性，来调整子元素的排列方式和行为。

Flexbox的核心概念

Flexbox布局模型主要包含两个核心概念：容器（Container）和项目（Item）。

容器（Container） ：指应用了Flexbox布局的父元素。容器通过设置各种属性来控制其内部项目的排列方式。
项目（Item） ：指容器内的子元素。项目的排列方式受容器属性的影响。

容器属性详解

Flexbox容器拥有丰富的属性，可以精细地控制项目的排列方式。以下是一些常用的容器属性：

display ：将元素设置为Flexbox容器。常用的值为flex和inline-flex。flex会使容器成为块级元素，而inline-flex会使容器成为行内块级元素。
```
.container {
  display: flex; 
}
```
flex-direction ：控制项目排列的主轴方向。可选值包括：
- row：项目沿着水平方向，从左到右排列（默认值）。
- row-reverse：项目沿着水平方向，从右到左排列。
- column：项目沿着垂直方向，从上到下排列。
- column-reverse：项目沿着垂直方向，从下到上排列。
```
.container {
  flex-direction: column; 
}
```
flex-wrap ：控制项目是否换行。可选值包括：
- nowrap：项目不换行，可能会溢出容器（默认值）。
- wrap：项目在必要时换行。
- wrap-reverse：项目在必要时反向换行。
```
.container {
  flex-wrap: wrap; 
}
```
justify-content ：控制项目在主轴上的对齐方式。可选值包括：
- flex-start：项目左对齐（或上对齐，取决于主轴方向）。
- flex-end：项目右对齐（或下对齐）。
- center：项目居中对齐。
- space-between：项目两端对齐，项目之间的间隔相等。
- space-around：每个项目两侧的间隔相等。
```
.container {
  justify-content: space-between; 
}
```
align-items ：控制项目在交叉轴上的对齐方式。可选值包括：
- flex-start：项目顶部对齐（或左对齐，取决于交叉轴方向）。
- flex-end：项目底部对齐（或右对齐）。
- center：项目居中对齐。
- stretch：项目拉伸填充容器（默认值）。
- baseline：项目基线对齐。
```
.container {
  align-items: center; 
}
```
align-content ：控制多行项目在交叉轴上的对齐方式。仅当项目换行时生效。可选值与align-items相同。
```
.container {
  align-content: space-around; 
}
```

项目属性详解

Flexbox项目也有一些属性可以控制自身的排列方式和行为。以下是一些常用的项目属性：

order ：控制项目的排列顺序。数值越小，排列越靠前。默认值为0。
```
.item-2 {
  order: -1; 
}
```
flex-grow ：控制项目在主轴方向上的放大比例。数值越大，放大比例越大。默认值为0。
```
.item-1 {
  flex-grow: 2; 
}
```
flex-shrink ：控制项目在主轴方向上的缩小比例。数值越大，缩小比例越大。默认值为1。
```
.item-2 {
  flex-shrink: 0; 
}
```
flex-basis ：控制项目在主轴方向上的初始尺寸。可以是具体的长度值，也可以是auto（根据内容自动调整）。默认值为auto。
```
.item-3 {
  flex-basis: 200px; 
}
```
align-self ：控制单个项目在交叉轴上的对齐方式。可选值与align-items相同。可以覆盖容器的align-items属性。
```
.item-4 {
  align-self: flex-end; 
}
```