Flex布局

flex布局前提条件--display: flex（react native 不用设置）

1. 与flex布局相关的属性有以下几个：（说几个主要的）

• flex-direction 主轴方向
  • row （default value）web开发
  • row-reverse
  • column （default value）react native开发
  • column-reverse
• justify-content 容器内的元素在主轴方向的排列方式
  • flex-start （default value）
  • flex-end
  • center
  • space-between
  • space-around
• align-items 容器内的元素在交叉轴方向的排列方式
  • flex-start
  • flex-end
  • center
  • stretch （default value）
• align-content（注意：容器内必须有多行的项目，该属性才能渲染出效果。今天只讨论单行的情况，也就是不换行，flex-wrap: no-wrap）
• flex-wrap

下面说说flex-direction: row，row-reverse的情况，column，column-reverse以此类推

灰色画布 宽1200px 高 600px

cyan色矩形块 宽250px 高 100px

• flex-direction: row

• justify-content: flex-start; alignItems: flex-start;

Screen Shot 2019-08-31 at 00.20.34.png

• justify-content: flex-start; alignItems: center

Screen Shot 2019-08-31 at 00.23.09.png

• justify-content: flex-start; alignItems: flex-end

  
  Screen Shot 2019-08-31 at 00.23.40.png

---

• justify-content: flex-start; alignItems: center;

Screen Shot 2019-08-31 at 00.39.05.png

• justify-content: flex-end; alignItems: center;

Screen Shot 2019-08-31 at 00.29.15.png

• justify-content: center; alignItems: center;

Screen Shot 2019-08-31 at 00.39.39.png

• justify-content: space-between; alignItems: center;

Screen Shot 2019-08-31 at 00.40.47.png

• justify-content: space-around; alignItems: center;

Screen Shot 2019-08-31 at 00.41.16.png

暂时写这么多 可以一起探讨呀