Flex布局

1. 基本Flex布局

<div class="bx-flex">
  <div class="bx-flex-item"></div>
  <div class="bx-flex-item"></div>
  <div class="bx-flex-item"></div>
</div>

1. 换行

<div class="bx-flex bx-flex--wrap"></div>

1. 主轴对齐

<!-- 左对齐 -->
<div class="bx-flex bx-flex-main--start"></div>
<!-- 右对齐 -->
<div class="bx-flex bx-flex-main--end"></div>
<!-- 居中 -->
<div class="bx-flex bx-flex-main--center"></div>
<!-- 两端对齐，项目之间的间隔都相等 -->
<div class="bx-flex bx-flex-main--space-between"></div>
<!-- 每个项目两侧的间隔相等 -->
<div class="bx-flex bx-flex-main--space-around"></div>

1. 交叉轴对齐

<!-- 交叉轴的起点对齐 -->
<div class="bx-flex bx-flex-cross--start"></div>
<!-- 交叉轴的终点对齐 -->
<div class="bx-flex bx-flex-cross--end"></div>
<!-- 交叉轴的中点对齐 -->
<div class="bx-flex bx-flex-cross--center"></div>
<!-- 项目的第一行文字的基线对齐 -->
<div class="bx-flex bx-flex-cross--baseline"></div>
<!-- 默认值,如果项目未设置高度或设为auto，将占满整个容器的高度 -->
<div class="bx-flex bx-flex-cross--stretch"></div>