7. Flex布局

1.Flex布局

---

flex容器属性

flex-direction 主轴方向（默认row）
flex-wrap 子项是否可换行
flex-flow：flex-direction与flex-wrap的合写
justify-content 主轴对齐方式
align-items 侧轴（默认column）对齐方式
align-content 弹性线对齐方式（当子项目足够多，一个主轴放不下，wrap产生了多条主轴，弹性线即为每个主轴）

在flexbox容器中，开启flex布局

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

.flex-container{
   
  display: flex;
}

.flex-container div{
   
  margin: 10px;
}
// 这时候效果类似'float: left'

1.1 flex-direction

主轴方向,可选值:

column：从上到下
row：从左到右（默认）
column-reverse：从下到上
row-reverse：从右到左

1.2 flex-wrap

可选值：

wrap
nowrap
wrap-reverse: 反方向换行

1.3 flex-flow

direction与wrap的合写

flex-flow: [direction] [wrap]

1.4 justify-content

主轴对齐方式，可选值:

center: 居中对齐
flex-start: 开头对齐（默认）
flex-end: 末端对齐
space-around: 子项之间，以及主轴两端都均分空隙
space-between：仅子项之间均分空隙

1.5 align-items

侧轴对齐方式，可选值：

center
flex-start
flex-end
strech: 拉伸子项在侧轴方向的长度以填充容器（默认）
baseline: 子项基线对齐

1.6 align-content

弹性线对齐方式，可选值:

space-between
space-around
flex-start
flex-end
strech:默认值

2. flexItem

---

属性：

order 通过值大小指定子项的排列顺序
flex-grow 通过值大小指定当前子项相对其他子项将增长多少
flex-shrink 通过值大小指定当前子项相对其他子项将收缩多少
flex-basis 规定子项的初始长度
flex 即grow、shrink、basis的合写
align-self 规定弹性容器内所选项目的对齐方式，将覆盖容器的 align-items 属性所设置的默认对齐方式

2.1 order

规定item的排列顺序

<div class="flex-container">
  <div style="order: 3">1</div>
  <div style="order: 2">2</div>
  <div style="order: 4">3</div> 
  <div style="order: 1">4</div>
</div>
// 顺序:4 2 1 3

2.2 flex-grow

规定item的空间占比

<div class="flex-container">
  <div style="flex-grow: 1">1</div>
  <div style="flex-grow: 1">2</div>
  <div style="flex-grow: 4">3</div>
</div>
// 按flex-container可分配的宽度分配
// 1占 1/6 width   2占 1/6 width   3占 4/6 width

2.3 flex-shrink

规定item的缩小占比

<div class="flex-container">
  <div>1</div>
  <div style="flex-shrink: 0">2</div>
  <div>3</div>
</div>
// flex-container宽度变小时，2的宽度不变

2.4 flex-basis

规则item的初始宽度

<div class="flex-container">
  <div>1</div>
  <div style="flex-basis: 50px">2</div>
  <div>3