简介

弹性布局和块状布局有点类似，但是块状布局中很多复杂的属性不能使用，像float、columns。

弹性布局有以下特点

可以沿任意方向布局
可以有自己的显示顺序
可以沿单一主轴布局，也可以有多个副轴
可以通过剩余空间分配大小
可以对齐，也可以有独立对齐
可以动态折叠或展开

弹性容器

display的值设置成 flex 或 inline-flex 会创建弹性格式化上下文（flex formatting context），和块级格式化上下文（block formatting context）类似，只不过弹性容器内部是弹性布局。

弹性布局中不能使用以下块状布局的属性：

float 和 clear 并不会创建或者清除浮动，也不会脱离文档流
vertical-align 对弹性项目无效
::first-line ::first-letter 伪元素无效
多栏布局模的 column-* 属性对弹性项目无效。

弹性项目

大致上来说，弹性子项（flex item）就是弹性容器的内容。

弹性容器中每个孩子变成了一个弹性项目,连续的文本也会被当成一个匿名弹性项目。只有空白文本的节点会被忽略。

<div style="display:flex">

    <!-- flex item: block child -->
    <div id="item1">block</div>

    <!-- flex item: floated element; floating is ignored -->
    <div id="item2" style="float: left;">float</div>

    <!-- flex item: anonymous block box around inline content -->
    anonymous item 3

    <!-- flex item: inline child -->
    <span>
        item 4
        <!-- flex items do not split around blocks -->
        <q style="display: block" id=not-an-item>item 4</q>
        item 4
    </span>
</div>

绝对定位

由于脱离文档流，绝对定位不会参与弹性布局，margin: auto会被当成0，而不是使定位元素居中

Margins and Paddings

margins不会被合并。

百分比的值将根据父元素的宽度计算。

margin: auto 会吸收的容器的剩余空间来扩张。这可以用于对齐，或将相邻的弹性项目分开。

z-index

弹性项目的绘制和inline blocks一致，但会创建堆叠上下文（stacking context ），即使 position: static 也会创建堆叠上下文。

折叠

声明了 visibility:collapse 的弹性项目会类似于表格一样，被完全删除。

目前的浏览器应该没有实现这一规范，规范中的案例也没有使用visibility:collapse,而是用visibility:hidden; height:0做了个示范。

预设最小尺寸

使用 min-heigth min-width 定义最小尺寸，现已经定义CSS Sizing module.。

方向与顺序

方向 flex-direction

一般情况下，布局的主轴是水平方向，从左到右，副轴是垂直方向，从上到下。但是在弹性布局中，布局方向可以被flex-direction改变。

{
  /* 
    默认值 row， 布局方向与当前写作模式（writing mode）一致，
    如果写作模式不改变，方向为从左到右，从上到下
    写作模式由 direction，writing-mode，text-orientation决定。
  */
  flex-direction: row;
  /* 
    布局方向与row一样， 但是主轴方向反转
    如果写作模式不改变，方向为从右到左，从上到下
  */
  flex-direction: row-reverse;
  /* 
    主轴与副轴交换，
    如果写作模式不改变，方向为从上到下，从左到右
  */
  flex-direction: column;
  /* 
    布局方向与column一样， 但是主轴方向反转
    如果写作模式不改变，方向为从下到上，从左到右
  */
  flex-direction: column-reverse;
  
  /* 
    可以通过 flex-wrap: wrap-reverse; 改变副轴方向
  */
  flex-direction: row-reverse;
  flex-wrap: wrap-reverse;
}

换行 flex-wrap

flex决定了弹性盒子是否换行。

{
  flex-wrap: nowrap;        /* 默认值，不换行 */
  flex-wrap: wrap;	    /* 换行 */
  flex-wrap: wrap-reverse;  /* 换行 且 改变副轴方向 */
}

简写 flex-flow

{
  flex-flow:  <flex-direction> <flex-wrap>;
  flex-flow:  <flex-direction>; /* flex-wrap 不声明默认不换行  */
}

排序 order

{
  order: 0 /* 整数，默认值为0，order小的值排在前面 */
}

空间大小

介绍下正剩余空间（positive free space）和负剩余空间（negative free space）

正剩余空间，盒子减去弹性项目的剩余空间（这里偷下MDN的图）

负剩余空间，弹性项目溢出盒子的剩余空间

基础 flex-basis

flex-basis 在任何空间分配发生之前初始化项目的尺寸。

在flex中省略flex-basis ,flex-basis 的值为0。

{
  /* 
    默认值auto，会使用项目本身的width。
    如果width为auto,flex-basis 会使用content
  */
  flex-basis: auto;
  /* 根据内容的大小，新属性，兼容性不好 */
  flex-basis: content;
  /* width可以填的值 */
  flex-basis: <width>;
}

拉伸 flex-grow

flex-grow 决定了项目占据正剩余空间的比例。

如果你所有的flex子元素设置了相同的flex-grow属性值，那么空间将会在flex子元素之间平均分配

{
  flex-grow: 1; /* 数值，默认值0 负数无效*/
}

收缩 flex-thrink

flex-thrink 决定了项目占据负剩余空间的比例。

{
  flex-thrink: 1; /* 数值，默认值1 负数无效 */
}

flex 简写

flex 是 flex-grow、flex-shrink、flex-basis 简写。默认值 0 1 auto。

在flex中省略flex-basis ,flex-basis 的值为0。

{
  flex: <flex-grow> <flex-shrink> <flex-basis>;
  flex: none; /* 相当于 0 0 auto */
}

对齐

margin: auto

在flex中，margin: auto 会吸收正剩余空间，是弹性项目达到垂直水平居中。

margin: auto 优先级高于 justify-content、align-items、align-self。

主轴方向对齐 justify-content

justify-content决定弹性项目沿主轴方向的对齐方式。

.flex-item{
  justify-content: flex-start; /* 默认值,左对齐 */
  justify-content: flex-end; /* 右对齐 */
  justify-content: center; /* 居中 */
  justify-content: space-between; /* 剩余空间分配在项目内侧 */
  justify-content: space-around;  /* 剩余空间包裹项目 */
}

副轴方向对齐 align-items&align-self

align-items&align-self 决定每行中的弹性项目沿副轴方向的对齐方式。

align-items是父盒子使用，对弹性项目生效（flex box）

align-self 是在弹性项目上使用，对自身生效（flex item）

.flex-box{
    align-item: auto; /* 规范默认值，支持率低, 使用父盒子的值 */
    align-item: flex-start; /* 大部分浏览器默认值 */
    align-item: flex-end;
    align-item: center;
    align-item: baseline;
    align-item: space-between;
    align-item: space-around;
    align-item: stretch /* 拉伸 */
}

行对齐 align-content

align-content 决定主轴在副轴方向的对齐方式。与align-items&align-self不同的是：

align-content决定是行沿副轴方向的对齐方式。

align-items决定是行中弹性元素沿副轴方向的对齐方式。

.flex-box{
    align-content: stretch; /* 默认值 */
    align-content: flex-start; 
    align-content: flex-end;
    align-content: center;
    align-content: space-between;
    align-content: space-around;
}

所有的css3特性都会更新在这里总集篇

css3新特性--Flexible Box Layout Module

简介