CSS3 box flex 布局

浏览数：39 / 时间：2015年06月09日

1、伸缩项目的布局方式-从左到右

<ul id="Layout1" class="box">
        <li>1</li>
        <li>1</li>
        <li>1</li>
    </ul>

.box{
    width: 250px;
    padding: 10px;
    background: #999;
    margin: 10px;
}
.box li{
    width: 100px;
    height: 100px;
    border:1px solid #666;
}
#Layout1 {
    /*伸缩容器*/
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: flex;

    /*伸缩项目的布局方式-从左到右*/
    /*box以下写法
    box-orient: horizontal | vertical | inline-axis | block-axis
    horizontal: 设置伸缩盒对象的子元素从左到右水平排列
    vertical: 设置伸缩盒对象的子元素从上到下纵向排列
    inline-axis: 设置伸缩盒对象的子元素沿行轴排列
    block-axis: 设置伸缩盒对象的子元素沿块轴排列*/
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;

    /*flex以下写法
    flex-flow: [ flex-direction ] || [ flex-wrap ]
    [ flex-direction ]: 定义弹性盒子元素的排列方向。
    [ flex-wrap ]: 定义弹性盒子元素溢出父容器时是否换行。

    flex-direction: row | row-reverse | column | column-reverse
    row: 横向从左到右排列（左对齐），默认的排列方式。
    row-reverse: 反转横向排列（右对齐，从后往前排，最后一项排在最前面。
    column: 纵向排列。
    row-reverse: 反转纵向排列，从后往前排，最后一项排在最上面。

    flex-wrap: nowrap | wrap | wrap-reverse
    nowrap: 当子元素溢出父容器时不换行。
    wrap: 当子元素溢出父容器时自动换行。
    wrap-reverse: 反转 wrap 排列。*/
    -webkit-flex-direction: row;
    flex-flex-direction: row;
}

2、伸缩项目的布局方式-从左到右自动换行

<ul id="Layout2" class="box">
        <li>2</li>
        <li>2</li>
        <li>2</li>
    </ul>

.box{
    width: 250px;
    padding: 10px;
    background: #999;
    margin: 10px;
}
.box li{
    width: 100px;
    height: 100px;
    border:1px solid #666;
}
#Layout2 {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-flex-direction: row;
    flex-flex-direction: row;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

3、伸缩项目的布局方式-从上到下排列

<ul id="Layout3" class="box">
        <li>3</li>
        <li>3</li>
        <li>3</li>
    </ul>

.box{
    width: 250px;
    padding: 10px;
    background: #999;
    margin: 10px;
}
.box li{
    width: 100px;
    height: 100px;
    border:1px solid #666;
}
#Layout3 {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-flex-direction: column;
    flex-flex-direction: column;
}

4、伸缩项目的布局方式-子元素从左到右按比率填充

<ul id="Layout4" class="box">
        <li>4</li>
        <li>4</li>
        <li>4</li>
    </ul>

.box{
    width: 250px;
    padding: 10px;
    background: #999;
    margin: 10px;
}
.box li{
    width: 100px;
    height: 100px;
    border:1px solid #666;
}
#Layout4 {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -webkit-flex-direction: row;
    flex-flex-direction: row;
}
#Layout4 li:nth-child(1){
    width: auto;
    /*伸缩盒对象的子元素*/
    /*box以下写法
    box-flex: <number>
    <number>: 使用浮点数指定对象所分配其父元素剩余空间的比例。*/
    -moz-box-flex:1;
    -webkit-box-flex:1;
    /*flex以下写法
    flex-grow: <number>
    <number>: 用数值来定义扩展比率。不允许负值 */
    -webkit-flex-grow:1;
    flex-grow:1;
}
#Layout4 li:nth-child(2){
    width: auto;
    -moz-box-flex:2;
    -webkit-box-flex:2;
    -webkit-flex-grow:2;
    flex-grow:2;
}
#Layout4 li:nth-child(3){
    width: auto;
    -moz-box-flex:3;
    -webkit-box-flex:3;
    -webkit-flex-grow:3;
    flex-grow:3;
}

5、伸缩项目的布局方式-子元素从上到下按比率填充

<ul id="Layout5" class="box">
        <li>5</li>
        <li>5</li>
        <li>5</li>
    </ul>

