# 常见flex布局

a.上下布局

父元素:display:flex;flex-direction:column;align-items:center;

b.等分布局

-n+2就是选择前面两个元素

<style>
    .box{
      display: flex;
      height: 150px;
      width: 800px;
    }
    .box span{
      height: 150px;
      flex:1;
      background:#ff9a9e;
    }
    .box span:nth-child(-n+2){
      border-right:1px solid #fff;
    }
   </style>
  <div class="box">
    <span>1</span>
    <span>2</span>
    <span>3</span>
  </div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20