flex布局

标签： css flex
摘自： React Native入门与实战

---

flexbox 即由伸缩容器和伸缩项目组成，按伸缩刘的方向布局。容器分为主轴（main axis）和交叉轴（cross axis）。务必了解属性作用于容器还是项目！

1. 容器属性

• display
• flex-direction
• flex-flow
• flex-wrap
• justify-content
• align-itmes
• align-content

---

1.1 display

指定容器是否伸缩容器

display: flex | inline-flex

flex产生块级伸缩容器，inline-flex产生行内伸缩元素
eg：

客官，请留步

.flex-container {
   display: flex | flex-inline
}

注意事项：
css的cloumns，float，clear，vertical-algin不会生效

---

1.2 flex-direction

flex-direction: row | row-reverse | column | column-reverse

row

eg:

  1
  2
  3

.flex-container {
  display: flex;
  flex-direction: row;
}

说明：
flex-direction默认为row，因此如果要求横向收缩，你设置为display：flex后flex-direction: row可以省略