标签： 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：

<span class="flex-container">客官，请留步</span>

.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:

<span class="flex-container">
  <span class="flex-item">1</span>
  <span class="flex-item">2</span>
  <span class="flex-item">3</span>
</span>

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

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