flex 布局一行 N 个子元素的实现

更新日期: 2020-08-13 阅读次数: 12973 字数: 597 分类: CSS

例如,我想在微信小程序首页显示多个功能按钮,采用 flex 布局,一行3个按钮。每个按钮之间等间距。

效果如图所示:

flex 布局一行 N 个子元素的实现

测试代码:

HTML

<div class="container test1">
  <div class="box test2">
    <div class="content">title</div>
  </div>
  <div class="box test2">1</div>
  <div class="box test2">1</div>
  <div class="box test2">1</div>
  <div class="box test2">1</div>
  <div class="box test2">1</div>
  <div class="box test2">1</div>
</div>

CSS

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

.box {
  flex-basis: 30%;
  margin-top: 2.5%;
}

.content {
  padding: 1em;
}

.box:last-child {
  margin-bottom: 2.5%;
}

.test1 {
  background-color: blue;
  width: 300px;
}

.test2 {
  height: 80px;
  background: yellow;
}

flex-wrap

flex-wrap 的默认值是 nowrap,即不换行。

非常奇葩的是,flex-wrap 这个设置会覆盖掉 flex-basis 的设置。

无论你 flex-basis 设置成什么宽度,只要 flex-wrap 是 nowrap,所有子元素都会挤在一行。

flex 布局一行 N 个子元素的实现

所以,这里 flex-wrap 需要显示的设置成 wrap.

justify-content

这是一个有趣的设置

justify-content: space-evenly;

space-between 与 space-evenly 的区别:

  • space-evenly:evenly 是均匀的意思,均匀排列每个元素,每个元素之间的间隔相等
  • space-between:虽然也是元素等间隔分布,但是首尾元素是贴边的

flex-basis

这也是我第一次见到的 flex 属性。。。

其实我不明白 flex-basis 与 width 的区别,查了一下,网上都是长篇大论,没有一个我有耐心冲头到尾看完的。

说一下,我的实际测试结果,这个例子中,如果把 flex-basis 换成 width,实际上是完全可以的,显示效果完全一样。

但是根据文档所说,flex-basis 的默认值是 auto,对元素宽度的影响优先于 width,所以,flex 子元素最好使用 flex-basis。

还有一点非常重要,flex-basis 在 box-sizing 为 content box,而不是 border box 时,决定的是 content 的宽度。所以,一旦子元素增加了 border 以及 padding 之后,布局就会乱掉,原因就是子元素的实际宽度变成了 flex-basis + border + padding。

这里就引出了另外一个话题,如果想对子元素的外观做设置需要怎么办?

flex 子元素的样式

例如,我想在子元素上加 border,加阴影。

那么,最好是在子元素中再嵌套一层。参考示例代码中的第一个子元素。这样就不会影响到子元素的宽度。

如果最后一行元素想靠左排列呢

父级改成:

justify-content: space-between;

子元素在最后加上一个 height 为 0,padding 为 0,border 为 0 的元素。这样就能保证布局是左侧排列了。

微信关注我哦 👍

大象工具微信公众号

我是来自山东烟台的一名开发者,有感兴趣的话题,或者软件开发需求,欢迎加微信 zhongwei 聊聊, 查看更多联系方式