布局

多列内容固定分布

http://www.ruanyifeng.com/blo...
https://developer.mozilla.org...

1. 需求

三列内容固定宽度并排显示
280px 414px 56px

2. 知识点

弹性布局项目的flex属性设置

• flex-grow 定义项目放大比列，默认值0有剩余空间不放大

• flex-shrink 定义项目缩小比列，默认值1空间不足缩小

• flex-basis 设置项目在主轴的大小，默认值为auto跟width或height属性值一样(比如350px)

• flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

• 该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)

• 建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值

3. 代码

<div class="items">
  <div class="item item1">1111</div>
  <div class="item item2">2222</div>
  <div class="item item3">3</div>
</div>

<style lang="less">
  .items {
    display: flex;
    jusitfy-content: center;
    font-size: .48rem;
    .item1 {
      flex: 0 0 140px;
      padding-left: 12px;
      background-color: red;
    }
    .item2 {
      flex: 0 0 207px;
      background-color: green;
    }
    .item3 {
      flex: 0 0 28px;
      background-color: blue;
    }
  }
</style>

瀑布流

方法1: 插件

https://masonry.desandro.com/ 类似pinterest的布局模式

gutter、columnWidth

方法2: css column

方便，但是数据会被分成左右两列显示（数据不是按先后顺序排列的
）

column-count: 2;
column-width: 4.58666667rem;
column-gap: .18666667rem;