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

基本概念

参数
容器参数

项目参数

容器属性
flex-flow

对齐

多根轴线对齐

项目属性
Order序号-排列顺序

Flex

Align-self

实现布局
骰子布局

网格布局
均匀布局

百分比布局

圣杯布局HolyGrail

输入框布局

悬挂式布局

固定底栏布局

流式布局

转载链接：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 布局教程：实例篇

-