flex布局

子元素盒子居中,flex属性加在父元素身上，而不是自身

    <div class="imgBox">
      <img src="" alt="" style="width: 100px; height: 100px" />
      <div style="margin: 0 0 0 10px">取代float</div>
    </div>
    <div class="box">
      <div>胜多负少</div>
    </div>

  .imgBox {
    display: flex;
    /* justify-content: center; 水平居中 也可以居左/居右 */
    align-items: center; /* 垂直居中 */
  }
  .box {
    display: flex;
    width: 100px;
    height: 100px;
    background-color: pink;
    margin-top: 10px;
    justify-content: center;
    align-items: center;
  }

  .box {
    display: flex;
    width: 100px;
    height: 100px;
    background-color: pink;
    margin-top: 10px;
    justify-content: right; /*盒子内的div文字 “胜多负少” 水平居中 也可以居左 justify-content: left;/居右     justify-content: right;*/
    align-items: center;
  }

均分（这种均分间距不会自动隔开）

    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>

  ul {
    display: flex;
    width: 500px;
    background-color: red;
    text-align: center;
  }
  li {
    flex: 1;
    background: pink;
  }
  li:not(:last-child) {
    margin-right: 6px;
  }

按比例自适应完全按比例-横向  

    <div class="box3">
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </div>

  .box3{width: 400px;display:-webkit-flex;flex-direction:row;}
  .box3 div:nth-of-type(1){flex:1;background-color:red;}
  .box3 div:nth-of-type(2){flex:2;background-color:pink;}
  .box3 div:nth-of-type(3){flex:3;background-color:orange;}

 

自身居中并且左右散开 就像float 一样 左边 left 右边 right (还可以多个均分间距都是均匀的，例如四个元素)

    display: flex;
    align-items: center;
    justify-content: space-between;

 

左中右布局

    <div class="box">
      <div class="left">我是左边</div>
      <div class="center">我是中间</div>
      <div class="right">我是右边</div>
    </div>


.box {
  display: flex;
  text-align: center;
}
.left {
  width: 300px;
  background: red;
}
.center {
  flex: 1;
  background: pink;
}
.right {
  width: 200px;
  background: #f40;
}

 换行

 flex-flow: wrap;

通过 flex-direction: row-reverse X轴反方向及 flex-flow: wrap 换行 处理聊天框样式

    <ul>
      <li style="margin-top: 20rpx; margin-left: 20rpx">
        <div
          style="
            flex-direction: row-reverse;
            display: flex;
            flex-wrap: wrap;
            margin-right: 25rpx;
          "
        >
          <div
            style="
              background-color: #67cafe;
              padding: 10rpx;
              border-radius: 15rpx;
              color: #fff;
            "
          >
            提问示例
          </div>
        </div>
        <div style="display: flex; flex-wrap: wrap; margin-right: 50rpx">
          <div
            style="
              background-color: #efefef;
              padding: 10rpx;
              margin-top: 20rpx;
              border-radius: 15rpx;
            "
          >
            生成中...
          </div>
        </div>
      </li>
    </ul>