FlexBox弹性布局总结

对于HTML布局、CSS样式是我们前端开发必备技能之一；之前通过传统布局的方式（display+position+float等CSS属性控制）对HTML页面进行布局，但是由于传统方式布局效率低，故W3C提出新的布局方案——弹性布局（FlexBox布局）；

浅谈盒子模型

理解盒子模型是学好布局的重要环节。怎样计算盒子大小。目前有两种版本计算盒子大小：

W3C标准（主流浏览器和IE7+都支持）：盒子大小包括内容(content)、内边距(padding)、边框(border)、外边距(margin)这4个部分组成。
怪异模式（主要是IE7以下版本）：盒子大小包括内容(content)、外边距(margin)这2个部分组成。

由于IE7以下版本目前几乎绝版，故以W3C标准介绍盒子大小的计算。如下代码所示：

<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>盒子模型</title>
    <style type="text/css">
        .box {
            width:200px;
            padding:20px;
            border:2px solid #f00;
            margin:10px;
        }
    </style>
</head>

<body>
    <div class="box">
        我是个W3C标准盒子(content+padding+border+margin)
    </div>
</body>
</html>

以上代码为div元素中设置了padding、border和margin属性，那么该盒子大小是：200+202+22+102=264（width/即content+padding2+border2+margin2）；W3C标准盒子模型，如下图所示：
在这里插入图片描述

盒子大小计算总结：

盒子宽width=content+padding-left+padding-right+border-left+border-right+margin-left+margin-right；
盒子高height=content+padding-top+padding-bottom+border-top+border-bottom+margin-top+margin-bottom；

进入正题（FlexBox弹性布局介绍）

FlexBox是W3C为了实现快速布局而提出的新的布局方案，也叫弹性布局；只要记住以下几个点就能很好的掌握FlexBox弹性布局；

Flex布局有容器和容器成员之分。声明Flex布局的元素称为容器。被Flex布局元素包裹的子元素称为容器成员；代码如下：

<!doctype html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>Flex布局</title>
  <style type="text/css">
      .parent {
        display: flex;
        border:1px solid #f00;
        padding:10px;
      }
      .child {
        flex:1;
        border:1px solid #00f;
      }
  </style>
</head>

<body>
  <div class="parent">
    <div class="child">我是成员一</div>
    <div class="child">我是成员二</div>
    <div class="child">我是成员三</div>
  </div>
</body>
</html>

以上代码中由于class为parent通过display:flex;声明成flex布局，故它为容器，child为容器成员；
2. flex布局有XY轴之分，并且轴具有方向性（X轴—从左到右、从右到；Y轴—从上到下、从下到上）。类似于直线坐标系中的X轴和Y轴，该特性主要决定容器成员排列方向。其中X轴成为主轴，Y轴成为交叉轴。如下图所示：

在这里插入图片描述

如上图所示：灰色表示Flex布局容器、红色区块表示从左到右X轴排列布局、蓝色区块表示从上到下Y轴排列布局；

容器成员一般均分容器的总宽度，需要给每位成员设置flex:1即可（在没有设置宽度的前提下）。如果容器成员A设置了width属性，那么剩余成员均分（容器宽度-成员A的宽度）的剩余宽度；

Flex布局中CSS属性介绍

如上述所讲，Flex布局区分容器和容器成员，那么该布局的CSS属性也区分容器属性和CSS属性；

容器属性集合：

flex-direction（用来决定容器的主轴方向）
flex-wrap（设置容器中成员在一条轴线上排列不下所有的Item元素，是否可以进行换行排列）
flex-flow（是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap）
justify-content（justify-content属性定义了I成员在X（主）轴方向上的对齐方式）
align-items（justify-content属性定义了成员在Y（交叉）轴方向上的对齐方式）
align-content（定义了多根轴线的对齐方式，如果项目只有一根轴线，该属性不起作用）

容器成员CSS属性集合：

order（定义了Item的排列顺序，数值越小，排列越靠前，默认为0）
flex-grow（定义了Item的放大比例，默认为0，即如果存在剩余空间，也不放大）
flex-shrink（定义了Item的缩小比例，默认为1，即如果空间不足，该Item将缩小）
flex-basis（定义了在分配多余空间之前，Item占据的主轴空间（main size））
flex（flex-grow，flex-shrink 和 flex-basis的简写，默认值为0 1 auto；当只有一个元素使用flex:1 则将充满整个屏幕，当有多个元素使用flex: 1 则平分屏幕空间大小)
align-self（允许单个Item有与其他Item不一样的对齐方式，可覆盖align-items的属性）
由于关于Flex布局中CSS属性太多，太占篇幅；就没有过多介绍，具体可参考阮一峰的教程：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

个人在具体项目场景中遇到最多的就是fle-direction、justify-content、align-items容器属性和flex容器成员属性；在Web端页面布局上，需要使用display:flex将父类元素声明成flex容器，才能是flex的CSS属性生效。React Native项目中默认使用的是flex布局，所以不需要额外声明，直接使用flex的CSS属性即可生效；