Flex布局display：(-webkit-)flex;

转载链接：Flex 布局教程：语法篇
转载链接：Flex 布局教程：实例篇

基本概念

Flex容器：设置为Flex布局的元素。
Flex项目：容器中包含的子元素。

参数

容器参数：

主轴main axis（始main start//终main end）
交叉轴cross axis（始cross start//终cross end）

项目参数：

宽main size
高cross size

容器属性

flex-flow:

①主轴方向flex-direction（row/row-reverse/column/column-reverse）
②换行方式flex-wrap(nowrap/wrap/wrap-reverse)

对齐

①项目在主轴的对齐方式：justify-content（flex-start/flex-end/center/space-between/space-around）
②项目在交叉轴的对齐方式：align-items(flex-start/flex-end/center/stretch/baseline)

多根轴线对齐

align-content:flex-start/flex-end/center/stretch/space-between/space-around

项目属性

Order:序号-排列顺序

Flex：

①flex-grow
②flex-shrink
③flex-basis
(2/3可选)默认（0 1 auto）

Align-self

单个项目的对齐方式
auto-默认继承父元素
stretch-无父元素时默认拉伸
space-between/space-around/center/flex-start/flex-end

实现布局

骰子布局

row，item，column

网格布局

均匀布局

百分比布局

grid，gridcell

圣杯布局HolyGrail

header,body,footer,holyGrail-content,holyGrail-nav,holyGrail-ads

输入框布局

inputAddOn，inputAddOn-item，inputAddOn-field

悬挂式布局

media，midia-figure,media-body

固定底栏布局

site，header，main(site-content) , footer

流式布局

parent，child

转载链接：Flex 布局教程：语法篇
转载链接：Flex 布局教程：实例篇

-