flexbox案列解析简介github有一个项目叫solved-by-flexbox，本系列文章是对这个项目的中文翻译，有兴趣阅读英文的同学可以看english version，翻译不到之处请见谅。f
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宽度的时候是占满一行的，缩放浏览器可以看到效果。
栅格嵌套
栅格组件默认是可以无限嵌套的。
<div class="Grid Grid--gutters Grid--flexCells u-textCenter"><div class="Grid-cell"><div class="Demo"><div class="Grid Grid--gutters u-textCenter"><div class="Grid-cell u-1of3"><div class="Demo">1/3</div></div><div class="Grid-cell"><div class="Demo"><div class="Grid Grid--gutters u-textCenter"><div class="Grid-cell"><div class="Demo">1/2</div></div><div class="Grid-cell"><div class="Demo">1/2</div></div></div></div></div></div></div></div><div class="Grid-cell u-1of3"><div class="Demo">1/3</div></div></div>
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案列解析第一篇之更简单更好的栅格系统
