flex布局

[MAJIANYANG666]

flex之前

我们用什么布局
主要使用（5种）：

• normal flow
• float+flow
• position relative+absolute
• dispaly inline-block
• 负margin

基本概念

主轴main axis主尺寸main size主轴起点main start主轴终点main end
侧轴cross axis侧尺寸cross size侧轴起点cross start侧轴终点cross end

flex来了

一种新的布局方式——Flex布局

1. 块级布局侧重垂直方向，行内布局侧重水平方向，flex布局是与方向无关的
2. flex布局可以实现空间自动分配，自动对齐（flexible:弹性，灵活）
3. flex适用于简单的线性布局，更复杂的布局要交给grid布局（还没发布）

flex container的属性

• flex-direction方向
  flex-direction:low/column/low-reverse/column-reverse
• flex-wrap换行
  flex-wrap:warp/nowarp
• flex-flow上面两个的简写
• jusitify-content主轴方向对齐方式
  jusitify-content:space-between/space-around/flex-start/flex-end/center
• align-items侧轴对齐方式
  align-items:strech/baseline/flex-start/flex-end/center
• align-content多行列内容对齐方式
  align-content:strech/space-between/space-around/flex-start/flex-end/center

flex item的属性

• flex-grow增长比例（空间过多时）
  flex-grow:1
• flex-shrink收缩比例(空间不够时）
  flex-shrink:1
• flex-basis默认大小（一般不用）
  flex-basis:100px
• flex上面三个的缩写
  order顺序（代替双飞翼）
  order:1
• align-self自身对齐方式
  align-self:center