css伸缩盒子

     传统的布局方式，是基于盒模型，依赖position，float，display等属性。CSS3的伸缩盒子特性，使得布局更加灵活，适应性更强。

     CSS3引入的布局模式Flexbox布局，主要思想是让容器有能力让其子项目能够改变其宽度，高度，以最佳方式填充可用空间。Flex容器使用Flex项目可以自动放大与收缩，用来填补可用的空闲空间。

一、父容器的一些属性：
1. display:flex：设置父容器为伸缩盒子，那么这个盒子里面的所有直接子元素都会自动的变成伸缩项；
2. justify-content：设置子元素在主轴方向上的排列方式

• flex-start：让子元素从父容器的起始位置开始排列
• flex-end：让子元素从父容器的结束位置开始排列
• center：让子元素从父容器的中间位置开始排列
• space-between：左右对齐父容器的开始和结束，中间平均分页，产生相同的间距
• space-around：将多余的空间平均的分页在每一个子元素的两边，这样将导致中间盒子的间距是左右两边盒子间距的两倍

3. align-items：设置子元素(伸缩项)在侧轴方向上的对齐方式

• flex-start：设置在侧轴方向上顶对齐
• flex:end：设置在侧轴方向上底对齐
• center：设置在侧轴方向上居中对齐
• stretch：拉伸，让子元素在侧轴方向上进行拉伸，填充满整个侧轴方向>> 默认值
• baseline:文本基线

4. flex-flow：是flex-direction和flex-wrap的综合，eg. flex-flow: row wrap;

    1）flex-wrap：控制子元素是否换行显示，默认不换行，

• nowrap:不换行（默认）--则收缩
• wrap:换行
• wrap-reverse:翻转，原来是从上到下，翻转后就是从下到上来排列

    2）flex-direction：定义伸缩子元素在伸缩容器中放置的方向，默认是row(水平方向)

• row：水平排列方向，从左到右
• row-reverse：水平排列方向，从右到左
• column：垂直排列方向，从上到下
• column-reverse：垂直排列方向，从下到上

二、子元素的一些属性

 1. flex-grow：可以来扩展子元素的宽度，设置当前元素应该占据剩余空间的比例值，默认是0，说明子元素并不会去占据剩余的空间
         比例值计算：当前空间的flex-grow/所有兄弟元素的flex-grow的和

        

说明：把各项目的flex-grow值加起来等于4，就是把额外空间分成4份，比例为1的占1份，比例为2的占2份。

2. flex-shrink：定义收缩比例，通过设置的值来计算收缩空间，默认值为1
    比例值计算(计算方式和flex-grow一样)：当前空间的flex-shrink/所有兄弟元素的flex-shrink的和

3. flex-basis: 定义伸缩项基本值
4. flex：缩写flex:flex-grow flex-shrink flex-basis， 默认 flex: 0 1 auto

 案例：menu根据菜单项自动拓展宽度

 ——>

 

伸缩盒子案例：自适应布局