1.认识flex布局

flex布局是目前web开发中使用最多的布局方案：

flex布局（Flexible布局，弹性布局）
目前特别在移动端用的最多，目前PC端也使用越来越多了

两个重要的概念:

  开启了 flex 布局的元素叫 flex container
  flex container 里面的直接子元素叫 flex items

2.flex布局模型

main axis称为主轴：

主轴的开始位置叫main start
主轴的结束位置叫mian end
主轴的大小：main size

cross axis称为交叉轴：

 交叉轴的开始位置叫 cross start
 交叉轴的结束位置叫 cross end
 交叉轴的大小叫 cross size

3.flex相关的属性

应用在 flex container 上的CSS属性：

flex-direction

// direction 方向

// flex items 默认都是沿着main axis（主轴）从 main start 开始往 main end 方向排布

// flex-direction： row;  row： 沿着主轴从左到右

// flex-direction：row-reverse 反转 沿着主轴左右到左

// flex-direction: column 列 沿着主轴从上向下排

// flex-direction: column-reverse 反转列 沿着主轴从下向上排

jusify-content

jusify-content决定了 flex items 在 main axis 上的对齐方式
// flex-start（默认值）: 与 main start 对齐

// flex-end 与 main end 对齐

//  center 沿着主轴居中对齐

// space-between 各自item中间分开

// space-evenly 各自item中间等分开‘’

// space-around  让item边上的距离是中间的一半

alin-items

alin-content:

flex-warp:

flex-flow:

总结：

应用在 flex items 上的CSS属性：

order:

align-self:

flex-grow:

flex-shrink:

flex-basis:

flex: