Benjamin - 专注前端开发和用户体验

Flexbox#2:基于Flexbox的自适应网格布局

深入CSS属性系列 Benjamin 3472℃ 0评论

在上一节,通过骰子的实例介绍了,justify-content,align-items,flex-direction,align-self等属性的使用,在本节通过一个12列布局的例子介绍flex-grow,flex-shirnk,flex-basis属性的使用。

如果你用过CSS预处理器,那么一定知道网格布局,网格布局中日常开发中出现场景还是比较频繁的,关于网格布局的相关知识可以参考各类CSS框架。

在本文使用flexbox的相关属性来实现12列自适应网格布局。

一、实现1,2,3,4,6,12等份

.row {
  display: flex;
  box-sizing: border-box;
}

.column {
  margin: 10px;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
  box-sizing: border-box;
}
<section class="row">
  <div class="column">One</div>
</section>
<section class="row">
  <div class="column">One Half</div>
  <div class="column">One Half</div>
</section>
<section class="row">
  <div class="column">One Third</div>
  <div class="column">One Third</div>
  <div class="column">One Third</div>
</section>
<section class="row">
  <div class="column">One Fourth</div>
  <div class="column">One Fourth</div>
  <div class="column">One Fourth</div>
  <div class="column">One Fourth</div>
</section>
<section class="row">
  <div class="column">One Sixth</div>
  <div class="column">One Sixth</div>
  <div class="column">One Sixth</div>
  <div class="column">One Sixth</div>
  <div class="column">One Sixth</div>
  <div class="column">One Sixth</div>
</section>
<section class="row">
  <div class="column">One Twelve</div>
  <div class="column">One Twelve</div>
  <div class="column">One Twelve</div>
  <div class="column">One Twelve</div>
  <div class="column">One Twelve</div>
  <div class="column">One Twelve</div>
  <div class="column">One Twelve</div>
  <div class="column">One Twelve</div>
  <div class="column">One Twelve</div>
  <div class="column">One Twelve</div>
  <div class="column">One Twelve</div>
  <div class="column">One Twelve</div>
</section>

one-twelve

在本例中用到了flex-grow,flex-shrink,flex-basis三个属性。
1. flex-grow:根据需要用来定义伸缩项目的扩展能力。它接受一个不带单位的值做为一个比例。主要用来决定伸缩容器剩余空间按比例应扩展多少空间。
如果所有伸缩项目的“flex-grow”设置了“1”,那么每个伸缩项目将设置为一个大小相等的剩余空间。如果你给其中一个伸缩项目设置了“flex-grow”值为“2”,那么这个伸缩项目所占的剩余空间是其他伸缩项目所占剩余空间的两倍。负值无效。
2. flex-shrink:根据需要用来定义伸缩项目收缩的能力。负值同样无效。
3. flex-basis: 用来设置伸缩基准值,剩余的空间按比率进行伸缩,不支持负值。如果设置为0,围绕内容的额外的空间不会考虑在内。如果设置为auto,额外的空间是基于flex-grow的值分配。。看这个图像
更详细的了解flex-grow,flex-shrink,flex-basis。或者下面的参考链接。

二、实现2-3-7布局

.row237 .column:first-of-type {
  flex-grow: 2;
  flex-basis: 5px;
}
.row237 .column:nth-of-type(2) {
  flex-grow: 3;
  flex-basis: 18px;
}
.row237 .column:nth-of-type(3) {
  flex-grow: 7;
  flex-basis: 70.5px;
}
<section class="row row237">
  <div class="column">One Half</div>
  <div class="column">One Third</div>
  <div class="column">One Seventh</div>
</section>

此处各项flex-basis的值的计算,应该有个公式(待解决),如果有这个公式,配合sass,less等预处理语言实现多列自适应布局将会很方便。最后附上demo

三、参考链接

1. A Complete Guide to Flexbox
2. Crafting Twelve-Column Layouts with Flexbox

喜欢 (1)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址