前端时间在项目中使用了一下Flex布局，闲来无事记录一下

兼容

---

首先以一个骰子做介绍

默认样式布局

默认是靠左对齐

---

骰子居中

居中

  .box{
            display: flex;
            justify-content: center;
        }

---

骰子靠右

  .box{
            display: flex;
            justify-content: flex-end;
        }

---

设置交叉轴对齐(垂直方向)

  .box{
            display: flex;
            align-items:center;
        }

---

主轴和交叉轴同时居中

  .box{
            display: flex;
            align-items:center;
                        justify-content:center;
        }

 .box{
            display: flex;
            align-items:flex-end;
                        justify-content:center;
        }

 .box{
            display: flex;
            align-items:flex-end;
                        justify-content:flex-end;
        }

align-items 属性定义项目在交叉轴上如何对齐

• flex-start
• flex-end
• center
• baseline
• stretch
  

---

两个子元素

.box{
            display: flex;
            justify-content: space-between;
        }

justify-content定义了子项目在主轴上的对齐方式(对齐方式与轴的方向有关)

• flex-start 左对齐
• flex-end右对齐
• center 居中
• space-between 两端对齐
• space-around 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍
  

flex-direction 属性决定主轴的方向(即项目的排列方向)

• row(默认值) 主轴水平方向,起点在左端
• row-reverse 主轴为水平方向,起点在右端
• column 主轴为垂直方向,起点在顶部
• column-reverse 主轴为垂直方向，起点在底部
  

主轴方向为垂直，然后两端对齐，垂直方向居中

  .box{
            display: flex;
            justify-content: space-between;
            flex-direction: column; 
            align-items: center;
        }

主轴方向垂直，两端对齐，交叉轴为底对齐（主轴改变了方向，现在交叉轴的底部为右边）

   .box{
            display: flex;
            justify-content: space-between;
            flex-direction: column; 
            align-items: flex-end;
        }

align-self 属性允许单个项目与其他项目有不一样的的对齐方式(交叉轴方向),可以覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch

• auto
• flex-start
• flex-end
• center
• baseline
• stretch
  这6个属性值，除了auto，其他都与align-items属性完全一致
  

首先主轴方向设置两端对齐,然后子项目的align-self设置为flex-end

  .box{display:flex;justify-content:space-between;}
  .item:nth-child(2){align-self:flex-end;}

三个子项目

主轴方向为默认，然后第二个子项目设置为center，第三个子项目设置为flex-end

.box{display:flex;justify-content:space-around;} 
.item:nth-child(2){align-self:center;}
.item:nth-child(3){align-self:flex-end;}

四个子项目

  .box{              display: flex;
            justify-content: flex-end;
            flex-wrap: wrap;
            align-content: space-between;}

首先把主轴的对齐方式设置为flex-end,然后设置换行,然后定义多根轴线的对齐方式space-between交叉轴两端对齐

flex-wrap 默认情况下项目都排在一条线上(轴线),flex-wrap属性定义，如果一条轴线排不下，如何换行

• nowrap 默认不换行
  
• wrap 换行，第一行在上方
  
• wrap-reverse 换行,第一行在下方
  

align-content 定义多根轴线的对齐方式,如果项目只有一根轴线,那这个属性就不起作用

• flex-start 与交叉轴的起点对齐
• flex-end 与交叉轴的终点对齐
• center 与交叉轴的重点对齐
• space-between 与交叉轴两端对齐，轴线之间的间隔平均分布
• soace-around 每根轴线的两侧间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍
• stretch 默认值 轴线占满整个交叉轴
  

页面结构

<div class="box">
    <div class="column">
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <div class="column">
        <div class="item"></div>
        <div class="item"></div>
    </div>
</div>

样式

.box{
            width: 100px;
            height: 100px;
            border:1px solid black;
            margin: 50px auto;
            border-radius: 8px;
            display: flex;
            flex-wrap: wrap;
            align-content: space-between;
        }
        .item{
            width: 28px;
            height: 28px;
            background:#000;
            border-radius: 50%;
            margin-right: 5px;
        }
        .column{
            display: flex;
            flex-basis: 100%;
            justify-content: space-between;
        }

这里主要是用了两个子项目（column）做换行，并且把column的大小设置为主轴的100%，然后把column里面的子项设置为两端对齐
flex-basis 定义了在分配多余空间之前，项目占据的主轴空间。浏览器根据这个属性，计算主轴是否有多余空间。默认值为auto，即项目的本来大小（被子元素撑开的大小）如下图(auto的情况)

---

网格布局

说明：每个cell平分父元素
结构

  <div class="grid">
        <div class="grid-cell">1</div>
        <div class="grid-cell">2</div>
        <div class="grid-cell">3</div>
        <div class="grid-cell">4</div>
    </div>

<style>
*{margin: 0;padding: 0;}
.grid{width: 300px;margin: 50px auto;display: flex;}
.grid-cell{text-align: center;height: 30px;line-height: 30px;border:1px solid #ccc;flex:1;}
</style>

> `flex`属性是`flex-grow`，`flex-shrink`,`flex-basis`的简写，默认值为`0 1 auto`。后面两个属性可选(两个快捷值:`auto`->1 1 auto   `none`->0 0 auto),建议优先使用这个属性
  * `flex-grow` 定义项目的放大比例,默认为0，即如果存在剩余空间，也不放大。如果所有项目的`flex-grow`属性都为1，则它们将等分剩余空间。如果一个项目的`flex-grow`属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
![](https://img.haomeiwen.com/i215275/35db0e393c7ce260.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
  * `flex-shrink`属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。





# 参考资料
[flex布局教程-语法](http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html)
[flex布局教程-实例](http://www.ruanyifeng.com/blog/2015/07/flex-examples.html)