使用 Flexbox 实现一个网格系统

seasonley 发布于2019-08-30 13:46 / 3116人阅读

摘要：一行的元素平分整行宽度最重要的一点是给这一行的父元素的直接子元素设置。指定元素占据一定的宽度这里我们按照常用的列网格系统来计算。第二点是给了一个辅助类。添加类，前后两个元素就占据本来的宽度，而中间那个元素就会占据剩余的宽度。

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

  
    
      Hello World
    
    
      Hello World
    
    
      Hello World

.box {
  padding: 20px;
  border: 1px solid #ffffd;
}

.columns{
  display: flex;
}

.column {
  flex: 1
}

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

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

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

指定元素占据的列数

当总的列数加起来超过12时，自动切换到下一行

  
    
      Hello World
    
    
      Hello World
    
    
      Hello World
    
    
      Hello World

.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-multiline。is-multiline的作用是设置了flex-wrap: wrap。如果没有这个属性，超出12列的宽度之后，这些列就不会向下走，而是再向右延伸。

3. 元素占据原本的宽度

  
    
      Hello World
    
    
      Hello World
    
    
      Hello World

.columns{
  display: flex;
}

.column {
  flex: 1
}

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

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

参考

Laracasts

GPU云服务器云服务器实现一个webrtc flexbox java实现一个线程 FlexBox详解

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115536.html

Flexbox 很棒，但有些情况不适用

摘要：其设计初衷并不是完备的网格系统。所以禁止将其作为一个完整的网格系统使用。但猫有四条腿，而人类只有两条。总而言之，还是很棒的真的很有用。对大部分的人来说（如果你写过CSS），Flexbox 可以说是完美，但它是否适合所有场景呢？简而言之，我会给出几种可用的场景，需要你重新思考 Flexbox 模型的使用。顺便说一句，本人是 Flexbox 的忠实粉丝，曾写过一篇 Flexbox 详...

wums 2019-08-29 18:38 评论0 收藏0
[译]CSS Grid, Flexbox 和 Box Alignment:网页布局的新系统

摘要：原文标题原文链接在网页上布局是很费劲的。的新值和都是属性的新值。再一次，很明显地看到，布局有一些默认的行为。在网格布局中我们可以看到相同的效果。在这种情况下，容器的高度由项的最大高度决定。我们可以将项按照列摆放而不是行。原文标题：CSS Grid, Flexbox And Box Alignment: Our New System For Web Layout 原文链接：https...

Alan 2019-08-29 11:32 评论0 收藏0
CSS Grid 系列(上)-Grid布局完整指南

摘要：浏览器已经宣布将支持标准的语法，但暂未支持。重复网格区域的名称导致内容扩展到这些单元格。点号表示一个空单元格。中间一行将由两个区域一个空单元格和一个区域组成。只要这些点号之间没有空格，他们就代表了一个单一的单元格。 by Chris House 译者：若愚老师想要更好的阅读体验可在饥人谷技术博客查看原文 CSS 网格布局(Grid Layout) 是CSS中最强大的布局系统。这是一...

yy13818512006 2019-08-29 14:16 评论0 收藏0
你不需要基于 CSS Grid 的栅格布局系统

摘要：在过去的几个星期里，我开始看到基于的布局框架和栅格系统的出现。你可能倾向于明确给出所有元素的位置，或是尽可能依赖于自动布局。 showImg(https://segmentfault.com/img/remote/1460000010188997); 在过去的几个星期里，我开始看到基于 CSS Grid 的布局框架和栅格系统的出现。我们惊讶它为什么出现的这么晚。但除了使用 CSS Gr...

anonymoussf 2019-08-01 17:20 评论0 收藏0