弹性布局flex

后盾人CSS课程学习笔记

CSS3 弹性盒模型（Flex Box）

弹性盒子是 CSS3 的一种新的布局模式。

CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

浏览器支持

表格中的数字表示支持该属性的第一个浏览器的版本号。

紧跟在数字后面的 -webkit- 或 -moz- 为指定浏览器的前缀。

属性	Chrome	Edge	Fire Fox	Safari	Opera
Basic support (single-line flexbox)	29.0 21.0 -webkit-	11.0	22.0 18.0 -moz-	6.1 -webkit-	12.1 -webkit-
Multi-line flexbox	29.0 21.0 -webkit-	11.0	28.0	6.1 -webkit-	17.0 15.0 -webkit- 12.1

弹性盒模型

声明定义

容器盒子里面包含着容器元素，使用 display:flex 或 display:inline-flex 声明为弹性盒子。

使用display: flex进行声明定义的元素将可以看作是一个弹性盒容器，容器内的元素将可以使用后续的一些样式进行处理。当然，flex容器下的子元素也可以使用display: flex将它定义成弹性盒容器，即容器中还有容器。

<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>声明flex布局</title>

        <style>
            * {
                margin: 0;
                padding: 0;
            }

            footer {
                /* 使用 display: flex 或 display: inline-flex 将元素设置成弹性盒模型 */
                /* display: flex 将元素设置成块状的弹性盒模型 */
                /* display: inline-flex 将元素设置成行状的弹性盒模型 */
                display: flex;
                /* display: inline-flex; */
                background-color: #ccc;
                height: 100px;
            }
        </style>
    </head>
    <body>
        <footer>
            <div>moxuan</div>
            <div>max</div>
            <div>xyx</div>
        </footer>
    </body>
</html>

flex-direction

flex-direction：用于控制弹性盒子的元素排列方向（用于控制弹性盒子主轴的方向）

flex-direction	功能描述
row	从左到右水平排列元素（默认值）
row-reverse	从右向左排列元素
column	从上到下垂直排列元素
column-reverse	从下到上垂直排列元素

<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>flex-direction</title>

        <style>
            * {
                margin: 0;
                padding: 0;
            }

            body {
                margin: 10px 20px;
            }

            main {
                /* 将 mian 元素定义成 flex 容器 */
                display: flex;
                /* flex-direction 定义容器的主轴方向，默认是 row ,即水平方向 */
                flex-direction: row;
                /* flex-direction: row-reverse; */
                /* flex-direction: column; */
                /* flex-direction: column-reverse; */

                border: 2px solid #cccccc;
            }

            main div {
                width: 100px;
                height: 100px;
                background-color: red;
                margin: 10px;
            }
        </style>
    </head>
    <body>
        <main>
            <div>1</div>
            <div>2</div>
            <div>3</div>
        </main>
    </body>
</html>

flex-direction示例

flex-wrap

flex-wrap：规定flex容器在某一方向长度不够时是否换行，默认flex-wrap: nowarp不换行，此时对容器内的元素进行压缩处理（用于控制交叉轴（副轴）的方向）

flex-wrap按行换行，正常wrap方向是从上到下，wrap-reverse方向是从下到左

flex-wrap按列换行，正常wrap方向是从左到右，wrap-reverse方向是从右到左

flex-wrap	功能说明
nowrap	元素不拆行或不拆列（默认值）
wrap	容器元素在必要的时候拆行或拆列。
wrap-reverse	容器元素在必要的时候拆行或拆列，但是以相反的顺序

<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>flex-wrap</title>

        <style>
            * {
                margin: 0;
                padding: 0;
            }

            body {
                margin: 10px 20px;
            }

            main {
                /* 容器宽度为280 < 3*100 */
                width: 280px;

                /* 将 mian 元素定义成 flex 容器 */
                display: flex;
                /* flex-direction 定义容器的主轴方向，默认是 row ,即水平方向 */
                flex-direction: row;
                /* flex-wrap 规定flex容器是否换行，默认是 nowrap 不换行 */
                /* 此时当容器的指定方向装不下时，容器会对容器内的元素进行压缩处理 */
                flex-wrap: nowrap;
                /* flex-wrap: wrap; */
                /* flex-wrap: wrap-reverse; */

                border: 2px solid #cccccc;
            }

            main div {
                width: 100px;
                height: 100px;
                background-color: red;
                background-clip: content-box;
                padding: 10px;
                box-sizing: border-box;
            }
        </style>
    </head>
    <body>
        <main>
            <div>1</div>
            <div>2</div>
            <div>3</div>
        </main>
    </body>
</html>

flex-wrap示例

flex-flow

flex-flow: <flex-direction> <flex-wrap>，即flex-flow是flex-direction和flex-wrap的组合

flex容器中轴的概念

flex容器中有两种轴：主轴、副轴（交叉轴）

flex-direction规定主轴的方向；flex-wrap规定副轴的方向

例如：

当flex-direction: row; flex-wrap: wrap时，主轴为从左到右的水平轴（元素排列方向），副轴为从上到下的垂直轴（元素的换行方向）；
当flex-direction: row-reverse; flex-wrap: wrap-reverse时，主轴为从右到左的水平轴，副轴为从下到上的垂直轴；
当flex-direction: column; flex-wrap: wrap时，主轴为从上到下的垂直轴，副轴为从左到右的水平轴；
。。。。。。

