VIP26/day16/css/5.弹性盒容器属性.css

#box {
    /* width: 900px; */
    width: 550px;
    height: 300px;
    background: #ccc;
    display: flex;
    flex-wrap: wrap;
    align-content:stretch;
    /* flex-direction: column; */
    /* align-items: center; */
    /* justify-content:space-evenly; */
    /* flex-direction:column-reverse; */
    /* display: inline-flex; */
}
#box4 {
    width: 100px;
    height: 50px;
    background: #f00;
}
#box5 {
    width: 120px;
    height: 100px;
    background: #ff0;
}
#box6 {
    width: 100px;
    height: 100px;
    background: #00f;
}
/* #box1 {
    width: 200px;
    height: 100px;
    background: #f00;
}
#box2 {
    width: 200px;
    height: 100px;
    background: #ff0;
}
#box3 {
    width: 200px;
    height: 100px;
    background: #00f;
} */
.new {
    width: 400px;
    display: flex;
    flex-flow: row wrap-reverse;
    /* flex-wrap:wrap-reverse; */

}
.new1,.new2,.new3 {
    width: 100px;
    height: 100px;
}
.new1 {
    background: #00f;
}
.new2 {
    background: #f00;
}
.new3 {
    background: #ff0;
}
/* 
弹性盒:容器属性、项目属性
容器属性:
    开启弹性盒：display：flex;(常用)
               display:inline-flex;（开启弹性盒子 以内联形式展示）
               display:-moz-flex;
    注意:设置为flex布局后，子元素的float、clear属性将失效;
    1.flex-direction:控制弹性盒子方向
                     row(默认) 从左到右
                     row-reverse 从右到左
                     column 从上到下
                     column-reverse 从下到上
                     
    2.flex-wrap：控制弹性盒子换行
                nowrap 不换行（默认）
                wrap 换行
                wrap-reverse 换行 第一行在下面
    3.flex-flow(排列):flex-direction flex-wrap
                      flex-flow:row nowrap;
    4.justify-content:水平对齐方式
                flex-start 左对齐 （默认）
                flex-end 右对齐
                center 居中
                space-around：项目均匀分布，每一个项目两侧有相同的留白空间，相邻项目之间的距  离是两个项目之间留白的和
                space-between:两端对齐，项目之间间隔相等
                space-evenly：项目均匀分布，所有项目之间及项目与边框之间距离相等;
    5.align-items:交叉轴对齐方式
                stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
                flex-start：交叉轴的起点对齐。
                flex-end：交叉轴的终点对齐。
                center：交叉轴的中点对齐。
                baseline: 项目的第一行文字的基线对齐。
    6.align-content：轴线的对齐方式(一根轴不生效)
                    stretch (默认)：拉伸显示
                    flex-start：从启点线开始顺序排列
                    flex-end：相对终点线顺序排列
                    center：居中排列
                    space-between：项目均匀分布，第一项在启点线，最后一项在终点线
                    space-around：项目均匀分布，每一个项目两侧有相同的留白空间，相邻项目之间的距离是两个项目之间留白的和
    注意: Internet Explorer 10 及更早版本浏览器不支持 align-content 属性。
    注意: Safari 7.0 及更新版本通过 -webkit-align-content 属性支持该属性。
    注意:Internet Explorer, Firefox, 和 Safari 浏览器不支持 align-content 属性。




*/