使用 Flexbox 实现一个网格系统

GeolageWu 2019-06-25

1. 一行的元素平分整行宽度

<div class="columns">
    <div class="column">
      <div class="box">Hello World</div>
    </div>
    <div class="column">
      <div class="box">Hello World</div>
    </div>
    <div class="column">
      <div class="box">Hello World</div>
    </div>
  </div>
.box {
  padding: 20px;
  border: 1px solid #ddd;
}

.columns{
  display: flex;
}

.column {
  flex: 1
}

最重要的一点是给这一行的父元素(columns)的直接子元素(column)设置flex: 1。这样元素才会平分整行空间,否则就只会占据元素本身的大小,挤在一起。

2. 指定元素占据一定的宽度

这里我们按照常用的12列网格系统来计算。那么我们有以下几个需求:

  1. 指定元素占据的列数
  2. 当总的列数加起来超过12时,自动切换到下一行
<div class="columns is-multiline">
    <div class="column is-6">
      <div class="box">Hello World</div>
    </div>
    <div class="column is-6">
      <div class="box">Hello World</div>
    </div>
    <div class="column is-2">
      <div class="box">Hello World</div>
    </div>
    <div class="column is-10">
      <div class="box">Hello World</div>
    </div>
  </div>
.columns{
  display: flex;
}
.columns.is-multiline{
  flex-wrap: wrap;
}

.column {
  flex: 1
}

.column.is-6 {
  width: 50%;
  flex: none;
}

.column.is-2{
  width: 16.66667%;
  flex: none;
}

.column.is-10 {
  width: 83.333%;
  flex:none;
}

这里的重点是给column一个辅助类is-*, is-*的定义一方面通过百分比指定了宽度,另一方面重要的是设置了flex:none,否则元素就还是会采用平分宽度的方法而非指定。

第二点是给了columns一个辅助类is-multilineis-multiline的作用是设置了flex-wrap: wrap。如果没有这个属性,超出12列的宽度之后,这些列就不会向下走,而是再向右延伸。

3. 元素占据原本的宽度

<div class="columns">
    <div class="column is-narrow">
      <div class="box">Hello World</div>
    </div>
    <div class="column">
      <div class="box">Hello World</div>
    </div>
    <div class="column is-narrow">
      <div class="box">Hello World</div>
    </div>
  </div>
.columns{
  display: flex;
}

.column {
  flex: 1
}

.column.is-narrow{
  flex:none;
}

这里我们给希望只占据元素本来的宽度的column一个辅助类is-narrow。它设置了flex:none这个属性,否则的元三个元素就会平分整行的宽度。添加is-narrow类,前后两个元素就占据本来的宽度,而中间那个元素就会占据剩余的宽度。

参考

Laracasts

相关推荐