CSS教程（第六章）：CSS的Flexbox布局-谷穗社区

在CSS中，Flexbox（Flexible Box）是一个强大的布局模块，用于在容器内对子元素进行排列、对齐和分布空间，即使在元素尺寸未知或动态的情况下，Flexbox也可以轻松地进行调整。Flexbox非常适合解决各种复杂的布局问题，如垂直居中、等宽列布局、动态比例布局等。

一、Flexbox的基本概念

Flexbox布局包含两个主要的概念：flex容器（flex container）和flex项目（flex item）。

二、Flex容器的属性

display：用于定义一个容器是否为flex容器。可取值包括flex（块级容器）和inline-flex（行内容器）。
```
.container {  
  display: flex;  
}
```

flex-direction：用于设置flex容器中项目的排列方向。可取值包括row（默认值，水平方向）、row-reverse（水平方向，反向排列）、column（垂直方向）和column-reverse（垂直方向，反向排列）。
```
.container {  
  flex-direction: column;  
}
```

flex-wrap：用于控制flex容器是单行还是多行。可取值包括nowrap（默认值，单行显示）、wrap（多行显示）和wrap-reverse（多行显示，反向排列）。
```
.container {  
  flex-wrap: wrap;  
}
```

justify-content：用于设置flex容器中的项目在主轴（水平方向或垂直方向，取决于flex-direction）上的对齐方式。可取值包括flex-start（默认值，项目向主轴起点对齐）、flex-end（项目向主轴终点对齐）、center（项目在主轴上居中对齐）、space-between（项目之间的间隔相等，第一个项目与主轴起点对齐，最后一个项目与主轴终点对齐）、space-around（项目两侧的间隔相等，即项目之间的间隔是项目与容器边框间隔的两倍）和space-evenly（项目之间的间隔和项目与容器边框的间隔相等）。
```
.container {  
  justify-content: center;  
}
```

align-items：用于设置flex容器中的项目在交叉轴（与主轴垂直的方向）上的对齐方式。与justify-content类似，align-items也有多种取值方式。
```
.container {  
  align-items: flex-start;  
}
```

align-content：用于设置flex容器中多行之间的对齐方式，只有当flex容器中的项目存在换行（即设置了flex-wrap为wrap或wrap-reverse）时，该属性才有效。
```
.container {  
  align-content: space-between;  
}
```

三、Flex项目的属性

flex-grow：用于设置flex项目的放大比例，默认为0，即如果有剩余空间也不放大。如果所有项目的flex-grow都设为1，则它们将等分剩余空间（如果有的话）。
```
.item {  
  flex-grow: 1;  
}
```

flex-shrink：用于设置flex项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
```
.item {  
  flex-shrink: 0;  
}
```

flex-basis：用于设置flex项目在主轴方向上的基础尺寸，默认值为auto，即项目的原来尺寸。

.item {  
  flex-basis: 200px;  
}  
  
/* 或者简写为flex属性 */  
.item {  
  flex: 1 0 200px; /* flex-grow, flex-shrink, flex-basis */  
}

align-self：用于覆盖单个flex项目的align-items值。这意味着可以使用该属性来单独调整容器中某个项目的对齐方式。
```
.item {  
  align-
```

文章版权归作者所有，未经允许请勿转载。

THE END