display:flex Flex布局 弹性盒模型

【弹性盒模型布局不兼容IE-10及以下】

.div {
  /* 块元素 */
  display: -webkit-flex;
  display: flex;
}

.span {
  /* 行内元素 */
  display: -webkit-inline-flex;
  display: inline-flex;
}

设置为Flex布局后，子元素的 float clear vertical-align 属性失效

---

容器的属性

• flex-direction 横向排列
• flex-wrap 换行
• flex-flow 横向排列+换行的合并简写
• justify-content 子元素的横向分布位置 居中等
• align-items 子元素的纵向分布位置
• align-content 多行子元素时的纵向分布位置

---

· flex-direction
子元素的排列方向 row | row-reverse | column | column-reverse
row 水平排列，起点在左
row-reverse 水平排列，起点在右
column 垂直排列，起点在上
column-reverse 垂直排列，起点在下

· flex-wrap
子元素换行方式 nowrap | wrap | warp-reverse

· flex-flow
排列方向和换行方式的简写形式 <flex-direction> <flex-wrap>
默认 row nowrap

· justify-content
子元素在横轴的对齐方式 flex-start | flex-end | center | space- between | space-around
center 居中：固定的间距
space-between 两端对齐，间距相等
space-around 两侧的间距相等，子元素自建的间距比首尾元素距离盒子的间距要大一倍

image.png image.png
· align-items
子元素在竖轴方向上的对齐方式 flex-start | flex-end | center | baseline | stretch
baseline 子元素第一排的文字基线对齐
如果子元素没有设置高度或者设为auto，则撑满整个盒子高度
image.png image.png

· align-content
多根轴线的对齐方式，只有一行的时候不起作用 flex-start | flex--end | center | space-between | space-around | stretch
space-between 与盒子顶部底部对齐，行与行之间的间距均等
space-around 子元素上下的间距相等，因此第一行距离盒子上顶部与最后一行距离盒子底部的间距会比行与行之间的间距小一倍
stretch 轴线占满整个盒子高度

---

子元素的属性

• order 排序值，越小越靠前，可以为负
• flex-grow 放大比例，默认0
• flex-shrink 缩小比例，默认1
• flex-basis 项目大小，默认auto，即本来大小
• flex grow,shrink,basis三个属性 合并简写，默认 0 1 auto
• align-self 覆盖盒子设定的align-items属性