弹性盒子flexbox

作者: gitblong | 来源:发表于2019-06-28 14:59 被阅读0次
image
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flexBoxDemo</title>
    <style>
        /*
            display:flex
            容器的属性有：
            flex-direction      //item方向
            flex-wrap           //换行
            flex-flow           //flex-direction flex-wrap组合
            justify-content     //主轴是否居中
            align-items         //容器内的item的对齐方式
            align-content       //交叉轴的对齐方式


            项目的属性有：
            order               //item的前后位置
            flex-grow           //item的放大比例
            flex-shrink         //item的缩小比例
            flex-basis          //item占主轴的空间大小
            flex                //flex-grow flex-shrink flex-basis的组合
            align-self          //item独自对齐方式
        */
        .box {
            width: 80%;
            margin: 0 auto;
        }
        .flex-box{
            background-color: #d7d6d9;
            /*设定容器*/
            display:flex;
            margin:10px
        }
        .box-1 {
            /*
            flex-direction属性决定主轴的方向（即项目的排列方向）。
            flex-direction: row(默认，横轴) | row-reverse | column(纵轴) | column-reverse;
            */
            flex-direction: row;
            align-items: center;
        }
        .box-2 {
            /*
            默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。
            .box{ flex-wrap: nowrap(不换行，默认) | wrap(换行) | wrap-reverse; }
            */
            flex-wrap: wrap;
        }
        .box-3{
            /*
            flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
            */
            flex-flow:row wrap;
        }
        .box-4 {
            /*
            justify-content属性定义了项目在主轴上的对齐方式。
            .box {
            justify-content: flex-start（开始位置，默认）
            | flex-end（结束位置）
            | center（中部）
            | space-between（两端对齐，同等间距）
            | space-around;（item两侧的间隔相等，两侧离边框有间隔） }
            */
            justify-content: space-around;
            flex-flow:row wrap;
        }
        .box-5 {
            /*
                align-items属性定义了项目在交叉轴上的对齐方式。
                .box {
                align-item: flex-start（开始位置，默认）
                | flex-end（结束位置）
                | center（中部）
                | baseline（项目的第一行文字的基线对齐）
                | stretch;（如果项目未设置高度或设为auto，将占满整个容器的高度。） }
            */
            align-items: center;
            flex-flow: row wrap;
        }
        .box-6 {
            /*
                align-content属性定义了项目在主轴上的对齐方式。
                .box {
                justify-content: flex-start（开始位置，默认）
                | flex-end（结束位置）
                | center（中部）
                | space-between（两端对齐，同等间距）
                | space-around;（item两侧的间隔相等，两侧离边框有间隔） }
                | stretch;（如果项目未设置高度或设为auto，将占满整个整个交叉轴。）
            */
            align-content:center;
            flex-flow:row wrap;
        }
        .box-item {
            width: 200px;
            height: auto;
            display: flex;
            align-items: center;
            /*align-content: center;*/
            justify-content: center;
            margin: 5px;
            background-color: #FFD200;
            font-size: 100px;
            color: #ffffff;
        }
        .item-tall {
            height: 400px;
        }
        .box-tall{
            height: 800px;
        }
        .order-item {
            order:-1;/*数值越小排列越靠前*/
        }
        /*
            flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
            如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。
            如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
        */
        .flex-grow-item1 {
            flex-grow:1/*default 0*/
        }
        .flex-grow-item3 {
            flex-grow:3/*default 0*/
        }
        /*
            flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
            如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。
            如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
            负值对该属性无效。
        */
        .flex-shrink-item {
            flex-shrink: 0;/*该项不缩小*/
        }
        /*
            flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。
            浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
        */
        .flex-base-item {
            flex-basis: 300px;
        }
        /*
            flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
            该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
        */
        .flex-auto-item {
            flex:2 0 300px
        }

        .align-self-item {
            /*
                align-items属性定义了项目在交叉轴上的对齐方式。
                .box {
                align-align-self: auto继承父元素的align-items属性,若父元素不存在align-times属性则默认为strtch
                | flex-start（开始位置，默认）
                | flex-end（结束位置）
                | center（中部）
                | baseline（基线以第一个元素为标准）
                | stretch;（如果项目未设置高度或设为auto，将占满整个容器的高度。） }
            */
            align-self:baseline;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="flex-box box-1">
        <div class="box-item">1</div>
        <div class="box-item">2</div>
        <div class="box-item">3</div>
        <div class="box-item">4</div>
        <div class="box-item">5</div>
    </div>
    <div class="flex-box box-2">
        <div class="box-item">1</div>
        <div class="box-item">2</div>
        <div class="box-item">3</div>
        <div class="box-item">4</div>
        <div class="box-item">5</div>
        <div class="box-item">6</div>
        <div class="box-item">7</div>
        <div class="box-item">8</div>
        <div class="box-item">9</div>
    </div>
    <div class="flex-box box-3">
        <div class="box-item">1</div>
        <div class="box-item">2</div>
        <div class="box-item">3</div>
        <div class="box-item">4</div>
        <div class="box-item">5</div>
        <div class="box-item">6</div>
        <div class="box-item">7</div>
        <div class="box-item">8</div>
        <div class="box-item">9</div>
    </div>
    <div class="flex-box box-4">
        <div class="box-item">1</div>
        <div class="box-item">2</div>
        <div class="box-item">3</div>
        <div class="box-item">4</div>
        <div class="box-item">5</div>
        <div class="box-item">6</div>
        <div class="box-item">7</div>
        <div class="box-item">8</div>
        <div class="box-item">9</div>
    </div>
    <div class="flex-box box-5">
        <div class="box-item">1</div>
        <div class="box-item item-tall">2</div>
        <div class="box-item">3</div>
        <div class="box-item">4</div>
        <div class="box-item">5</div>
        <div class="box-item">6</div>
        <div class="box-item">7</div>
        <div class="box-item item-tall">8</div>
        <div class="box-item">9</div>
    </div>
    <div class="flex-box box-6 box-tall">
        <div class="box-item">1</div>
        <div class="box-item">2</div>
        <div class="box-item">3</div>
        <div class="box-item">4</div>
        <div class="box-item">5</div>
        <div class="box-item">6</div>
        <div class="box-item">7</div>
        <div class="box-item">8</div>
        <div class="box-item">9</div>
        <div class="box-item">10</div>
        <div class="box-item">11</div>
        <div class="box-item">12</div>
        <div class="box-item">13</div>
        <div class="box-item">14</div>
        <div class="box-item">15</div>
        <div class="box-item">16</div>
        <div class="box-item">17</div>
        <div class="box-item">18</div>
        <div class="box-item">19</div>
    </div>
    <div class="flex-box box-1 ">
        <div class="box-item flex-grow-item1">1</div>
        <div class="box-item flex-grow-item1">2</div>
        <div class="box-item flex-grow-item1">3</div>
        <div class="box-item flex-grow-item1">4</div>
        <div class="box-item order-item flex-grow-item3">5</div>
    </div>
    <div class="flex-box box-1 ">
        <div class="box-item ">1</div>
        <div class="box-item">2</div>
        <div class="box-item">3</div>
        <div class="box-item">4</div>
        <div class="box-item flex-base-item flex-shrink-item">5</div>
    </div>

    <div class="flex-box box-1 ">
        <div class="box-item ">1</div>
        <div class="box-item ">2</div>
        <div class="box-item ">3</div>
        <div class="box-item flex-auto-item">4</div>
        <div class="box-item flex-auto-item">5</div>
    </div>
    <div class="flex-box box-1 ">
        <div class="box-item item-tall">1</div>
        <div class="box-item ">2</div>
        <div class="box-item ">3</div>
        <div class="box-item  align-self-item">4</div>
        <div class="box-item">5</div>
    </div>
</div>
</body>
</html>
参考

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
弹性盒子flexbox

参考

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读
