弹性布局

Posted 2020-11-25 a155-

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了弹性布局相关的知识，希望对你有一定的参考价值。

弹性容器：在元素上设置了display：flex属性的即为弹性容器，弹性容器上的弹性子元素就会按照弹性布局的方式进行布局

弹性子元素：弹性容器上的直接字元素即为弹性子元素

注意:默认弹性子元素只会排成1行或1列，不会换行。

一、

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #parent{
                /*设置id为parent的元素为弹性容器。里面的直接子元素的布局方式即为弹性布局*/
                display: flex;
                width: 900px;
                height: 900px;
                background: chocolate;
                margin: 0 auto;
                /*弹性布局主轴：确定子元素的布局是水平排布还是竖直排布*/
                /*设置主轴的方向：flex-direction       侧轴为主轴的垂直方向
                 row（默认值）：子元素从左到右进行排布
                 row-reverse：子元素从右到左进行排布
                 column：子元素从上到下进行排布
                 column：子元素从下到上进行排布
                 * */
                
                flex-direction:row;
                /*设定主轴的排布方式：
                 justify-content
                 flex-start（默认）向主轴的开始端靠拢
                 flex-end：向主轴的末尾靠拢
                 center：向主轴的中间靠拢
                 space-between：平均分布，两边没有边距
                 space-around：平均分布两边有边距，两边的边距是中间的一半
                 space-evenly:平均分布，两边的边距和中间的一样
                 * */
                justify-content: space-evenly;
                /*设定侧轴的排布方式（单行）
                 align-items：
                 stretch（默认值）：拉伸。在不设置子元素高度的情况下，默认会拉伸到跟父元素一致的的高度。
                 flex-start：靠近侧轴的开端
                 flex-end：靠近侧轴的末端
                 center：在侧轴居中
                 * */
                align-items: center;
            }
            .child{
                width: 200px;
                height: 200px;
                background:pink;
            }
        </style>
    </head>
    <body>
        <div id="parent">
            <!--div是块级元素，默认占据一整行-->
            <div class="child" style="background: yellow;">1</div>
            <div class="child" style="background: violet;">2</div>
            <div class="child" style="background: cornflowerblue;">3</div>
        </div>
    </body>
</html>

二、

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .parent{
                width: 600px;
                height: 600px;
                background:blanchedalmond;
                margin: 0 auto;
                display: flex;
                /*设置弹性可以换行
                 flex-wrap
                 nowrap(默认)不换行
                 wrap换行
                 * */
                flex-wrap: wrap;
                /*设置侧轴的多行排布
                 stretch(默认拉伸)
                 flex-start:靠近侧轴的开端
                 flex-end:靠近侧轴的结束端
                 space-between:平均分布，两边没有间距
                 space-around：平均分布，两边间距是中间的一半
                 space-evenly：平均分布，两边的间距和中间一样
                 * */
                align-content: flex-start;
            }
            .child{
                width: 200px;
                height: 200px;
                
            }
        </style>
    </head>
    <body>
        <div class="parent">
            <div class="child" style="background: yellow;">1</div>
            <div class="child" style="background: violet;">2</div>
            <div class="child" style="background: cornflowerblue;">3</div>
            <div class="child" style="background: yellow;">1</div>
            <div class="child" style="background: violet;">2</div>
            <div class="child" style="background: cornflowerblue;">3</div>
        </div>
    </body>
</html>

剩余空间的分布

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            html,body{
                height: 100%;
            }
            .page{
                width: 100%;
                height: 100%;
                background: blueviolet;
                display: flex;
            }
            .lanmu{
                background: greenyellow;
                /*flex可以定义剩余空间的占据情况*/
                /*分配剩余空间的2份（比例）*/
                flex: 2;
            }
            .main{
                background: teal;
                /*分配剩余空间的1份*/
                flex: 1;
            }
            .ad{
                width: 200px;
                background: darkred;
            }
        </style>
    </head>
    <body>
        <div class="page">
            <div class="lanmu">栏目</div>
            <div class="main">主要内容</div>
            <div class="ad">广告</div>
        </div>
    </body>
</html>

弹性子元素的排布

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #parent{
                /*设置id为parent的元素为弹性容器。里面的直接子元素的布局方式即为弹性布局*/
                display: flex;
                width: 900px;
                height: 900px;
                background: chocolate;
                margin: 0 auto;
                
            }
            .child{
                width: 200px;
                height: 200px;
                background:pink;
            }
            .c3{
                /*单独对侧轴的子元素进行排布
                 flex-start
                 flex-end
                 stretch
                 center
                 * */
                align-self: center;
            }
        </style>
    </head>
    <body>
        <!--order: 在子元素上设置order ，可以按照从小到大的方式进行排序-->
        <div id="parent">
            <!--div是块级元素，默认占据一整行-->
            <div class="child" style="background: yellow; order: 5;">1</div>
            <!--一个元素可以有多个类-->
            <div class="child c3" style="background: violet; order: 3;">2</div>
            <div class="child" style="background: cornflowerblue;order: 1;">3</div>
            <div class="child" style="background: violet;order: 2;">4</div>
            <div class="child" style="background: cornflowerblue;order: 4;">5</div>
        </div>
    </body>
</html>

以上是关于弹性布局的主要内容，如果未能解决你的问题，请参考以下文章