HTML和小程序的 12 种 flex 布局

作者: 安琪拉D夏亚 | 来源:发表于2019-01-11 12:38 被阅读1次

布局的传统解决方案，基于 盒状模型（box model），依赖 display 属性 + position 属性 + float 属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。

网页布局（layout）之中的 弹性布局( flexible box)，主要用来为 盒状模型 提供最大的灵活性。

special items：

flex container：采用 flex 布局的元素；
flex item：flex 项目，flex 容器的所有子元素会自动成为该容器的项目成员，即 flex 项目。

容器框架轴
水平	主轴（main axis）
垂直	交叉轴（cross axis）
主轴（水平方向）默认排列
开始（left）	main start
末尾（right）	main end
交叉轴（垂直方向）
开始（top）	cross start
末尾（bottom）	cross end
主轴空间（width）	main size
交叉轴空间（height）	main height

image

life_trip.jpg

排列方向及换行

flex 属性：flex-direction

img

<style> /* 基本语法*/
.box {flex-direction: column-reverse | column | row | row-reverse;}
</style>

row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .container{
                border: 1px solid black;
                display: flex;
                flex-direction: column-reverse;
            }
            .item{
                width: 50px;
                height: 50px;
                background-color: gold;
                border: 1px solid red;
            }
        </style>
    </head>
    <!--小程序将 div 换成 view ，body 换成 page-->
    <body>
        <div class="container">
         <div class="item"> 1</div>
         <div class="item"> 2</div>
         <div class="item"> 3</div>
         <div class="item"> 4</div>
    </div>
    </body>
</html>

image

flex 属性：flex-wrap

flex-wrap

<style> /* 基本语法*/
    .box{ flex-wrap: nowrap | wrap | wrap-reverse; }
</style>

nowrap（默认）：不换行。
wrap：换行，第一行在上方。
wrap-reverse：换行，第一行在下方。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .container{
                border: 1px solid black;
                display: flex;
                flex-direction: row;
                flex-wrap: wrap-reverse;
            }
            .item{
                width: 100px;
                height: 100px;
                background-color: gold;
                border: 1px solid red;
            }
        </style>
    </head>
    <!--小程序将 div 换成 view ，body 换成 page-->
    <body>
        <div class="container">
         <div class="item"> 1</div>
         <div class="item"> 2</div>
         <div class="item"> 3</div>
         <div class="item"> 4</div>
         <div class="item"> 5</div>
         <div class="item"> 6</div>
         <div class="item"> 7</div>
    </div>
    </body>
</html>

flex 属性：flex-flow

flex-direction 属性和 flex-wrap 属性的简写形式

<style> /* 基本语法*/ /* 默认 row nowrap*/ 
    .box { flex-flow: <flex-direction> <flex-wrap>; }
</style>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .container{
                border: 1px solid black;
                display: flex;
                flex-direction: row;
                flex-flow:row-reverse wrap; /* 敲黑板*/
            }
            .item{
                width: 100px;
                height: 100px;
                background-color: gold;
                border: 1px solid red;
            }
        </style>
    </head>
    <!--小程序将 div 换成 view ，body 换成 page-->
    <body>
        <div class="container">
         <div class="item"> 1</div>
         <div class="item"> 2</div>
         <div class="item"> 3</div>
         <div class="item"> 4</div>
         <div class="item"> 5</div>
         <div class="item"> 6</div>
         <div class="item"> 7</div>
    </div>
    </body>
</html>

image

项目伸缩及宽度

flex 属性：flex-grow

定义项目的放大比例，默认为0，即就算存在剩余空间，也不放大。

如果所有项目的 flex-grow 属性都为1，则它们将等分剩余空间（前提是还有剩余空间的话）。

如果一个项目的 flex-grow 属性为2，其他项目都为 1，则前者占据的剩余空间将比其他项 多一倍。

<style> /* 基本语法*/  /* default 0 */
    .item { flex-grow: 具体数字; }
