四种布局模式

块布局：呈现文档的布局模式
行内布局：呈现文本的布局模式
表格布局：用格子呈现2D数据的布局模式
布局定位：能够直接定位元素的布局模式，定位元素基本与其他元素没有任何关系

.box{
  display: flex;
}

基本概念

http://www.runoob.com/w3cnote/flex-grammar.html

这里写图片描述

flex-direction

主轴的方向，也就是横向排版
- ：row 从左向右
- ：row-reverse 从右向左
- ：column 从上往下
- ：column-reverse从下往上

flex-wrap

控制换行

nowrap
wrap
wrapreverse

flex-flow

是上面两个属性的综合

justify-content

就是类似于横向的文字排版，这个是在主轴上

flex-start 左对齐
flex-end 右对齐
center 居中
space-between 两端对齐
space-around 每两个元素之间的间距相等，是元素内边距的两倍

align-items

交叉轴感觉像y轴也就是竖着怎么排列吧

flex-start 最顶端
flex-end 最底端
center 中间，这个可以做文本居中，应该比较好
baseline 以第一个文本的基线（就是文字的底部）为准线
stretch 默认占整个高度

align-content

lign-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

flex-start
flex-end
center
space-between
space-around
stretch;

项目的属性

.item {
  order: <integer>;  //按顺序 从小到大 默认为 0
  flex-grow: <number>; /* default 0 放大比例  */  
  flex-shrink: <number>; /* default 1 缩小比例 */
  flex-basis: <length> | auto; /* default auto  在主轴上的初始化大小*/ 
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] // 简写
  align-self: auto | flex-start | flex-end | center | baseline | stretch; 
}

align-self
- align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
- 该属性可能取6个值，除了auto，其他都与align-items属性完全一致。

Flexbox布局，了解一下