对齐方式

<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>flex容器对齐方式</title>

        <style>
            * {
                margin: 0;
                padding: 0;
            }

            body {
                margin: 10px 20px;
            }

            main {
                height: 150px;

                display: flex;
                /* 根据 flex-direction: row; 当前主轴为从左到右 */
                flex-direction: row;
                /* 根据 flex-wrap: wrap; 当前副轴为从上到下 */
                flex-wrap: wrap;

                justify-content: flex-start;
                /* justify-content: flex-end; */
                /* justify-content: center; */
                /* justify-content: space-between; */
                /* justify-content: space-around; */
                /* justify-content: space-evenly; */
                /* justify-items: center; */
                /* align-content: stretch; */
                /* align-items: stretch; */

                border: 2px solid #cccccc;
            }

            main div {
                width: 100px;
                height: 100px;
                background-color: red;
                /* background-clip: content-box; */
                padding: 10px;
                box-sizing: border-box;
            }
        </style>
    </head>
    <body>
        <main>
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
        </main>
    </body>
</html>

justify-content

justify-content：设置主轴内容的对齐方式

justify-content	功能说明
flex-start	元素紧靠主轴起点对齐
flex-end	元素紧靠主轴终点对齐
center	元素沿主轴方向居中对齐
space-between	第一个元素靠起点，最后一个元素靠终点，余下元素平均分配空间
space-around	每个元素两侧的间隔相等。所以，元素之间的间隔比元素与容器的边距的间隔大一倍
space-evenly	元素间距离平均分配（这个样式好看）

justify-content示例

align-items

align-items：控制元素在行上的对齐方式（副轴）

align-items	功能说明
stretch	元素被拉伸以适应容器（默认值）（优先级低于width、height之类）
center	元素位于容器的中心
flex-start	元素位于容器的交叉轴开头
flex-end	元素位于容器的交叉轴结尾

align-items示例

align-content

align-content：控制行在副轴上的对齐方式

align-content	功能说明
stretch	将空间平均分配给元素
flex-start	元素紧靠副轴起点
flex-end	元素紧靠副轴终点
center	元素从弹性容器中心开始
space-between	第一个元素靠副轴起点，最后一个元素靠副轴终点，余下元素平均分配空间
space-around	每个元素两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍
space-evenly	元素间距离平均分配

align-content示例

弹性元素

align-self

align-self：对单个元素的副轴对齐方式控制，控制方式同align-items，不同之处在于align-self是作用在flex容器的元素上，而align-items直接作用在flex容器上。

flex-grow

flex-grow：用于将弹性盒子的可用空间，分配给弹性元素。可以使用整数或小数声明。

<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>flex容器对齐方式</title>

        <style>
            * {
                margin: 0;
                padding: 0;
            }

            body {
                margin: 10px 20px;
            }

            main {
                width: 560px;
                height: 150px;

                display: flex;
                /* 根据 flex-direction: row; 当前主轴为从左到右 */
                flex-direction: row;
                /* 根据 flex-wrap: wrap; 当前副轴为从上到下 */
                flex-wrap: wrap;

                border: 2px solid #cccccc;
            }

            main div {
                width: 100px;
                height: 100px;
                background-color: red;
                background-clip: content-box;
                padding: 10px;
                box-sizing: border-box;
                border: 1px solid red;
            }

            /* main 下的三个 div 元素 */
            /* flex-grow 属性值分别为 0 1 3 */
            /* 它们共同分配主轴方向的剩余空间 */
            /* 首先按照 flex-grow 的值的总和将剩余空间拆分 */
            /* flex-grow 值为 0 则表示不分配剩余空间 */
            /* flex-grow 值为 1 则表示分配一份空间 */
            /* flex-grow 值为 3 则表示分配 3 分空间 */
            main div:first-child {
                flex-grow: 0;
            }
            main div:nth-child(2) {
                flex-grow: 1;
            }
            main div:nth-child(3) {
                flex: 3;
            }
        </style>
    </head>
    <body>
        <main>
            <div>1</div>
            <div>2</div>
            <div>3</div>
        </main>
    </body>
</html>

flex-grow示例

flex-shrink

与 flex-grow 相反 flex-shrink 是在弹性盒子装不下元素时定义的缩小值。

缩小比例 = 不足的空间 / (元素1宽度 x 缩小比例) + (元素2宽度 x 缩小比例) ...
最终尺寸 = 元素3宽度 - (缩小比例 x  元素3的宽度) X 元素宽度

flex-basis

flex-basis：主轴的基准尺寸

flex

flex: <flex-grow> <flex-shrink> <flex-basis>，flex是flex-grow、flex-shrink和flex-basis的组合

order

order用于做元素的排序，默认order值为 0

order的值越大，元素越靠后

使用margin自动撑满空间技巧

margin-right: auto

比如对于顶部header，左边有一部分内容，右边有一部分内容

当所有的元素都是用的display: flex弹性盒模型的时候

此时，可以在左边的元素上使用margin-right: auto让左侧的元素自动撑满