CSS3Flexbox布局一次搞懂讲义.doc

CSS3 Flexbox布局一次搞懂 1. 引言 希望可以通过可视化的方式帮助您了解Flexbox属性如何影响flex布局。 2. 正文 2.1 引入 Flexbox布局官方称为CSS Flexible Box Layout Module是一个CSS3新的布局模块，用于实现容器里项目的对齐、方向、排序（即使在项目大小位置、动态生成的情况）。flex容器最大的特性在于，能够修改子元素的宽度和高度，以满足在不同尺寸屏幕下的如意分布。 许多设计人员、开发人员发现flexbox布局方式使用简单，定位元素更加简单、复杂的布局更容易用较少的代码实现，大大地简化了开发流程。不像块状布局、内联布局那样基于竖直方向、水平方向，flexbox的布局算法基于方向。flexbox布局适用于小的应用组件、新的CSS Grid布局模块更适用于大量的布局。 本指南不解释flex属性如何工作，我们只是用可视化的方式展示flex属性如何影响布局。 2.2 基础 在具体描述flex属性之前，我们先来简要介绍下flexbox模型。flex布局由父容器（我们叫做flex container）和它的子元素（我们叫做flex items）组成。 INCLUDEPICTURE \d /large/7736/6958069281 \* MERGEFORMATINET  在上图所示的盒子里，你可以看到用来描述flex container和flex items的属性和术语，如果你想了解详细信息，请访问W3C的flexbox model官方文档. flexbox自2009的初次草案开始，已经经历了几次更新和语法修改，为了避免困惑、保证清晰，我们仅仅使用2014年9月最后一次工作草案中的语法。如果您想要实现旧浏览器的兼容，请访问这篇文章寻找最佳实践。 最近的flexbox规范浏览器支持情况如下： Chrome 29+ Firefox 28+ Internet Explorer 11+ Opera 17+ Safari 6.1+ (prefixed with -webkit-) Android 4.4+ iOS 7.1+ (prefixed with -webkit-) 您也可以到caniuse了解浏览器兼容情况详情。 本文中的用到的一些术语的表达约定如下 flex-container-弹性容器 flex-item-弹性子元素 main axis-主轴 cross axis-侧轴 2.3 使用 使用flexbox只需要在父元素上设置display属性即可。 INCLUDEPICTURE \d /large/7736/7845691995 \* MERGEFORMATINET  如果您想让它以内联方式显示，则 INCLUDEPICTURE \d /large/7737/6945004547 \* MERGEFORMATINET  注意：仅仅需要在父元素上设置这一个属性即可，它的子元素会自动变成flex items。 有很多方式分组flexbox的所有属性，我发现最容易理解的方式是分成两组，一组为弹性容器的属性，另一组为弹性子元素的属性，接下来我们按这种方式来一一解析。 2.4 弹性容器（Flex container）属性 2.4.1 flex-direction 该属性通过设置flex container主坐标轴方向影响子元素(flex item)如何在容器中排布。我们可以设置两个主要的方向水平和垂直方向。 可以接受的值有四个row、row-reverse、column、column-reverse，如下所示。 INCLUDEPICTURE \d /large/7742/5330894617 \* MERGEFORMATINET  弹性子元素将会按照自左向右的水平排列。 INCLUDEPICTURE \d /large/7738/6516498943 \* MERGEFORMATINET  INCLUDEPICTURE \d /large/7741/5473846935 \* MERGEFORMATINET  弹性子元素将会自右向左水平排列。 INCLUDEPICTURE \d /large/7743/3121650569 \* MERGEFORMATINET  INCLUDEPICTURE \d /large/7737/6992488583 \* MERGEFORMATINET  弹性子元素将自上而下竖直排列 INCLUDEPICTURE \d /large/7738/6546297626 \* MERGEFORMATINET  INCLUDEPICTURE \d /l