文章目录
- 基本概念
- 弹性容器
- 1.主轴方向
- 2.换行
- 3.弹性流
- 4.调整内容
- 5.对齐元素
- 6.对齐内容
- 弹性元素
- 1.flex-grow
- 2.flex-shrink
- 3.flex-basis
- 4.order
基本概念
Flexbox是一种简单而强大的布局方式，通过flex可以指明空间的分布方式、内容的对齐方式和元素的视觉顺序，把不同的组件放置在页面中。内容可以轻易横向或纵向排布，还可以沿一个轴布局，或者折断成多行。
使用Flexbox，内容的呈现顺序不再受源码顺序的限制。但这只是一种视觉上的改变。Flexbox最突出的一个特点是：可以让元素对不同的屏幕尺寸和不同的显示设备做好适应准备。
Flexbox依赖父子关系，在元素上声明display：flex | inline-flex后，这个元素随之成为弹性容器，负责在所占空间内布置子元素（flex-item）。弹性容器中的每一个直接子元素都将变成弹性元素，且都以相同方式布局。
弹性容器
1.主轴方向
flex-direction
取值：row | row-reverse | column | column-reverse
初始值：row
适用于：弹性容器
flex-direction属性指定在弹性容器中如何摆放弹性元素，即定义弹性容器的主轴，弹性元素沿这个轴排布。
2.换行
flex-wrap
取值：nowrap | wrap | wrap-reverse
初始值：nowrap
适用于：弹性容器
限制弹性容器的显示方式，只显示一行还是必要时换行。
3.弹性流
flex-flow
初始值：row nowrap
适用于：弹性容器
是flex-derection和flex-wrap的简写形式
4.调整内容
justify-content
取值：flex-start | flex-end | center | space-between | space-around | space-evenly
初始值：flex-start
适用于：弹性容器
用于分配弹性盒子中，空白位置的分配方式。
5.对齐元素
align-items
取值：flex-start | flex-end | center | baseline | stretch
初始值：stretch
适用于：弹性容器
指定所有弹性元素与垂直轴的对齐方式。
align-self
取值：auto | flex-start | flex-end | center | baseline | stretch
初始值：auto
适用于：弹性容器
用于设置在单个元素上，覆盖align-items的值。
6.对齐内容
align-content
取值：flex-start | flex-end | center | space-between | space-around | space-evenly | stretch
初始值：stretch
适用于：弹性容器
指定弹性容器在垂直轴方向上额外空间的分配方式。
弹性元素
1.flex-grow
初值值：0
适用于：弹性元素
决定分配弹性容器可用空间时相对其他同辈弹性元素的缩放比例。
2.flex-shrink
初始值：1
适用于：弹性元素
决定空间不足时的元素缩放比例。
3.flex-basis
初始值：auto
适用于：弹性元素
设置默认尺寸
4.order
初始值：0
适用于：弹性元素及弹性容器中绝对定位的子元素
设置元素的出现顺序
