常用flex布局

1.实现三栏水平布局，其中left、right分别位于左右两侧，left宽度为100px，right宽度为100px，main处在中间，宽度自适应。

html

<div class="container">
    　　<div class="main">main</div>
    　　<div class="left">left</div>
    　　<div class="right">right</div>
  </div>

css

.container{
    display: flex;
    min-height: 130px;
  }
  .main{
    flex-grow: 1;
    background-color: blue;
  }
  .left{
    order: -1;
    flex-basis: 100px;
    background-color: green;
  }
  .right{
    flex-basis: 100px;
    background-color: red;
  }

2.如图布局（实现左上title最多两行超出省显示）