给萌新的Flexbox简易入门教程

转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。

【年末促销】葡萄城 2018 岁末福利火热放送中

近几年，CSS领域出现了一些复杂的专用布局工具，用以代替原有的诸如使用表格、浮动和绝对定位之类的各种变通方案。Flexbox，或者说是弹性盒子布局模块（Flexible Box Layout Module）是这些新布局工具中的第一个，接着是CSS网格布局模块（CSS Grid Layout Module）。我们会在本文给出一个易于理解的flexbox入门介绍。

随着CSS网格布局的引入，你可能会问flexbox布局是否真的还有必要。虽然它们所能做的事情有一些重叠，但其各自在CSS布局中有着非常特别的目的。一般来说，flexbox在一维场景（比如，一串类似的元素）下有最佳应用，而网格是二维场景下理想的布局方案（例如整个页面的元素）。

即便如此，flexbox仍可以用于整个页面的布局，这样它能为那些还不支持网格布局的浏览器提供合适的兼容处理。（必须承认，网格布局正在大多数现代浏览器中快速得到支持，不过对flexbox的支持仍然更为广泛，所以如果你想让你的布局在稍微老旧的浏览器中也生效，使用flexbox作为网格布局的降级方案是很容易的）。

flexbox的一些好处是：

• 页面元素能被任意方向地放置（靠左、靠右、从上往下甚至从下往上）

• 布局内容的可视顺序能够被反转或重排

• 元素大小能“弹性”适应可用空间，并根据容器或者兄弟元素进行相应地对齐

• 能轻松实现等列宽布局（与每一列里面的内容无关）

为了阐述其多样的属性和可能性，让我们假设下面有这样的布局用例：

  
    header content here
  
  
    
    
      main content here
    
          aside content here
    
  
  

首先，是把元素一起放进.main里，比如，