React Native学习笔记(五)-Flex布局

1、基本概念

采用flex布局的元素成为flex容器，容器包括水平的主轴(main axis)和垂直的交叉轴(cross axis)，主轴包括开始位置(main start)和结束位置(main end),交叉轴也包括开始位置(cross start)和结束位置(cross end)。项目默认沿水平方向排序。

2、容器属性

• flex-direction：决定主轴的方向
  • row(默认值)：沿水平方向，起点在左边
  • row-reverse：沿水平方向，起点在右边
  • column：主轴为垂直方向，起点在上沿
  • column-reverse：主轴为垂直方向，起点在下沿
• flex-wrap：如果一行容不下，将会换行
  • nowrap(默认)：不换行
  • wrap：换行，第一行在上方
  • wrap-reverse：换行，第一行在下方

此时容易出现的问题是换行后下一行并不能紧挨着上一行，而是所有的行数平分整个高度，可以和align-content配合使用

• flex-flow：flex-direction和flex-wrap的简写形式，默认值为row nowrap
• justify-content：主轴的对齐方式
  • flex-start|flex-end :水平左/右
  • center：水平居中
  • space-between：水平两端对齐
  • space-around：相当于margin属性，内部元素平分水平宽度
• align-items：交叉轴的对齐方式
  • flex-start | flex-end ：垂直方向的上下
  • center 垂直居中
  • baseline ：以垂直方向第一行文字的基线对齐
  • stretch(默认值):如果项目未设置高度或设为auto，将占满整个容器的高度
• align-content:多跟轴线的对齐方式
  • flex-start | flex-end ：与交叉轴的起点/终点对齐
  • center ：与交叉轴的中间对齐
  • space-between ：与交叉轴的两端对齐
  • space-around ：平分整个交叉轴(内部的每一个元素都包括上下边距)
  • stretch ：占满整个交叉轴

项目中属性

• order<integer>：按照int进行排列
• flex-grow：放大比例
• flex-shrink：缩小比例
• flex-basis：可以设置大小，默认为auto
• flex：上面3个属性的简写
• align-self：允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性

实例说明

CSS代码

.box1 {
    display: flex;
    justify-content: center;
    height: 120px;
    width: 100%;
    background: gainsboro;
}
.box2 {
    display: flex;
    justify-content: space-between;
    height: 120px;
    width: 100%;
    background: gainsboro;
}
.container1 {
    display: flex;
    height: 120px;
    width: 120px;
    background: dimgrey;
    margin-right: 10px;
}
.content1 {
    background: #67cf22;
    height: 40px;
    width: 40px;
    border-radius: 20px;
}
.container2 {
    display: flex;
    /*控制显示方向*/
    flex-direction: column;
    height: 120px;
    width: 120px;
    background: dimgrey;
}
.container3 {
    display: flex;
    /*控制换个换行*/
    flex-wrap: wrap;
    /*多行的对齐方式*/
    align-content: flex-start;
    height: 120px;
    width: 120px;
    background: dimgrey;
    margin-left: 10px;
    margin-right: 10px;
}
.container4 {
    display: flex;
    /*设置内容的位置*/
    justify-content: center;
    height: 120px;
    width: 120px;
    background: dimgrey;
    margin-right: 10px;
}
.container5 {
    display: flex;
    /*设置内容的位置*/
    justify-content: flex-end;
    height: 120px;
    width: 120px;
    background: dimgrey;
    margin-right: 10px;
}
.container6 {
    display: flex;
    align-items: center;
    height: 120px;
    width: 120px;
    background: dimgrey;
    margin-right: 10px;
}
.container7 {
    display: flex;
    justify-content: space-between;
    height: 120px;
    width: 120px;
    background: dimgrey;
    margin-right: 10px;
}
.container8 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 120px;
    width: 120px;
    background: dimgrey;
    margin-right: 10px;
}
.container9 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: 120px;
    width: 120px;
    background: dimgrey;
    margin-right: 10px;
}
.container10 {
    display: flex;
    height: 120px;
    width: 120px;
    background: dimgrey;
    margin-right: 10px;
}
.content10 {
    background: #67cf22;
    height: 40px;
    width: 40px;
    border-radius: 20px;
}
.content10:nth-child(2){
    align-self: center;
}

.container11 {
    display: flex;
    justify-content: space-between;
    height: 120px;
    width: 120px;
    background: dimgrey;
    margin-right: 10px;
}
.content11 {
    background: #67cf22;
    height: 40px;
    width: 40px;
    border-radius: 20px;
}
.content11:nth-child(2){
    align-self: flex-end;
}
.container12 {
    display: flex;
    justify-content: space-between;
    height: 120px;
    width: 120px;
    background: dimgrey;
    margin-right: 10px;
}
.content12 {
    background: #67cf22;
    height: 40px;
    width: 40px;
    border-radius: 20px;
}
.content12:nth-child(2){
    align-self: center;
}
.content12:nth-child(3){
    align-self: flex-end;
}
.container13 {
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
    justify-content: flex-end;
    height: 120px;
    width: 120px;
    background: dimgrey;
    margin-right: 10px;
}

HTML代码

<div class="box1">
    <div class="container1">
        <div class="content1"></div>
    </div>
    <div class="container2">
        <div class="content1"></div>
        <div class="content1"></div>
    </div>
    <div class="container3">
        <div class="content1"></div>
        <div class="content1"></div>
        <div class="content1"></div>
        <div class="content1"></div>
        <div class="content1"></div>
    </div>
    <div class="container4">
        <div class="content1"></div>
        <div class="content1"></div>
    </div>
    <div class="container5">
        <div class="content1"></div>
        <div class="content1"></div>
    </div>
    <div class="container6">
        <div class="content1"></div>
    </div>
    <div class="container7">
        <div class="content1"></div>
        <div class="content1"></div>
    </div>
    <div class="container8">
        <div class="content1"></div>
        <div class="content1"></div>
    </div>
    <div class="container9">
        <div class="content1"></div>
        <div class="content1"></div>
    </div>
</div>
<div class="box2" style="margin-top: 10px;">
    <div class="container10">
        <div class="content10"></div>
        <div class="content10"></div>
    </div>
    <div class="container11" >
        <div class="content11"></div>
        <div class="content11"></div>
    </div>
    <div class="container12" >
        <div class="content12"></div>
        <div class="content12"></div>
        <div class="content12"></div>
    </div>
    <div class="container13" >
        <div class="content1"></div>
        <div class="content1"></div>
        <div class="content1"></div>
        <div class="content1"></div>
    </div>
</div>

效果图

效果图

阮一峰教程

React Native中的Flex