css flex布局（弹性布局/弹性盒子）

弹性盒属性写在父元素

1 定义弹性盒

display:flex

2 确定主轴方向

flex-direction:row-左右/column-上下 reverse反向

flex-direction:column-reverse; 项目从下到上放置。

flex-direction:row-reverse;项目与文本方向相反放置.

3 主轴对齐方式

justify-content:center; 项目在容器的中心对齐

justify-content: flex-end; 项目与容器的右侧对齐

justify-content: flex-start; 项目与容器的左侧对齐

justify-content: space-between; 项目以相等的间距显示 一个盒子去左边一个盒子右边

justify-content: space-around; 项目显示周围等间距

4 侧轴-交叉轴的对齐方式

不换行

align-items:center; 项目在容器的垂直中心对齐

align-items: flex-start; 项目与容器顶部对齐。

align-items: flex-end; 项目与容器底部对齐。

换行

align-content:space-between;元素位于各行之间留有空白的容器内

align-content: space-around; 元素位于各行之前、之间、之后都留有空白的容器内

align-content: flex-start; 元素位于容器的开头。

align-content: flex-end; 元素位于容器的结尾.

align-content: center; 元素位于容器的中心.

5 换行

/nowrap; wrap 换行

---

---