Flex
利用 Flexbox 创建更灵活的布局。
这个组件使用了Flexbox —— 一个比较新的概念，它拥有强大的布局效果。
用法
若要使用这个组件，只需要添加 flex 类到一个 <div> 元素。这样将会创建 flex 容器。默认情况下，所有 flex 条目都会左对齐，并被赋予一致的高度和宽度。
示例
Box
Box
Box
代码
<div class="flex">
<div>...</div>
</div>行内的 Flex
默认情况下，flex 容器显示为块元素。为了仍然保持按照 flexbox 模型对其内容进行布局，并赋予其行内元素的行为，需要用到 flex-inline 类来替代 flex。
对齐
这些类定义 flex 条目的水平或垂直对齐，并赋予它们彼此之间的间距。
| 类 | 描述 |
|---|---|
flex-center |
添加这个类，水平居中 flex 条目 |
flex-right |
添加这个类，右对齐 flex 条目 |
flex-top |
添加这个类，顶部对齐 flex 条目 |
flex-middle |
添加这个类，垂直居中 flex 条目 |
flex-bottom |
添加这个类，底部对齐 flex 条目 |
flex-space-between |
添加这个类，使得条目均匀分布，第一个条目在主轴的开头，最后一个条目在主轴的末尾。 |
flex-space-around |
添加这个类，使得条目均匀分布,使每个条目具有相同的左右空间。 |
示例
Box
Box
Box
代码
<div class="flex flex-middle flex-space-between">...</div>方向
这些类用于定义 flex 主轴的方向。默认情况下，flex 条目按照水平从左到右的方向放置。
| 类 | 描述 |
|---|---|
flex-row-reverse |
添加这个类，使 flex 条目从右到左排列。 |
flex-column |
添加这个类，使 flex 条目垂直排列成一列。 |
flex-column-reverse |
添加这个类，使 flex 条目从下到上排列。 |
示例
1
2
3
代码
<div class="flex flex-column flex-column-reverse">...</div>换行
默认情况下，flex 条目将它们自身拟合到一行中。添加 flex-wrap 类，使条目不再匹配视口时切换到另一行。要改变条目的方向，使它们从右到左排列，添加 flex-wrap-reverse 类即可。下面这些类用来修饰换行的flex条目的对齐属性。强制将 flex条目放入一行，添加 flex-nowrap 类即可。
| 类 | 描述 |
|---|---|
flex-wrap-top |
添加这个类，使多行 flex 条目对齐到顶部。 |
flex-wrap-middle |
添加这个类，使多行 flex 条目垂直居中。 |
flex-wrap-bottom |
添加这个类，使多行 flex 条目对齐到底部。 |
flex-wrap-space-between |
添加这个类，使条目的行均匀分布，第一行在容器顶部，最后一行在容器底部。 |
flex-wrap-space-around |
添加这个类，是条目的行均匀分布，每一行都有一样的空间。 |
示例
1
2
3
4
5
6
代码
<div class="flex flex-wrap flex-wrap-reverse flex-wrap-space-around">...</div>条目排序
默认情况下，flex 条目根据源码的顺序排列。要将某个元素作为第一个或者最后一个进行显示，只需要添加下列类名中的一个。
| 类 | 描述 |
|---|---|
flex-order-first |
将此条目显示为第一个 |
flex-order-last |
将此条目显示为最后一个 |
示例
1
2
3
代码
<div class="flex">
<div class="flex-order-first">...</div>
</div>条目尺寸
要确定一个 flex 条目需要占用多大的空间，为条目添加以下类中的一个即可。
| 类 | 描述 |
|---|---|
flex-item-none |
由内容决定其尺寸 |
flex-item-auto |
按条目的内容分配空间 |
flex-item-1 |
空间分配完全基于 Flex |