CSS3弹性盒子

弹性盒模型的一些知识

一、简单介绍

  弹性盒模型（ Flexible Box或FlexBox）是一个CSS3新增布局模块，官方称为CSS Flexible Box Layout Module，用于实现容器里项目的对齐、方向、排序（即使在项目大小位置、动态生成的情况）, 分配空白空间 。弹性盒模型最大的特性在于，能够动态修改子元素的宽度和高度，以满足在不同尺寸屏幕下的恰当布局。

二、基本知识

  弹性盒子是由弹性容器（flex container）和弹性子元素（flex item）组成，弹性盒子有一个主轴（main axis）和一个纵轴（cross axis），弹性子元素沿着主轴依次排列 ，侧轴垂直于主轴。弹性容器的主轴开始（main start）、主轴结束（main end）和侧轴开始（cross start）、侧轴结束（cross end）代表了弹性子元素排列的起始和结束位置。具体可以看下面的图。

三、属性分类

1. 弹性容器的相关属性

属性	属性说明
flex-direction	设置主轴方向，确定弹性子元素的排列方式
flex-wrap	当弹性子元素超出弹性容器范围时是否换行
flex-flow	flex-direction和flex-wrap的快捷方式，复合属性
justify-content	设置弹性子元素主轴上的对齐方式
align-items	设置弹性子元素侧轴上的对齐方式
align-content	侧轴上有空白时且有多行时，设置弹性子元素侧轴的对齐方式

a. flex-direction属性

使用方法：flex-direction:row |row-reverse |column |column-reverse

属性值	含义
row（默认值）	主轴为水平方向。排序方向与页面的文档顺序相同。如果文档顺序是ltr，则排列顺序是从左到右；如果文档顺序是rtl，则排列顺序是从右到左。
row-reverse	主轴为水平方向。排序方向与页面的文档顺序相反。
column	主轴为垂直方向。排列顺序为从上到下
column-reverse	主轴为垂直方向。排列顺序为从下到上

其属性的效果图如下：

b. flex-wrap属性