🎶 Sym - 一款用 Java 实现的现代化社区(论坛/BBS/社交网络/博客)平台

📕 思源笔记 - 一款桌面端笔记应用,支持 Windows、Mac 和 Linux

🎸 Solo - B3log 分布式社区的博客端节点,欢迎加入下一代社区网络

♏ Vditor - 一款浏览器端的 Markdown 编辑器

使用 flexbox,创建一个 3 列布局,其中每列占据容器的 col-{n} / 12 比率

2018-12-27

回答

设置父容器为 display: flex,然后使用 flex 为每列提供与其比值相对应的 flex-grow 值。

<style lang="scss">
.row {
  display: flex;
  &__col {
    ...
    &--2 {
      flex: 2
    }
    &--7 {
      flex: 7
    }
    &--3 {
      flex: 3
    }
  }
}
</style>
<div class="row">
  <div class="row__col row__col--2"></div>
  <div class="row__col row__col--7"></div>
  <div class="row__col row__col--4"></div>
</div>

加分回答

  • 在使用过程中需注意浏览器兼容问题
  • 常见用法除了布局外还可以用于上下居中、左右居中、页面平铺等
  • 父容器
  • flex-direction:决定主轴的方向(row | row-reverse | column | column-reverse)
  • flex-wrap:轴线排列方式(nowrap | wrap | wrap-reverse)
  • flex-flow:是 flex-directionflex-wrap 的简写形式,默认值为 row nowrap
  • justify-content:主轴上的对齐方式(flex-start | flex-end | center | space-between | space-around)
  • align-items:交叉轴上的对齐方式(flex-start | flex-end | center | baseline | stretch)
  • align-content:多根轴线的对齐方式(flex-start | flex-end | center | space-between | space-around | stretch)
  • 子容器
  • order:排列顺序。数值越小,排列越靠前
  • flex-grow:子容器比例
  • flex-shrink:在父容器限制下,子容器缩小比例
  • flex-basis:父容器有多余空间时,子容器占据的主轴空间的大小
  • flex:flex-growflex-shrinkflex-basis 的简写,默认值为 0 1 auto
  • align-self:单个子容器在交叉轴上的对齐方式,可覆盖align-items属性

返回总目录

每天 30 秒


欢迎注册黑客派社区,开启你的博客之旅。让学习和分享成为一种习惯!

留下你的脚步