弹性盒(弹性容器)

什么是弹性盒子？

弹性盒子是CSS3的一种新的布局模式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和空白空间的分配

常用的几种

1、display:flex (将盒子变为弹性容器)

      注意:是将父元素变为弹性容器,、

2、flex-direction(设置排列方向)

      默认情况下是沿主轴方向排列,默认情况下是水平排列

      flex-direction: row;    (  沿X轴方向从左边到右边排列 )

      flex-direction: row-reverse;(  沿X轴方向从右边到左边排列 )

      flex-direction: column;( 沿Y轴方向从顶部到底部 )

      flex-direction: column-reverse;  ( 沿Y轴方向从底部到顶部 )   

3、justify-content（主方向空间分配方式）

      justify-content : flex-start;元素在主轴（页面）上由左或者上开始排列

      justify-content : flex-end;元素在主轴（页面）上由右或者下开始排列

        justify-content: center; 将项目居中对齐

       justify-content: space-around;有的项目之间以及左右两边均分主方向上的 剩余空间, 两侧               空余小,中间空余大

        justify-content: space-between;项目两端对齐,两端紧贴盒子,中间平分剩余空间

        justify-content: space-evenly;将主方向上剩余的宽度平均分给每一个项目的左右, 所有空间一样大

4、Align-items(侧方向上的对齐方式)

        Align-items:stretch;默认值,在开始位置对齐,项目在测方向上没有设置尺寸时,会自 动把测方向空间占满(前提时没有设置align-content)

        Align-items:flex-start;将一行内容对齐方式设置为开始位置

        Align-items:flex-end;将一行内容对齐方式设置为结束位置

        Align-items:baseline;将元素参照基线对齐

5、Flex-wrap(是否换行)

         flex-wrap: wrap;换行 占满以后会自动换行

         flex-wrap: nowrap;;默认值,不换行

6、flex-shrink (定义弹性盒子元素的收缩比率  后面写几分配几份压力)

         分配的压力也是根据宽度的比例来分配的 个项目承担的压力===各项目的 宽度比例 它和换             行 是冲突的,只是两种不同的解决方案

7、flex-basis( 定义弹性盒子元素的默认基准值 )

         设置元素在分配剩余空间之前的主方向上的空间 会覆盖之前设置的宽度

8、Flex-grow(弹性盒内的div自动填充整个盒子)

        剩余空间分给每个div,有几个div分成几份,每个div分一份,可以取值其他数,意思是多 分几份,            这个div占几份