flex布局

2017-12-14 本文已影响62人没汁帅

关于flex的基本概念啥的就不介绍了，直接正题。
基本布局

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>flex box</title>
  <style media="screen">
    * {-webkit-box-sizing: border-box; box-sizing: border-box;}
    .container div { background-color: red; border: 1px solid #333; }
    .div1 {width: 70px; height: 70px;}
    .div2 {width: 50px; height: 50px;}
    .div3 {width: 60px; height: 60px;}
    .container {width: 299px;  height: 300px; background-color: #f0f0f0;}
  </style>
</head>
<body>
  <div class="container">
    <div class="div1">盒1</div>
    <div class="div2">盒2</div>
    <div class="div3">盒3</div>
  </div>
</body>
</html>

写在父容器上的属性

1、flex-direction（排列）

.container {
    flex-direction:  row ;              /*水平排列（同float：left；）*/
                   row-reverse ;        /*水平排列（同float：right；）*/
                   column ;             /*垂直排列-顶部开始*/
                   column-reverse;      /*垂直排列-底部开始*/
}

flex-direction.jpg

2、flex-wrap（换行）

.container{
    flex-wrap: nowrap;          /*不换行*/
               wrap;            /*换行，第一行在顶部*/
               wrap-reverse;    /*换行，第一行在底部*/
}

flex-wrap.jpg

3、flex-flow

.container{
    flex-flow: <flex-direction>  <flex-wrap>;   /*怎么排列(row/column)   怎么换行(nowrap/wrap)*/
}

flex-flow.jpg

4、justify-content

.container{
    justify-content: flex-start;          /*左对齐（默认值） 类似flex-direction: row;*/
                     flex-end;            /*右对齐  类似flex-direction: row-reverse;*/
                     center;              /*居中*/
                     space-between;       /*两端对齐，项目之间的间隔都相等*/
                     space-around;        /*每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍*/   
                     space-evenly;        /*每个项目间隔相等。所以，项目之间的间隔与边框的间隔一样大*/                  
}

justify-content.jpg

5、align-items

.container{
    align-items: flex-start;      /*顶对齐*/
                 flex-end;        /*底对齐*/
                 center;          /*居中对齐*/
                 baseline;        /*项目的第一行文字的基线对齐*/
                 stretch;         /*（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。案例中没有给盒1和盒3高度*/       
}

align-items.jpg

6、align-content

这个属性是基于两条轴线的如果我的元素还是三个，没有出现换行的时候，此属性是没有效果的。增加三个盒子，然后给他们增加一个属性 flex-wrap: wrap就可以了。

.container{
    align-content: flex-start;      /*与交叉轴的起点对齐*/
                 flex-end;          /*与交叉轴的终点对齐*/
                 center;            /*与交叉轴的中点对齐*/
                 space-between;     /*与交叉轴两端对齐，轴线之间的间隔平均分布*/
                 space-around;      /*每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。*/
                 stretch;           /*（（默认值）：轴线占满整个交叉轴*/       
}

align-content.png

写在子元素上的属性

1、order

默认值是零，越小的数字排的学靠前；

.div2{
    order: 1;  /*在这里给div2的子元素增加了这个属性，它就会比其他的排列都靠后*/
}

在这里给div2的子元素增加了这个属性，它就会比其他的排列都靠后；盒5和盒2是都是 div2；

order.png

2、flex-grow

定义子元素的放大比例，默认为0，意思就是即使存在剩余空间，也不会放大；

.div2{
    flex-grow: 1;  /*拉伸剩余空间*/
}

flex-grow
如果所有子元素的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。
如果一个子元素的flex-grow属性为2，其他子元素都为1，则前者占据的剩余空间将比其他子元素多一倍。

flex-grow 2.jpg

3、flex-shrink

flex-shrink属性定义了子元素的缩小比例，默认为1，即如果空间不足，该子元素将缩小。

.container{
    width: 150px;  /*设置父元素的宽度为150px；*/
}
.div2{
   flex-shinrk: 0;  /*默认值为1，这里改成0，表示空间不足也不能压缩div2 ，盒1和盒3将会被压缩*/
}

flex-shink.png

4、flex-basis

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。

.div2{
    flex-basis: 100px;  /*当父元素存在多于空间，div2要占据100px空间；空间不足也按照100px空间来压缩*/
}

flex-basis.png

5、flex

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

.div2{
    flex: 0 1 100px;  /*即flex-grow: 0; flex-shrink: 1; flex-basis: 100px;*/
}

flex-grow和flex-shrink值为默认值，显示效果等同于basis: 100px;

6、

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

.div2{
    align-self: auto;        /*默认值*/
                flex-start;  /**/
                flex-end;    /**/
                center;      /**/
                baseline;    /*需要两个以上元素有此属性才有用*/
                stretch;     /*给盒2的去掉*/
}

align-self.jpg

以上为flex的基础知识，具体应用还要上手练习才能体会。

本文参考 Flex 布局教程：语法篇