弹性盒子

弹性盒子

• display : flex 弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。

• flex-direction 指定了弹性子元素在父容器中的位置。
  flex-direction的值有:

  1. row：横向从左到右排列（左对齐），默认的排列方式。
  2. row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
     3 )column：纵向排列。
  3. column-reverse：反转纵向排列，从后往前排，最后一项排在最上面

• justify-conten 把子内容沿着容器的主线对齐。

1. flex-start 子项目由行头紧挨着填充。这是默认值

2. flex-end 子项目由行尾紧挨着填充。

3. center 子醒目居中紧挨着填充

4. space-between 第一个子项目与主项目左边对齐 最后一个子项目与主项目右边对齐 剩余空间为负 或者只有一项 则等同于 flex-start

5. space-around 两边留有一半间隔空间 剩余空间为负 或只有一个弹性项 等同于center

• align-items 设置或检索子元素在纵轴方向上的对齐方式

1. flex-start 与纵轴起始界齐平

2. flex-end与纵轴结束边界齐平

3. center 居中位置

4. baseline 应该是跟flex-start差不多

5. stretch 如果指定高度为auto 则值会与主元素高度尽可能接近。

• flex-wrap 属性用于指定弹性盒子的子元素换行方式

1. nowrap 默认 容器为单行，子项目可能

2. wrap 容器为多行 溢出的部分会放置到新行 子项目会发生断行

3. wrap-reverse 反转wrap排列

• align-content 用于修改 flex-wrap属性的行为。类似于align-items

1. stretch 默认 各行将会伸展以占用剩余的空间
2. flex-start 各行向弹性起始位置堆叠
3. flex-end 各行向弹性结束位置堆叠
4. center 各行向弹性容器的中间位置堆叠
5. space-between -各行在弹性盒容器中平均分布。
6. pace-around - 各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。

• margin:auton 居中问题

• align-self 属性用于设置弹性元素自身在纵轴方向上的对齐方式

1. flex-start 与top紧贴

2. flex-end 与bottom 紧贴

3. center 纵轴居中

4. baseline 同flex-start 一致

5. stretch 撑满屏幕

• flex 属性用于指定弹性子元素如何分配空间

  1） auto: 计算值为 1 1 auto
  2） initial: 计算值为 0 1 auto
  3） none：计算值为 0 0 auto
  4）inherit：从父元素继承
  5）[ flex-grow ]：定义弹性盒子元素的扩展比率。
  6） [ flex-shrink ]：定义弹性盒子元素的收缩比率。
  7） [ flex-basis ]：定义弹性盒子元素的默认基准值。