前端的学习-CSS（弹性布局-flex）

弹性布局（Flexible Layout）是CSS3的一个布局模块，主要用来提供一种更灵活的方式来对容器内的条目进行排列、对齐和分配空间。

以下是一个简单的弹性布局的例子：

HTML:

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>

CSS:

.flex-container {
  display: flex; /* 使用弹性布局 */
  width: 100%; /* 容器宽度 */
}
 
.flex-item {
  margin: 5px; /* 条目间距 */
  padding: 10px; /* 条目内填充 */
  border: 1px solid #ccc; /* 条目边框 */
}

这个例子中，.flex-container 类使用 display: flex; 属性来指定这个容器使用弹性布局。其内部的 .flex-item 类的元素会自动沿着主轴（默认水平）排列。

弹性布局的属性很多，以下是一些常用的属性：

• flex-direction: 定义主轴方向，可以是水平（row）、垂直（column）或者水平反向（row-reverse）、垂直反向（column-reverse）。
• flex-wrap: 定义如果条目太多无法一次性放下时是否换行以及换行方式。
• flex-flow: 是 flex-direction 和 flex-wrap 的简写形式，默认值为 row nowrap。
• justify-content: 定义条目在主轴上的对齐方式，可以是flex-start（起始端对齐）、flex-end（末尾端对齐）、center（居中对齐）、space-between（两端对齐）、space-around（平均分布）等。
• align-items: 定义条目在交叉轴上的对齐方式，可以是flex-start、flex-end、center、baseline（基线对齐）、stretch（伸展填满）等。
• align-content: 在有多根主轴方向的线条时，定义这些线条在交叉轴上的对齐方式。

这些属性可以应用于弹性容器上，并影响其内部的条目排列。