弹性盒子布局 参考 阮一峰老师
兼容性
image
- 设置为弹性盒子
display: flex要加上浏览器的前缀。- 设置为弹性盒子后，他的子元素被称为项目；
-
盒子的属性
flex-direction ：设置项目的排列方向 默认值 (左到右)
- flex-direction: row 默认从左到右
- flex-direction: row-reverse 从右排到左
- flex-direction: column 从上排到下
- flex-direction: column-reverse 从下排到上
image
flex-wrap: 设置项目的换行方式 默认 (不换行)
- flex-wrap: nowrap 不换行
PS: 不换行的情况下，盒子会尽量包含所有的项目，即使你设置了项目的宽度或高度，但你可以设置它的最小值,(min-width / min-height);- flex-wrap: wrap 换行
- flex-wrap: reverse 换行，第一行在最后。
flex-flow : flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
flex-flow: row nowrap
justify-content （水平对齐方式）
justify-content: flex-start 左对齐
justify-content: flex-ent 右对齐
justify-content: center 居中对齐
justify-content: space-between 两端对齐
justify-content: space-around 平均对齐
image
align-items 项目单一行垂直对齐方式
- 简单来说既是提供一条对齐线
flex-start 盒子顶端对齐
flex-end 盒子底端对齐
center 盒子垂直中线对齐
stretch 填满盒子高度
baseline: 基线对齐 （第一行文字）
image
align-content 项目多行垂直对齐方式
flex-start 盒子顶端对齐
flext-end 盒子底端对齐
center 盒子垂直中线对齐
stretch 拉升占满整个垂直盒子高度
space-between 两端对齐
pace-around 平均对齐
image
项目属性
-
order 项目的排列顺序
-
flex 一下属性的简写默认值是 0 1 auto
flex-grow 水平放大比例
flex-shrink 水平缩小比例
flex-basis 水平固定比例 -
align-self 属性用于设置弹性元素自身在侧轴（纵轴）方向上的对齐方式。也就是单独设置该项目的
align-items属性
image
