09 flex 布局

• 使用 flex 实现一个三点的色子

属性	描述	可能的值
flex-direction	指定弹性容器内子元素的主轴方向，定义子元素的排列方式。	row: 主轴为水平方向，子元素从左到右排列（默认）。 row-reverse: 主轴为水平方向，子元素从右到左排列。 column: 主轴为垂直方向，子元素从上到下排列。 column-reverse: 主轴为垂直方向，子元素从下到上排列。
justify-content	定义弹性容器内子元素沿主轴的对齐方式。	flex-start: 子元素向主轴的起点对齐（默认）。 flex-end: 子元素向主轴的终点对齐。 center: 子元素在主轴上居中对齐。 space-between: 子元素之间均匀分布，第一个子元素与起点对齐，最后一个子元素与终点对齐。 space-around: 子元素之间均匀分布，每个子元素两侧的间隔相等。
align-items	定义弹性容器内子元素沿交叉轴（垂直于主轴）的对齐方式。	flex-start: 子元素向交叉轴的起点对齐。 flex-end: 子元素向交叉轴的终点对齐。 center: 子元素在交叉轴上居中对齐。 baseline: 子元素的基线对齐。 stretch: 子元素在交叉轴上拉伸以填满容器（默认）。
flex-wrap	控制弹性容器内子元素是否换行。	nowrap: 不换行，所有子元素保持在一行（默认）。 wrap: 换行，子元素在必要时换行。 wrap-reverse: 换行，子元素在必要时换行，但行的顺序反转。
align-self	允许单个子元素在交叉轴上独立对齐，覆盖 align-items 属性。	auto: 默认值，继承父容器的 align-items 属性。 flex-start: 子元素向交叉轴的起点对齐。 flex-end: 子元素向交叉轴的终点对齐。 center: 子元素在交叉轴上居中对齐。 baseline: 子元素的基线对齐。 stretch: 子元素在交叉轴上拉伸以填满容器。

flex-direction

flex-direction 属性指定了弹性容器内子元素的主轴方向，从而定义了子元素的排列方式。它有四个可能的值：

• row: 默认值，主轴为水平方向，子元素从左到右排列。
• row-reverse: 主轴为水平方向，子元素从右到左排列。
• column: 主轴为垂直方向，子元素从上到下排列。
• column-reverse: 主轴为垂直方向，子元素从下到上排列。

justify-content

justify-content 属性定义了弹性容器内子元素沿主轴的对齐方式。当子元素在主轴上没有占满整个空间时，可以使用这个属性来分配剩余的空间。它有以下值：

• flex-start: 子元素向主轴的起点对齐（默认）。
• flex-end: 子元素向主轴的终点对齐。
• center: 子元素在主轴上居中对齐。
• space-between: 子元素之间均匀分布，第一个子元素与起点对齐，最后一个子元素与终点对齐。
• space-around: 子元素之间均匀分布，每个子元素两侧的间隔相等。

align-items

align-items 属性定义了弹性容器内子元素沿交叉轴（垂直于主轴）的对齐方式。它有以下值：

• flex-start: 子元素向交叉轴的起点对齐。
• flex-end: 子元素向交叉轴的终点对齐。
• center: 子元素在交叉轴上居中对齐。
• baseline: 子元素的基线对齐。
• stretch: 子元素在交叉轴上拉伸以填满容器（默认）。

flex-wrap

flex-wrap 属性控制弹性容器内子元素是否换行。当子元素超出容器宽度时，可以使用这个属性来控制换行方式。它有以下值：

• nowrap: 不换行，所有子元素保持在一行（默认）。
• wrap: 换行，子元素在必要时换行。
• wrap-reverse: 换行，子元素在必要时换行，但行的顺序反转。

align-self

align-self 属性允许单个子元素在交叉轴上独立对齐，覆盖 align-items 属性。它有以下值：

• auto: 默认值，继承父容器的 align-items 属性。
• flex-start: 子元素向交叉轴的起点对齐。
• flex-end: 子元素向交叉轴的终点对齐。
• center: 子元素在交叉轴上居中对齐。
• baseline: 子元素的基线对齐。
• stretch: 子元素在交叉轴上拉伸以填满容器。

使用 flex 实现一个三点的色子

<style type="text/css">
  .box {
    width: 200px;
    height: 200px;
    border: 2px solid #ccc;
    border-radius: 10px;
    padding: 20px;
  }
  .item {
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #666;
  }
</style>
<div class="box">
  <span class="item"></span>
  <span class="item"></span>
  <span class="item"></span>
</div>

查看代码

html

<div class="box">
  <span class="item"></span>
  <span class="item"></span>
  <span class="item"></span>
</div>

css

.box {
  width: 200px;
  height: 200px;
  border: 2px solid #ccc;
  border-radius: 10px;
  padding: 20px;

  display: flex;
  justify-content: space-between;
}
.item {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #666;
}
.item:nth-child(2) {
  align-self: center;
}
.item:nth-child(3) {
  align-self: flex-end;
}