css3弹性盒子

css3弹性盒子

1）box-sizing:content-box;

普通的盒子模型，加padding和border时盒子会变大，向外扩展

2） box-sizing:border-box;

盒子模型，加padding和border时，盒子不会变大，向内扩展

父元素

3） justify-content–规定子元素在水平方向位置

属性值：
flex-start：居左对其
flex-end：居右对齐
center：水平居中对齐
space-between：将第一个子元素布局在最左处，将最后一个子元素布局在最右处，将空白部分平均分配在所有子元素与子元素之间。
space-around： 将空白部分平均分配在以下几处：左边界与第一个子元素之间、各子元素与子元素之间、最后一个子元素与右边界之间。

如图所示：灰色区域为空白

4） align-items–规定子元素在垂直方向的位置

属性值
center：垂直居中对齐
flex-start：居上对其
flex-end：居下对其
stretch：同一行中的所有子元素高度被调整为最大。如果未指定任何子元素高度，则所有子元素高度被调整为最接近容器高度（当考虑元素边框及内边距时，当边框宽度与内边距均为0则等于容器高度）。
baseline：如果子元素的布局方向与容器的布局方向不一致，则该值的作用等效于flex-start属性值的作用。如果子元素的布局方向与容器的布局方向保持一致，则所有子元素中的内容沿基线对齐。

如图所示：灰色区域是空白

5） align-content–多行的时候，垂直排列

属性：
center：垂直居中对齐
flex-start：居上对其
flex-end：居下对其
如图所示：灰色区域是空白

6） flex-direction–设置容器中子元素排列方向

属性
row：横向排列（默认）
row-reverse：横向反向排列
column：纵向排列（坐标轴转了90度，水平和垂直反过来用）
colunm-reverse：纵向反向排列

7） flex-wrap—子元素是否在一行、列

属性：
nowrap：不换行
wrap：换行

8) flex-flow -->可以将flex-direction样式属性值与flex-wrap样式属性值合并书写在flex-flow样式属性中

flex-flow; row wrap;

子元素

1）flex:1; -->1指的是系数，将盒子分几份，占几份之一

举个栗子

<style type="text/css">
    .box {
        width:100%;
        height:450px;
        border:1px solid #000;
        display: flex;
    }
    .child1 {
        height: 100px;
        border:1px solid #624;
        background: #624;
        flex:1;//子元素一共是分4块，占1/4
    }
    .child2 {
        height: 100px;
        border:1px solid red;
        flex:3;//占3/4   
         }
    </style>
    <div class="box">
        <div class="child1">1</div>
        <div class="child2">2</div>
    </div>

2)align-self -->用来覆盖父元素的align-items属性

属性：
auto:继承父元素的align-items属性值
flex-start
flex-end
center
baseline
stretch

3）flex-grow:1 -->定义子元素放大比例

举例子：

   <style type="text/css">
    .parent{
        width: 500px;
        height: 400px; 
        border: 1px solid #67d;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
    }
    .child {
        width: 100px;
        height: 100px;
        border:1px solid #a43;
        box-sizing: border-box;
        flex-grow: 1;
        align-self: center;
    }
    </style>
     <div class="parent">
         <div class="child">1</div>
         <div class="child">2</div>
         <div class="child">3</div>
         <div class="child">4</div>
         <div class="child">5</div>
         <div class="child">6</div>
         <div class="child">7</div>
         <div class="child">8</div>
     </div>

4) order:0 -->改变子元素的显示顺序，可以是负数，数值越小越靠前

    <style type="text/css">
    .parent{
        width: 500px;
        height: 400px; 
        border: 1px solid #67d;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
    }
    .child {
        width: 100px;
        height: 100px;
        border:1px solid #a43;
        box-sizing: border-box;  
    }
    .child1 {
        width: 100px;
        height: 100px;
        border:1px solid #a43;
        box-sizing: border-box;
        order:-1
    }
    </style>
     <div class="parent">
         <div class="child">1</div>
         <div class="child">2</div>
         <div class="child">3</div>
         <div class="child">4</div>
         <div class="child">5</div>
         <div class="child">6</div>
         <div class="child">7</div>
         <div class="child1">8</div>
     </div>

总结

1、要对元素使用弹性盒子布局，只要在其直接父级容器元素上设置display:flex即可
2、以下7个属性是加在flex container上的：
display:flex;
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
3、这6个属性是加在flex item上的
order
flex-grow
flex
align-self