day16弹性盒子

一.弹性盒的概念

2017年10月，W3C推荐使用Flexbox模块写布局。在此之前，我们的布局模型有三种：流动布局、浮动布局、定位布局。 以上三种布局中，父元素对子元素几乎没有什么掌控力，父子元素之间的关系不够紧密。随着移动互联网时代的到来，传统布局在多种显示设备和尺寸上显得不够灵活，我们需要一种更高效的布局方式，来处理元素的布局以及元素之间的空间的分配。“弹性盒模型”应用而生。 弹性盒模型的核心思想是赋予父元素一种超能力，让父元素对子元素拥有掌控力： - 控制子元素的尺寸 - 控制子元素的位置 - 控制子元素的排序 - 控制子元素之间的空白

二.弹性盒的属性

  1.容器(父元素)属性：

    1.display:flex

    块元素和行内元素都支持

    2.flex-direction

    用于创建主轴，弹性项目主要沿主轴方向排列。

row================x轴正常排 默认 
row-reverse========横向逆序 
column=============纵轴排列 
column-reverse=====纵轴逆序

    3.justify-content

    调整项目在主轴上面的对齐方式

flex-start=========默认值, 起点开始依次排列 
flex-end===========终点开始依次排列 
center=============沿主轴居中排列 常用 
space-around=======弹性盒子沿主轴均匀排列, 空白间距均分在弹性盒子两侧 
注意:在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素到行首的距离和每行最后一个
元素到行尾的距离将会是相邻元素之间距离的一半。记住2倍. 
space-between=======弹性盒子沿主轴均匀排列, 空白间距均分在相邻盒子之间 
space-evenly========弹性盒子沿主轴均匀排列, 弹性盒子与容器之间间距相等，
记住空隙一样大 flex项都沿着主轴均匀分布在指定的对齐容器中。
相邻 flex 项之间的间距，主轴起始位置到第一个 flex项的间距，
主轴结束位置到最后一个 flex 项的间距，都完全一样。

    4.align-items

    调整的是项目在侧轴上的对其方式

flex-start========侧轴的开始位置 
flex-end==========侧轴的结束位置 
center============侧轴的中间位置 
stretch===========拉伸

     注意事项:居中原理 弹性盒当只有一个元素时, 在父元素中添加,justify-content:center align-items:center || 子元素中添加margin:auto

    5.flex-wrap

    nowrap====不折行显示 wrap======折行显示 父元素变成弹性盒之后，子元素过多，默认不会折行，会产生挤压效果 默认折行之后，行间距自动分配；行间距比较大

    6.align-content

    交叉轴必须至少有两行项目才有用,用来调整行间距

flex-start========侧轴开始位置对其，没有行间距 
flex-end==========侧轴结束位置对其，没有行间距 
center============侧轴中间位置对其，没有行间距 
space-around======行间距环绕，行与行之间，是起始行到父元素的2倍 
space-between=====侧轴的两端对齐，中间距离自动分配

  2.项目中的属性

    1.align-self项目的排列方式

auto:默认,类似于stretch（拉伸） 
flex-start:顶端 
flex-end:末尾 
center:中心 
stretch:没有设置高(宽).总会忘一个方向拉伸

    2.order:子元素排列的顺序

     number控制权重,数字越大越靠后,反之靠前,可以为负数，默认权重是0

    3.flex:剩余内容的补全

    根据flex后的参数,决定如何分割每个子元素的宽度

三.多列

规定元素应该被分隔的列数

column-count:将当前元素分为多少列 
column-gap: 间隔的宽度 
column-rule:类似于border,设置间隔的边界 
column-width：每列的宽度,不能和column-count同时设置 
column-fill:列的高度自适应 
auto：列高度自适应内容 
balance：所有列的高度以其中最高的一列统一 
column-span:横跨所有元素 
none：不跨列 
all:跨列