弹性盒子布局 参考 阮一峰老师

兼容性

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