flex菜鸟教程

flex菜鸟教程
Flex布局是一种新的CSS3布局模式。

它可以灵活地对容器中
的子元素进行排列和定位。

通过使用一些简单的属性和属性值，我们可以轻松实现复杂的布局效果。

Flex容器是指应用Flex布局的父元素。

要使一个容器成为
Flex容器，我们只需设置其display属性为flex或inline-flex。

例如：
```
.container {
display: flex;
}
```
Flex容器中的子元素即为Flex项目。

Flex项目可以利用一些
属性来实现弹性的布局。

以下是一些常用的属性：
1. flex-direction: 用于设置Flex项目在Flex容器中的排列方向，可以取值为row、row-reverse、column或column-reverse。

2. justify-content: 用于设置Flex项目在主轴上的对齐方式，可
以取值为flex-start、flex-end、center、space-between或space-around。

3. align-items: 用于设置Flex项目在交叉轴上的对齐方式，可
以取值为flex-start、flex-end、center、baseline或stretch。

4. flex-grow: 用于设置Flex项目在剩余空间中拉伸的比例，默认为0，即不拉伸。

5. flex-shrink: 用于设置Flex项目在空间不足时收缩的比例，默认为1，即都等比例收缩。

通过灵活地组合和调整这些属性，我们可以实现复杂的布局效果，如等分、自适应等。

除了以上属性外，Flex布局还有很多其他的属性和技巧可以掌握。

现在，你已经对Flex布局有了基本的了解，可以继续深入学习并应用到实际项目中了。

祝你学习愉快！。