几种常用flex布局

1. 一左一右布局

<div class="box">
  <div class=“item”></div>
  <div class="item item2"></div>
</div>

.box{
  display:flex;
  flex-flow:row nowrap;
  justify-content:space-between;
}
.item{
  width:100px;
  height:100px;
  background:pink;
}
.item2{
  background:coral;
}

一左一右

2. footer居底部，不受内容高度影响

<div class="box">
  <header></header>
  <div class="main"></div>
  <footer></footer>
</div>

.box{
  display:flex;
  min-height:100vh;
  flex-direction:column;
}
main{
  flex:1;
}

footer居底部，不随中间内容高度影响

3. 绝对居中

html,body{
  height:100%;
}
.box{
 display:flex;
 align-items:center;
 justify-content:center;
}
.box-con{
 width:100px; // 可不写，只是为了方便看效果
 height:100px; // 可不写，只是为了方便看效果
 background:#fff;
}

不写宽高，水平垂直居中

4. 最便携垂直水平居中

.box {
      width: 500px;
      height: 500px;
      background: pink;
      display: flex;
}
        
 .con {
     width: 40px;
     height: 40px;
     margin: auto;
     border: 1px solid #fff;
}

<div class="box">
     <div class="con"></div>
</div>

最便携垂直水平居中

5. 绝对定位水平垂直居中

方法一：
// 绝对定位的自动伸缩性特性
.box{ // 推荐
  position:absolute;
  top:0;
  left:0;
  bottom:0;
  right:0;
  margin:auto;
}
方法二：
.box2{ // 不推荐
  position:absolute;
  top:50%;
  left:50%;
  margin:-50px 0  0 -50px; //margin-top:设为height的一半取负，margin-left:设为width的一半取负
  width:100px;
  height:100px;
}
注意：
1. 方法二 中left和right的值不能超过其相对元素width减去它自身width的一半，否则绝对定位元素会优先取left的值进行定位（文档流从左到右渲染），但top和bottom就没有这个限制。
2. 方法二如果长宽改了，margin-top、margin-left就要进行相应的换算
故推荐方法一

6. 一行平均排列

<div class="box">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>
.box{
 display:flex;
 justify-content:space-around;
}
.item{
  flex:1;
  height:40px;
  margin-right:20px;
  border:1px solid red;
  &:last-child{
    margin-right:0;  
  }
}

平均排列

7. 多列布局

.item{
    display:flex;
    flex-wrap:wrap; // 换行
    flex-direction:row // 主轴排列方向，起点在左端
}
.child{
    width:200px;
    border:1px solid red;
    height:60px;
    margin:0 20px 20px 0;
}
<div class="item">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>

响应式多列布局

8. 不知宽高图片垂直水平居中

.main{
       display:table-cell;
        vertical-align: middle;
        text-align: center;
        overflow:hidden;
}
<div class="main">
<img src="">
</div>