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

作者: Nickyzhang | 来源:发表于2017-05-04 21:16 被阅读72次

03-Flexible Box
Flex布局
React Native学习笔记(五)-Flex布局
React Native学习资料
Flex布局
React Native - Flex布局
绿侠快充App技术整理
React之Flex
React-Native flex 布局使用总结
React Native学习笔记一：搭建开发环境

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>