css flex经典三大布局：垂直居中，两列等高，自适应宽

用flex实现css里的三大经典布局，不需要额外很多代码。

1,垂直居中 ：子元素在父元素中，水平垂直居中。justify-content：center设置水平方向居中，align-center设置垂直方向居中。

<div id="parent">
    <div id="child"></div>
  </div>

#parent {
/* align-content和align-items必须配合使用 */
      display: flex;
      justify-content: center;
      align-content: center;
      align-items: center;
      width: 300px;
      height: 300px;
      outline: solid 1px;
    }
    #child {
      width: 100px;
      height: 100px;
      outline: solid 1px;
    }

 

2，二列等高：父元素里有二个子元素，一个设置高度，另一个需要和它高度一致。

 <div id="parent">
    <div id="child" style="height: 300px;"></div>
    <div id="child"></div>
  </div>

#parent {
      display: flex;
      justify-content: center;
      align-content: center;
/*  stretch让盒子内的每个元素的高度都等于行高 */
      align-items: stretch; 
      width: 300px;
    }
    #child {
      width: 100px;
      outline: solid 1px;
    }

 

3，自适应宽：父元素里有二个子元素，一个设置宽度，另外一个占据剩余的宽度。

<div id="parent">
    <div id="child1"></div>
    <div id="child2"></div>
  </div>

#parent {
      display: flex;
      width: 300px;
      height: 200px;
      background-color: pink;
    }
    #child1 {
      flex: 1;
      /* 即使设置100px宽，还是会占据剩余的所有宽度 */
      width: 100px;  
      background-color: lightblue;
    }
    #child2 {
      width: 100px;
      outline: solid 1px;
    }

 

转载于:https://www.cnblogs.com/easonw/p/10756507.html