ReactNative Flexbox 布局

what's the meaning of Flexbox? 答：The Flexible Moudle (弹性盒模型)，是一种布局模式，适用不同设备的屏幕适配。有关弹性盒子的属性传送门MDN

---

一、栅格系统

前端代码如何实现呢？

• grid_row定一个flex容器。
• 每一个子item节点作为flex容器中的子元素

Code：

 
jj_1
 
jj_2


 
jj_1
 
jj_2
 
jj_3


 
jj_1
 
jj_2
 
jj_3
 
jj_4

想折腾一个列布局，该怎么整呢？

• so easy .grid-row样式中声明flex-direction：coloumn
• 这边对屏幕尺寸收缩到尺寸时将执行flex-direction：row。
• code：CSS样式的设计

/*样式的设计*/
   .grid {
    border: solid 1px #e7e7e7;
   }
   .grid_row {
    /*定义一个flex容器，每一个子item节点作为flex容器中的子元素*/
    display: flex;
    flex-direction: column;
   }
   .grid_item {
    /*将所有项目等宽的分布在容器中*/
    flex: 1;
    padding: 12px;
    border: solid 1px #E7E7E7;
   }
   @media only screen and (min-width: 480px) {
    .grid_row--sm {
     flex-direction: row;
    }
   }
   @media only screen and (min-width: 720px) {
    .grid_row--md {
     flex-direction: row;
    }
   }
   @media only screen and (min-width: 960px) {
    .grid_row--lg {
     flex-direction: row;
    }
   }

• 任务：一个响应式栅栏布局CSS的代码就能实现，整点事看看嵌套栅栏如何

二、圣杯布局

圣杯布局在网页设计中非常著名，如果利用float，margin负值和最小宽度（min-width）来确保布局不冲突，以这种方式满足响应式布局的需求需要设计大量的运算，浮动清除等一些特殊手段，那么Flexbox布局就能缓解这个局面。

---

2016/11/23 先到这边吧。