老生常谈之Flex布局

flex布局是09年W3C 提出的一种布局方案，相比于传统的浮动（float）和定位（position）布局，不存在高度塌陷和脱标等问题，尽管已经推出十几年，仍然是当下最流行的布局方式

以下是flex布局的几点优势：

1. 不脱离标准流，bug较少
2. 代码简单，功能强大
3. 兼容性好，几乎大部分浏览器都兼容flex

flex的基本概念

flex布局又称为弹性布局，通过给父元素添加display: flex属性使子元素水平对齐，弹性意味着盒子的间距或盒子本身宽高可以拉伸变化，在下面的例子中会体现

示例代码

       .container {
            margin: 10px auto;
            width: 600px;
            height: 600px;
            background-color: antiquewhite;
            display: flex;

        }

        .container .item {
            width: 100px;
            height: 100px;
            background-color: pink;
            line-height: 100px;
            text-align: center;
            font-size: 50px;
            color: #fff;
        }

    <div class="container">
        <div class="item item1">1</div>
        <div class="item  item2">2</div>
        <div class="item  item3">3</div>
        <div class="item  item4">4</div>
        <div class="item  item5">5</div>
    </div>

容器和项目

添加了display: flex 属性的盒子称为容器 ，其内部排列的元素称为项目，任何一个容器都可以指定为Flex布局，行内元素也可以使用Flex布局。项默认从容器左上角依次水平排列，值得注意的是设置弹性盒子后，其中的项如果是行内元素将具有行内块的特性，可以设置宽高

坐标轴

每个设置弹性盒子的容器都有一个默认的平面坐标系，默认有两根轴（可能有多根，下面会说），称为主轴和侧轴，主轴默认水平方向从左向右，侧轴默认垂直方向从上向下，项默认按主轴方向排列

容器属性

flex容器上包含6个属性，需要添加在父元素上

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

justify-content属性

justify-content属性决定主轴上水平方向，项的排列方式，有以下6种属性值

.container { justify-content: flex-start | flex-end | center | space-between | space-around;}

1、flex-start

默认值，从容器左上角依次水平排列，加不加效果一样

2、flex-end

项从尾部开始排列，盒子顺序不变

3、space-between

两端对齐，容器左右不留空白，项之间的间隔相等

4、 space-evenly

项与容器的间隔，项与项的间隔相等

5、space-around

每个项两侧会有相等的间隔，故容器两侧的空白比中间空白小

6、center

盒子间紧密排列，整体居中，如果只有一个盒子，则单个盒子居中

flex-wrap属性

flex布局中当项的总宽度大于容器宽度时，项默认不换行，项的宽度会被等比缩放挤压在一行，这时需要添加flex-wrap属性进行换行

.container { flex-wrap: nowrap | wrap | wrap-reverse;}

这里额外添加5个盒子，总共1000px，但项不会换行，会被挤到一行，项的宽度被等分为容器的十分之一

1、nowrap

默认值，不换行，加不加一样

2、wrap

项的宽不会被挤压，多余的项会在下一行显示，这时容器会多出一条主轴，这里为了方便观察容器高设置成了200px，并产生额外的主轴

注意：如果容器的高度比换行后项的总高度大，换行的主轴会等分侧轴距离

3、wrap-reverse

和wrap有相似的效果，不同的是被挤下去的盒子会显示在上方

align-items属性

align-items决定侧轴垂直方向上盒子的排列方式

.container { align-items: flex-start | flex-end | center | stretch;}

1、flex-start

方法同justify-content的flex-start属性，不影响布局

2、flex-end

从容器的左下方开始排列

3、center

从盒子的垂直方向中心点排列

4、stretch

如果不给项设置高度，默认铺满整个侧轴

align-content属性

当项换行时产生多条主轴时，决定多行盒子在侧轴垂直方向上的排列方式，align-content在单行时不生效

.container { align-content: flex-start | flex-end | center | space-between | space-around | stretch;}

1、flex-start

项从左上角依次排列，换行的项紧贴第一行项水平排列

2、flex-end

项从容器左下角排列，顺序不变

3、center

多行盒子紧密排列并在垂直方向上居中

4、space-between

侧轴两端对齐，容器上下不留空白，行之间的间隔相等

5、space-around

每根主轴的上下间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍

6、stretch

项不设高，将铺满侧轴

flex-direction属性

flex-direction属性可以改变主轴的方向

row（默认值）：主轴为水平方向，起点在左端。

.container { flex-direction: row | row-reverse | column | column-reverse;}

1、row

默认值，主轴为水平方向，方向从左至右。

2、row-reverse

主轴为水平方向，方向从左至右

3、column

主轴为垂直方向，起点在上沿

注意：主轴变为垂直方向后，侧轴会取代原来主轴位置

4、column-reverse

主轴为垂直方向，方向自下而上

项目属性

flex项目上包含6个属性，需要添加在项上，这里只讲解3个

• order
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self

order属性

order属性决定各个项的排列顺序，order属性值为数字默认为0，值越小越往前排

  .item4 { order: -1; }

这里我们给第四项添加属性order: -1，小于其他默认项排在最前面

flex属性

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选，它代表每个项占剩余容器宽度的份额，比如下面项1宽100px，项2和项3各自设置flex: 2和flex: 3，那么项2和项3将各自占有剩余宽度的2/5和3/5

       .container .item2 {
            flex: 2;
            background-color:aqua ;
        }
        .container .item3 {
            flex: 3;
            background-color: aquamarine;
        }

flex-grow, flex-shrink 和 flex-basis都具有缩放功能，可以被flex完全取代，且用处不多，这里不在赘述

align-self属性

可以改变某一个项的纵轴排列方式，设置后会覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch

.container .item {align-self: auto | flex-start | flex-end | center | stretch;}

align-self的属性值和align-items除了auto属性值其他属性值作用相同，只是align-self可以单独控制每个项的侧轴排列方式，这里我们给项1设置主轴居中，项3设置底部对齐

        .item1 {
            align-self:center;
        }
        .item3 {
            align-self: flex-end;
        }