.box{
    width: 250px;
    padding: 10px;
    background: #999;
    margin: 10px;
}
.box li{
    width: 100px;
    height: 100px;
    border:1px solid #666;
}
#Layout5 {
    height: 250px;
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-flex-direction: column;
    flex-flex-direction: column;
}
#Layout5 li {
    height: auto;
}
#Layout5 li:nth-child(1){
    -moz-box-flex:1;
    -webkit-box-flex:1;
    -webkit-flex-grow:1;
    flex-grow:1;
}
#Layout5 li:nth-child(2){
    -moz-box-flex:2;
    -webkit-box-flex:2;
    -webkit-flex-grow:2;
    flex-grow:2;
}
#Layout5 li:nth-child(3){
    -moz-box-flex:3;
    -webkit-box-flex:3;
    -webkit-flex-grow:3;
    flex-grow:3;
}

6、伸缩项目的布局方式-横向子元素对齐方式

<ul id="Layout6" class="box">
        <li>6</li>
        <li>6</li>
        <li>6</li>
    </ul>

.box{
    width: 250px;
    padding: 10px;
    background: #999;
    margin: 10px;
}
.box li{
    width: 100px;
    height: 100px;
    border:1px solid #666;
}
#Layout6 {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: flex;
    /*伸缩盒对象的子元素对齐方式*/
    /*box以下写法
    box-pack: start | center | end | justify
    start: 设置伸缩盒对象的子元素从开始位置对齐（大部分情况等同于左对齐，受） 
    center: 设置伸缩盒对象的子元素居中对齐 
    end: 设置伸缩盒对象的子元素从结束位置对齐（大部分情况等同于右对齐） 
    justify: 设置或伸缩盒对象的子元素两端对齐*/
    -moz-box-pack:justify;
    -webkit-box-pack:justify;

    /*flex以下写法
    justify-content: flex-start | flex-end | center | space-between | space-around
    flex-start: 弹性盒子元素将向行起始位置对齐。该行的第一个子元素的主起始位置的边界将与该行的主起始位置的边界对齐，同时所有后续的伸缩盒项目与其前一个项目对齐。
    flex-end: 弹性盒子元素将向行结束位置对齐。该行的第一个子元素的主结束位置的边界将与该行的主结束位置的边界对齐，同时所有后续的伸缩盒项目与其前一个项目对齐。
    center: 弹性盒子元素将向行中间位置对齐。该行的子元素将相互对齐并在行中居中对齐，同时第一个元素与行的主起始位置的边距等同与最后一个元素与行的主结束位置的边距（如果剩余空间是负数，则保持两端相等长度的溢出）。
    space-between: 弹性盒子元素会平均地分布在行里。如果最左边的剩余空间是负数，或该行只有一个子元素，则该值等效于‘flex-start‘。在其它情况下，第一个元素的边界与行的主起始位置的边界对齐，同时最后一个元素的边界与行的主结束位置的边距对齐，而剩余的伸缩盒项目则平均分布，并确保两两之间的空白空间相等。
    space-around: 弹性盒子元素会平均地分布在行里，两端保留子元素与子元素之间间距大小的一半。如果最左边的剩余空间是负数，或该行只有一个伸缩盒项目，则该值等效于‘center‘。在其它情况下，伸缩盒项目则平均分布，并确保两两之间的空白空间相等，同时第一个元素前的空间以及最后一个元素后的空间为其他空白空间的一半。*/
    -webkit-justify-content:space-between;
    justify-content:space-between;
}
#Layout6 li {
    width: 50px;
}

7、伸缩项目的布局方式-纵向子元素对齐方式

<ul id="Layout7" class="box">
        <li>7</li>
        <li>7</li>
        <li>7</li>
    </ul>

.box{
    width: 250px;
    padding: 10px;
    background: #999;
    margin: 10px;
}
.box li{
    width: 100px;
    height: 100px;
    border:1px solid #666;
}
#Layout7 {
    height: 250px;
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-flex-direction: column;
    flex-flex-direction: column;
    -moz-box-pack:center;
    -webkit-box-pack:center;
    -webkit-justify-content:center;
    justify-content:center;
}
#Layout7 li {
    height: 50px;
}