Flexbox 指南
Flexbox 是 CSS 中的一种布局模型，它提供了一种更加灵活和高效的方式来布局、对齐和分配容器内元素的宽度和高度。以下是关于 Flexbox 的一些基本概念和用法。
基本概念
- 容器（Flex Container）：使用
display: flex;或display: inline-flex;声明的元素。 - 项目（Flex Item）：容器内的所有子元素。
- 主轴（Main Axis）：Flex 容器的当前主轴方向。
- 交叉轴（Cross Axis）：与主轴垂直的轴。
Flex 容器属性
display: flex;或display: inline-flex;：声明容器为 Flex 容器。flex-direction：设置主轴的方向。flex-wrap：设置是否换行。justify-content：设置主轴的对齐方式。align-items：设置交叉轴的对齐方式。align-content：设置多行之间的对齐方式。
Flex 项目属性
order：定义项目的排列顺序。flex-grow：定义项目的放大比例。flex-shrink：定义项目的缩小比例。flex-basis：定义项目的基础尺寸。
示例
<div class="container">
<div class="item">项目 1</div>
<div class="item">项目 2</div>
<div class="item">项目 3</div>
</div>
.container {
display: flex;
justify-content: space-around;
align-items: center;
}
.item {
flex: 1;
background-color: lightblue;
padding: 20px;
margin: 10px;
}
Flexbox 示例
更多关于 Flexbox 的内容，请访问我们的CSS 教程页面。
Flexbox 提供了强大的布局能力，让开发者能够轻松地实现复杂的页面布局。希望这个指南能够帮助你更好地理解和使用 Flexbox。