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

更新日期: 2020-05-18 阅读次数: 175 字数: 545 分类: 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,加阴影。

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

领取618阿里云/腾讯云服务器优惠券

关于作者

我是来自山东烟台的一名开发者,喜欢瞎折腾,顺便记记笔记。有敢兴趣的话题,欢迎加微信 zhongwei 聊聊。 白天写程序,晚上哄熊孩子,可能回复有点慢,见谅。 查看更多联系方式

相关文章

爱评论不评论

近期节日

2020年06月11日 中国人口日
2020年06月20日 世界难民日
2020年06月21日 父亲节
2020年06月21日 夏至
2020年06月22日 中国儿童慈善活动日
2020年06月23日 国际奥林匹克日
2020年06月25日 全国土地日
2020年06月25日 端午节
2020年06月26日 国际禁毒日
2020年06月30日 世界青年联欢节
2020年07月01日 中国共产党诞生日
2020年07月01日 香港回归日
查看更多节日