</style>

img

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .container3{
                margin: 10px;
                border: 1px solid black;
                width: 300px;
                height: 50px;
                background: red;
                display: flex;
                flex-wrap: wrap;
            }
            .item{
                width: 20px;
                background-color: gold;
                border: 1px solid red;
                /*flex-grow: 3;*/
            }
            .item_3{
                width: 20px;
                background-color: gold;
                border: 1px solid red;
                /*flex-grow: 2;*/
            }
            .item_4{
                display: flex;
                width: 20px;
                background-color: gold;
                border: 1px solid red;
                /*flex-grow: 1;*/
            }
        </style>
    </head>
    <!--小程序将 div 换成 view ，body 换成 page-->
    <body>
        <div class="container3">
            <div class="item"> 1</div>
            <div class="item"> 2</div>
            <div class="item_3"> 3</div>
            <div class="item_4"> 4</div>
        </div>
    </body>
</html>

image

<style>
    /* 分别加上以下属性*/
    .item{
        flex-grow: 3;
    }
    .item_3{
        flex-grow: 2;
    }
    .item_4{
        flex-grow: 1;
</style>

image

flex 属性：flex-shrink

定义了项目的缩小比例，默认为1，即当空间不足时，该项目将缩小。

如果所有项目的flex-shrink属性都为1，此时容器的空间又不足，项目都将等比例缩小。

如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

<style> /* 基本语法*/ /* default 1 */
    .item { flex-shrink: 具体数字，不能设置负值; }
</style>

img

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .container3{
                margin: 10px;
                border: 1px solid black;
                width: 300px;
                height: 50px;
                background: red;
                display: flex;
            }
            .item{
                width: 100px;
                background-color: gold;
                border: 1px solid red;
            }
            .item_4{
                display: flex;
                width: 200px;
                background-color: gold;
                border: 1px solid red;
                display: flex;
                /* 不添加 flex-shrink: 2;*/ /* item_4 没有收缩*/
            }
        </style>
    </head>
    <!--小程序将 div 换成 view ，body 换成 page-->
    <body>
        <div class="container3">
            <div class="item"> 1</div>
            <div class="item"> 2</div>
            <div class="item"> 3</div>
            <div class="item_4"> 4</div>
        </div>
    </body>
</html>

image-20190111120926734

<style>
    .item_4{
        display: flex;
        width: 200px;
        background-color: gold;
        border: 1px solid red;
        display: flex;
        flex-shrink: 2; /* 添加之后，item_4 空间缩小*/
    }
</style>

image-20190111121007064

flex 属性：flex-basis

设置或检索 弹性盒 伸缩基准值，即项目在主轴上占据的空间，如果元素不是弹性盒对象的元素，则 flex-basis 属性不起作用。此种方式如同 width 和 height 的作用，但即使设置长度超过容器也不会超出容器。

<style> /* 基本语法*/  
    .item { flex-basis: number|auto|initial|inherit; }
</style>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .container3{
                margin: 10px;
                border: 1px solid black;
                width: 300px;
                height: 50px;
                background: red;
                display: flex;
            }
            /* 容器内的项目总宽度超出了容器，会按照比例缩小，不会超出容器*/
            .item{
                background-color: gold;
                border: 1px solid red;
                flex-basis: 400px;  /* 宽度400px*/
            }
            .item_4{
                background-color: gold;
                border: 1px solid red;
                flex-basis: 80px;   /* 宽度80px*/
            }
        </style>
    </head>
    <!--小程序将 div 换成 view ，body 换成 page-->
    <body>
        <div class="container3">
            <div class="item"> 1</div>
            <div class="item"> 2</div>
            <div class="item"> 3</div>
            <div class="item_4"> 4</div>
        </div>
    </body>
</html>

image-20190111094210363

flex 属性：flex

flex属性是 flex-grow , flex-shrink 和 flex-basis 的简写，默认值为0 1 auto，后两个属性可选。

<style> /* 基本语法*/  
    .item { flex: <'flex-grow'><'flex-shrink'><'flex-basis'>}
    /* 默认：0 1 auto*/
    /* 快捷值 auto：1 1 auto*/
    /* 快捷值 none：0 0 auto*/
</style>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .container3{
                margin: 10px;
                border: 1px solid black;
                width: 300px;
                height: 50px;
                background: red;
                display: flex;
            }
            .item{
                background-color: gold;
                border: 1px solid red;
                flex: 0 1 10px; /* 0 不伸，1 不缩，10px 宽度*/
            }
            .item_4{
                background-color: gold;
                border: 1px solid red;
                flex: 0 1 20px; /* 0 不伸，1 不缩，20px 宽度*/
            }
            
        </style>
    </head>
    <!--小程序将 div 换成 view ，body 换成 page-->
    <body>
        <div class="container3">
            <div class="item"> 1</div>
            <div class="item"> 2</div>
            <div class="item"> 3</div>
            <div class="item_4"> 4</div>
        </div>
    </body>
</html>

image-20190111121124791

<style>
    .item{
        background-color: gold;
        border: 1px solid red;
        flex: 1 1 10px; /* 1 伸，1 不缩，10px 宽度*/
    }
    .item_4{
       background-color: gold;
       border: 1px solid red;
       flex: 2 1 10px; /* 2 伸,且占据多一倍的空间，1 不缩，10px 宽度*/
    }
</style>

image-20190111101534409

水平及垂直对齐方案

flex 属性：justify-content

定义了项目在主轴（水平方向）上的对齐方式。

<style> /* 基本语法*/  
    .box { justify-content: flex-start | flex-end | center | space-between | space-around;}
</style>

flex-start（默认值）：左对齐
flex-end：右对齐
center：居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

img

flex 属性：align-items

定义项目在交叉轴（垂直方向）上的排列

<style> /* 基本语法*/ /* 多联系 baseline stretch*/
    .box { align-items: flex-start | flex-end | center | baseline | stretch;}
</style>

img

flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .container{
                height: 200px;  /* 容器的height*/ 
                border: 1px solid black;
                display: flex;
                flex-direction: row;
                align-items: stretch; /* 内部项目没有设置height, 会自动上下充满容器的 height*/ 
            }
            .item{
                width: 100px;   /* 容器内的项目没有设置 height*/
                background-color: gold;
                border: 1px solid red;
            }
        </style>
    </head>
    <!--小程序将 div 换成 view ，body 换成 page-->
    <body>
        <div class="container">
         <div class="item"> 1</div>
         <div class="item"> 2</div>
         <div class="item"> 3</div>
         <div class="item"> 4</div>
         <div class="item"> 5</div>
         <div class="item"> 6</div>
         <div class="item"> 7</div>
    </div>
    </body>
</html>

image-20190110205540062

<style>
    .container{
        height: 200px;
        border: 1px solid black;
        display: flex;
        flex-direction: row;
        align-items: stretch;  /* 如果容器内的项目 height 已经设置固定值，容器使用 stretch 也不会使容器充满*/
    }
        .item{
        width: 100px;
        height: 150px;
        background-color: gold;
        border: 1px solid red;
    }
</style>

image-20190110210733415

<style>
    .container{
        height: 200px;
        border: 1px solid black;
        display: flex;
        flex-direction: row;
        align-items: center; /* 改成 center 则会居中对齐，不会充满*/
    }
</style>

image-20190110210303224

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .container{
                height: 200px;
                border: 1px solid black;
                display: flex;
                flex-direction: row;
                align-items: baseline; /* 项目的第一行文字的基线对齐*/
            }
            .item{
                width: 100px;
                height: 150px;
                background-color: gold;
                border: 1px solid red;
            }
        </style>
    </head>
    <!--小程序将 div 换成 view ，body 换成 page-->
    <body>
        <div class="container">
         <!--只设置一个 padding，由于 align-items:baseline 的作用，也会引起 文字底部对齐，而是其它的也跟着往下移动了 20px-->
         <div class="item" style="padding: 20px;"> 1</div>
         <div class="item"> 2</div>
         <div class="item"> 3</div>
         <div class="item"> 4</div>
         <div class="item"> 5</div>
         <div class="item"> 6</div>
         <div class="item"> 7</div>
    </div>
    </body>
</html>

flex 属性：align-self

允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。

<style> /* 基本语法*/ 
    .item { align-self: auto | flex-start | flex-end | center | baseline | stretch; }
    /* 默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch, 除了auto，其他都与align-items属性完全一致*/
</style>

img

flex 属性：align-content

定义了多根轴线的对齐方式，如果项目只有一根轴线，该属性不起作用，例如，当有多少 2 行及以上的div，就有多少 2 行及以上的主轴。

<style> /* 基本语法*/ 
    .box { align-content: flex-start | flex-end | center | space-between | space-around | stretch;}
</style>

img

flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等，所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            body{
                height: 500px;
                border: 1px solid black;
                display: flex;
                flex-wrap: wrap;  /* 不换行，则就只有一个主轴，因此换行 wrap 必不可少*/
                /* 主轴（水平方向）分别为container,container2,container3*/
                align-content: space-between;
            }
            .container,.container2{
                height: 100px;
                width: 100%;
                border: 1px solid black;
                background: red;
                display: flex;
                flex-direction: row;
                align-items: baseline;
            }
            .container3{
                border: 1px solid black;
                height: 50px;
                background: red;
                display: flex;
                flex-wrap: wrap;
            }
            .item{
                width: 100px;
                background-color: gold;
                border: 1px solid red;
            }
        </style>
    </head>
    <!--小程序将 div 换成 view ，body 换成 page-->
    <body>
        <div class="container">
            <div class="item"> 1</div>
            <div class="item"> 2</div>
            <div class="item"> 3</div>
            <div class="item"> 4</div>
        </div>
        <div class="container2">
            <div class="item"> 1</div>
            <div class="item"> 2</div>
            <div class="item"> 3</div>
            <div class="item"> 4</div>
        </div>
        <div class="container3">
            <div class="item"> 1</div>
            <div class="item"> 2</div>
            <div class="item"> 3</div>
            <div class="item"> 4</div>
        </div>
    </body>
</html>

image-20190110214210533

项目排列先后次序

flex 属性：order

设置弹性盒对象元素的顺序，数值越小，排列越靠前，默认为0。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .container3{
                margin: 10px;
                border: 1px solid black;
                width: 300px;
                height: 50px;
                background: red;
                display: flex;   /* 必须加上 display: flex; 否则无效*/
            }
            .item{
                background-color: gold;
                border: 1px solid red;
                flex: 1 1 10px;
                order: 1;  /* 然后排列*/
            }
            .i2{
                order: 2;  /* 最后排列*/
            }
            .item_4{
                background-color: gold;
                border: 1px solid red;
                flex: 2 1 10px;
                order: 0;   /* 先排列 默认值*/
            }
        </style>
    </head>
    <!--小程序将 div 换成 view ，body 换成 page-->
    <body>
        <div class="container3">
            <div class="item"> 1</div>
            <div class="item i2"> 2</div>
            <div class="item"> 3</div>
            <div class="item_4"> 4</div>
        </div>
    </body>
</html>

image-20190111104037241

HTML和小程序的 12 种 flex 布局

排列方向及换行

flex 属性：flex-direction

flex 属性：flex-wrap

flex 属性：flex-flow

项目伸缩及宽度

flex 属性：flex-grow

flex 属性：flex-shrink

flex 属性：flex-basis

flex 属性：flex

水平及垂直对齐方案

flex 属性：justify-content

flex 属性：align-items

flex 属性：align-self

flex 属性：align-content

项目排列先后次序

flex 属性：order

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

网页前端后台技巧（CSS+HTML）