css-flex使用

flex

弹性盒，伸缩盒，一种新的布局方法，主要是用来代替浮动来完成页面的布局。
flex可以使元素具有弹性，让元素可以跟随页面的大小改变而改变

弹性容器

要使用弹性盒，必须要先将一个元素设置为弹性容器：

• display: flex 设置为块级弹性容器
• display: inline-flex 设置为行级弹性容器

属性

父元素规定了宽度或高度、如果弹性元素整体的宽度或高度超过了父元素的宽度或高度，默认情况不会换行，而是发生弹性元素压缩

flex-direction

弹性元素排布方向

• row 默认方式，水平、靠左排列，主轴从左向右
• row-reverse 水平、靠右、反向排列，主轴从右向左
• column 纵向排列，主轴从上到下
• column-reverse 纵向、靠下、反向排列，主轴从下到上

flex-wrap

弹性元素的换行

• nowrap 默认方式，不换行，不换行如果超出父元素大小，那么父元素主轴方向出现滚动条
• wrap 换行，沿着主轴方向排列，主轴空间不够沿着侧轴方向换行然后继续排列弹性元素；
• wrap-reverse 反向换行，整体沿着侧轴方向排列，主轴方向依旧按照顺序排列

flex-flow

flex-direction和flex-wrap的简写属性

align-items

弹性元素在分割单元中如何进行布局；

当设置了flex-wrap: wrap;，且发生了换行：

• 如果弹性容器没有指定弹性容器侧轴方向上的长度
  这种情况下，弹性元素在侧轴方向上的长度由弹性元素本身内容决定；但是主轴上的所有弹性元素在侧轴上的占据的空间的长度都一样(实际弹性元素的大小由align-items决定)

• 如果弹性容器指定了弹性容器侧轴方向上的长度
  首先按照没有指定弹性容器在侧轴方向上的长度的方法对弹性元素在侧轴方向进行空间分配，然后将弹性容器在侧轴方向上的剩余空间分配给不同主轴上的弹性元素。

• 分割单元
  也就是说，整体上，弹性容器最终会被几条主轴和侧轴进行分割，每个分割的单元容纳一个弹性元素，但是这个分割出来的单元并不一定是弹性元素的大小；

• stretch
  默认方式，弹性元素拉伸铺满分割单元，保证主轴方向上一行的弹性元素的长度在侧轴方向上是一样的；
  先按照弹性元素本身需要的空间大小进行空间分配，然后将弹性容器侧轴方向的剩余空间平均分配给不同行的弹性容器。

• flex-start
  弹性元素侧轴方向不会拉伸铺满分割单元，他在侧轴方向位于分割单元的顶边

• flex-end
  弹性元素侧轴方向不会拉伸铺满分割单元，他在侧轴方向位于分割单元的终边

• center
  弹性元素侧轴方向不会拉伸铺满分割单元，他在侧轴方向居中

• baseline
  弹性元素侧轴方向不会拉伸铺满分割单元，他在侧轴方向沿着第一行的基线进行对齐

justify-content

justify可以理解为 – 水平的
当主轴上存在剩余空间，且弹性元素不发生flex-grow，主轴方向如何排列主轴上的元素

• flex-start 弹性元素沿着主轴起边排列
• flex-end 弹性元素沿着主轴终边排列
• center 弹性元素居中排列
• space-around 空白环绕分布到元素两侧
• space-evenly evenly – 均匀，空白均匀分布到元素两侧
• space-between 空白均匀分布到元素之间，元素边界不留空白

align-content

侧轴上空白空间的分布，这个同样用在当align-items不为stretch的情况；此时侧轴方向会出现空白，然后一行主轴的所有弹性元素视为一个元素，然后进行侧轴方向上的布局。
参数和justify-content一样

主轴和侧轴

• 主轴 弹性元素的排列方向
• 侧轴 与主轴垂直方向称为侧轴

弹性元素

弹性容器的子元素都是弹性元素(弹性项)，不包括后代元素；
一个元素可以同时是弹性容器和弹性元素；

默认大小

• 主轴方向 弹性元素主轴方大小跟随内容变化；
• 侧轴方向 如果弹性容器指定了长度，那么弹性元素会铺满侧轴方向；如果弹性容器没有指定大小，那么弹性元素会跟随内容大小变化。

属性

flex-grow

指定弹性元素的伸展系数，也就是当父元素主轴方向存在剩余空间（主轴方向，父元素减去子元素flex-basis的剩余部分），子元素分配这些剩余空间时占比大小；

• 0 默认值，不参与剩余空间分配
• 1 以比例1参与分配
• 2 以比例2参与分配

flex-shrink

指定弹性元素的收缩系数，也就是当父元素主轴方向无法容纳所有子元素（主轴方向，子元素flex-basis超过了父元素本身的大小），对子元素进行收缩时的单个子元素提供收缩空间的占比大小；

• 0 不参与收缩
• 1 默认值，以比例1进行收缩
• 2 以比例2进行收缩

align-self

用来覆盖弹性容器中align-items的属性，也就是弹性元素在分割单元中如何进行布局。

flex-basis

分割单元宽度设置，和width类似
和width区别：

• 如果主轴是横向的，则该值指定的就是元素的宽度
• 如果主轴是纵向的，则该值指定的就是元素的高度
• auto 默认值，表示参考元素自身的高度或宽度。
• 如果传递了一个具体数值，则以该值为准

flex

简写属性：flex-grow flex-shrink flex-basis

• initial 0 1 auto
• auto 1 1 auto
• none 0 0 auto

order

决定元素的排列顺序

• 0 默认值
  调整顺序的时候不需要调整结构了；
  相同order按照顺序排列，可以为负数。

高度坍塌

弹性容器和不会高度坍塌。

flex布局子元素宽度超出父元素

flex布局子元素会超出父元素显示，有两种方式避免超出显示的问题：