【CSS】flex布局简介

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

.wbox {
  display: -webkit-flex; /* Safari */
  display: flex; /* other browser */
}

1. 使用 flex 布局的元素通常有称为  FLex容器 (flex container)  其下的子元素皆自动成为 flex项目 (flex item)

2. flex 有六个属性 　*主轴：左右 *交叉轴：上下 

    2.1 flex-direction 决定主轴的方向  args: row | row-reverser | column | column-reverser

    2.2 flex-wrap 是否换行 args: nowrap | wrap | wrap-reserver

    2.3 justify-content 主轴上的对齐方式  args: flex-start | flex-end | center | space-between | space-around

    2.4 align-items 决定交叉轴的对齐方式 args: flex-start | flex-end | center | baseline | stretch

    2.5 align-content 定义多条轴线的对齐方式 args: flex-start | flex-end | center | space-between | space-around | stretch (*该属性对单一轴项目不起作用)

    2.6 flex-flow 是flex-direction 和 flex-wrap 的简写 默认值为 row nowrap

3. flex项目(flex item) 可用的属性 

    3.1 order 定义项目的排列顺序。数值越小，排列越靠前 ,默认为 0

    3.2 flex-grow 放大比例 默认为 0

    3.3 flex-shrink 缩小比列 默认为 1

    3.4 flex-basis 主轴的默认大小

    3.5 flex 是 flex-grow,flex-shrink,flex-basis 的缩写 默认值为 0 1 auto (后面两个可选)

    3.6 align-self  子项目采用独立的对齐方式 args : auto | flex-start | flex-end | center | baseline | stretch (* 默认继承 )