弹性盒子的知识点补充

容器的属性

1.flex-direction 决定主轴的方向（即项目的排列方向）

 lex-direction: row | row-reverse | column | column-reverse

• row（默认值） 主轴为水平方向，起点在左端。
• row-reverse 主轴为水平方向，起点在右端。
• column 主轴为垂直方向，起点在上沿。
• column-reverse 主轴为垂直方向，起点在下沿

---

2.justify-content 主轴的对齐方式

justify-content: flex-start | flex-end | center | space-between | space-around

• flex-start（默认值） 左对齐
• flex-end 右对齐
• center 居中
• space-between 两端对齐，项目之间的间隔都相等。
• space-around 每个项目两侧的间隔相等。所以， 项目之间的间隔比项目与边框的间隔大一倍

 

 

---

 3.align-items 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。

align-items: flex-start | flex-end | center | baseline | stretch

•  flex-start 交叉轴的起点对齐。
• flex-end 交叉轴的终点对齐。
• center 交叉轴的中点对齐。
• baseline 项目的第一行文字的基线对齐。
• stretch（默认值） 如果项目未设置高度或设为auto，将占满整个容器的高度

 

 

---

 4.flex-wrap 属性 默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一 条轴线排不下，如何换行。

flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;

•  nowrap（默认）：不换行。
• wrap：换行，第一行在上方。
• wrap-reverse：换行，第一行在下方