flexbox案列解析第一篇之更简单更好的栅格系统-CSDN博客

flexbox案列解析简介

github有一个项目叫solved-by-flexbox，本系列文章是对这个项目的中文翻译，有兴趣阅读英文的同学可以看english version，翻译不到之处请见谅。

flexbox由来

以前，css一直以来都缺少好用的布局机制。动画，css过度，过滤都是css中很强大的功能，但是它们并不能很好解决css布局问题，这个问题经常被web开发者抱怨，而且这种情况还将持续，直到flexbox诞生，这个问题才算是解决了。

这个系列的目的是讲解一些单纯使用css很难解决，使用flexbox却很简单解决的案列集合，flexbox目前的兼容性还不是很好，可以访问caniuse查看flebox的兼容性。

本文是这个系列的第一篇 —— 使用flexbox设计栅格系统。

更好，更简单的栅格系统

目前大部分的栅格系统都使用float和inline-block两种布局方法，但是这两个css属性并不是专门为解决前端布局问题而开发出来的，所以就导致了目前css布局的一系列非常严重的问题和限制。

使用float的问题

使用float需要清除浮动导致了一大堆的布局问题，其中最著名的问题之一是清除一个html元素的浮动导致它出现在它不该出现的页面位置（参考这个bootstrap issue）。

另外清除浮动经常需要使用::before和::after伪元素，导致不能使用这两个伪元素用于其他用途

使用inline-block的问题

内联布局最著名的问题是内联元素之间的空白，而且这个问题的所有解决方案都太过复杂和烦人。

flexbox的出现解决上述的所有问题，它的出现为前端开发打开了新世界的大门。

flexbox栅格系统的特性

通常栅格系统的栅格数有无数的选择（比如bootstrap使用12格），但是大多数的时间使用者可能只需要一个2列或者3列的栅格系统既然这样，为什么我们要把栅格类（原文是sizing class，比如bootstrap的col-md-12）添加到每一个列上面。

下面这个表列举出了一个理想的栅格系统的标准，幸运的是flexbox满足下面大部分的标准

每一个栅格元素默认有同样的宽度和高度，它们的默认size都是auto
为了更好的控制布局，你可以给每一个单独的栅格元素添加css类，不添加的话，所有的元素默认平分可用空间
为了实现响应式布局，你可以给栅格元素的类使用media query
每一个栅格元素可以在垂直方向上对齐到top,bottom,middle
当你想要所有的栅格元素拥有相同的大小和对齐方式时，你可以在容器元素上添加css属性实现，不需要在所有子元素上重复添加
栅格系统可以无限嵌套

基础的栅格系统

下面的示例没有指定元素的宽度，它们自然的平分每一行的空间并撑满每一个行，而且高度都是相同的。

高级栅格系统

如果你不想所有的元素拥有相同的宽度，你可以给每个元素添加相应的flexbox css属性，没有添加和上面的基础栅格系统一样继续平分剩余空间

下面内容为auto的元素都是没有添加特定flebox css属性的元素。

响应式栅格

通过给栅格容器或者元素添加对应的css媒体查询类，就能实现响应式栅格系统。当满足特定媒体条件时，对应的css类就会自动生效

下面的元素在低于48em宽度的时候是占满一行的，缩放浏览器可以看到效果。

栅格嵌套

栅格组件默认是可以无限嵌套的。

flexbox栅格对齐特性

顶端对齐

底部对齐

垂直居中对齐

混合对齐

html示例代码

<div class="Grid">
  <div class="Grid-cell">…</div>
  <div class="Grid-cell">…</div>
  <div class="Grid-cell">…</div>
</div>

css示例代码

基础栅格

.Grid {
  display: flex;
}

.Grid-cell {
  flex: 1;
}

flexbox css属性

/* With gutters */
.Grid--gutters {
  margin: -1em 0 0 -1em;
}
.Grid--gutters > .Grid-cell {
  padding: 1em 0 0 1em;
}

/* Alignment per row */
.Grid--top {
  align-items: flex-start;
}
.Grid--bottom {
  align-items: flex-end;
}
.Grid--center {
  align-items: center;
}

/* Alignment per cell */
.Grid-cell--top {
  align-self: flex-start;
}
.Grid-cell--bottom {
  align-self: flex-end;
}
.Grid-cell--center {
  align-self: center;
}

响应式（移动优先）

/* Base classes for all media */
.Grid--fit > .Grid-cell {
  flex: 1;
}
.Grid--full > .Grid-cell {
  flex: 0 0 100%;
}
.Grid--1of2 > .Grid-cell {
  flex: 0 0 50%
}
.Grid--1of3 > .Grid-cell {
  flex: 0 0 33.3333%
}
.Grid--1of4 > .Grid-cell {
  flex: 0 0 25%
}

/* Small to medium screens */
@media (min-width: 24em) {
  .small-Grid--fit > .Grid-cell {
    flex: 1;
  }
  .small-Grid--full > .Grid-cell {
    flex: 0 0 100%;
  }
  .small-Grid--1of2 > .Grid-cell {
    flex: 0 0 50%
  }
  .small-Grid--1of3 > .Grid-cell {
    flex: 0 0 33.3333%
  }
  .small-Grid--1of4 > .Grid-cell {
    flex: 0 0 25%
  }
}

/* Large screens */
@media (min-width: 48em) {
  .large-Grid--fit > .Grid-cell {
    flex: 1;
  }
  .large-Grid--full > .Grid-cell {
    flex: 0 0 100%;
  }
  .large-Grid--1of2 > .Grid-cell {
    flex: 0 0 50%
  }
  .large-Grid--1of3 > .Grid-cell {
    flex: 0 0 33.3333%
  }
  .large-Grid--1of4 > .Grid-cell {
    flex: 0 0 25%
  }
}

这个案列中用到的css的github源码地址： source

转载请保留本文地址：flexbox案列解析第一篇之更简单更好的栅格系统

转载于:https://my.oschina.net/ideras/blog/718032