Flex 布局教程：语法篇

1、微信和网站的Flex 布局教程

Flex 布局兼容性

Flex 布局兼容性

弹性容器的属性
要使用弹性布局，通过 display: flex 或者 display: inline-flex 来将此元素定义为弹性容器。

.box{
  display: flex;
}

1. flex-direction 决定元素的排列方向

   • row 默认值，主轴为水平方向，（左 => 右）
   • column 主轴为垂直方向，（上 => 下）

2. flex-wrap 决定元素如何换行

   • nowrap 默认值，只显示一行，不换行
   • wrap 多行显示

3. justify-content 定义主轴为水平方向，分布方式。

   • flex-start 水平方向起点开始对齐
   • flex-end 水平方向结束位置对齐
   • center 居中对齐
   • space-between 两端对齐，平均间隔
   • space-around 每个子元素都有相等的外边距，相邻元素外边距不会叠加

4. align-items 定义主轴为垂直方向，分布方式。
   • flex-start 垂直方向起点开始对齐
   • flex-end 垂直方向结束位置对齐
   • center 垂直方向居中对齐
   • baseline 与基线对齐（有图）

baseline 与基线对齐

---

2、Rn的Flex 布局教程

1. flexDirection决定元素的排列方向

   • column（默认）：竖直排列（上 -> 下）
   • row：水平排列（左 -> 右）

2. justifyContent 决定其子元素沿着水平（左 -> 右）排列方式

   • flex-start(默认)：位于容器的开头；

   • center：位于容器的中心；

   • flex-end：位于容器的结尾；

   • space-around：位于各行之前、之间、之后都留有空白的容器内；
     

     space-around

   • space-between：位于各行之间留有空白的容器内。
     

     space-between

alignItems（容器属性）

3. alignItems ——决定其子元素竖直（上 -> 下）的排列方式

   • flex-start(默认)：位于容器的开头；
   • center：位于容器的中心；
   • flex-end：位于容器的结尾；

flexWrap（容器属性）

4. flexWrap——控制换行（如果子View放不下，则自动换行）
   • nowrap(默认)：不自动换行
   • wrap：自动换行

flex（子元素属性）

5. flex——权重，分配主轴上剩余的空间

   <View style={{flexDirection: 'row'}}>
        <Text style={{width: 60,height: 80,flex: 1}}/>
        <Text style={{width: 60,height: 80}}/>
        <Text style={{width: 60,height: 80}}/>
        <Text style={{width: 60,height: 80}}/>
   </View>
   

image