前端开发关于flex布局的属性整理

前端开发中rem怎么转换
前端开发怎么做个人博客
怎么搭建前端开发环境

flex布局是一种可伸缩的布局,相对于float布局方式,更加灵活简便。
html 代码

<!DOCTYPE html>
<html lang=”en”>
    <head>
        <meta charset=”UTF-8″ />
        <title>Document</title>
        <style type=”text/css”>
            #wraper {
                height: 600px;
                display: flex;
                background-color: #ccc;
                justify-content: space-between;
                padding: 20px;
                align-items: center;
                flex-wrap: wrap;
            }
            #box1 {
                width: 150px;
                height: 120px;
                background-color: red;
            }
            #box2 {
                width: 150px;
                height: 100px;
                background-color: yellow;
            }
            #box3 {
                width: 150px;
                height: 40px;
                background-color: blue;
            }
            #box4 {
                width: 150px;
                height: 200px;
                background-color: green;
            }
            @media screen and (max-width: 640px) {
                #box4 {
                    order: -1;
                }
            }
        </style>
    </head>
    <body>
        <div id=”wraper”>
            <div id=”box1″></div>
            <div id=”box2″></div>
            <div id=”box3″></div>
            <div id=”box4″></div>
        </div>
    </body>
</html>

上面就是一个flex布局的演示,它具有良好的响应性能。
当需要在水平方向伸缩时,水平向是主轴,垂直向是侧轴。若在垂直方向伸缩,则相反。
伸缩容器即是外部的盒子,伸缩项目是盒子内部包含的需要变换排列的小盒子。
display:flex;这是构建伸缩容器的属性,只有将display设置为flex,才可进行接下来的flex布局。dispaly也可设为inline-flex,同样可伸缩,只是这会让它成为内联元素,与inline-block相似。
flex-direction属性,用来定义主轴侧轴方向。有row,column,column-reverse,row-reverse四个值,默认值是row,表示在水平方向上展开可伸缩项,column代表在垂直方向上展开可伸缩项目。
column-reverse,row-reverse代表相反方向。下图即为设置为column的效果:
html 代码

<!DOCTYPE html>
<html lang=”en”>
    <head>
        <meta charset=”UTF-8″ />
        <title>Document</title>
        <style type=”text/css”>
            #wraper {
                height: 600px;
                display: flex;
                background-color: #ccc;
                padding: 20px;
                flex-direction: column;
            }
            #box1 {
                width: 150px;
                height: 120px;
                background-color: red;
            }
            #box2 {
                width: 150px;
                height: 100px;
                background-color: yellow;
            }
            #box3 {
                width: 150px;
                height: 40px;
                background-color: blue;
            }
            #box4 {
                width: 150px;
                height: 200px;
                background-color: green;
            }
        </style>
    </head>
    <body>
        <div id=”wraper”>
            <div id=”box1″></div>
            <div id=”box2″></div>
            <div id=”box3″></div>
            <div id=”box4″></div>
        </div>
    </body>
</html>

justify-content属性,用来表示可伸缩项目在主轴方向上的对齐方式。有flex-start,flex-end,center,space-between,space-around五个值,flex-start表示相对于主轴起点,flex-end表示相对于主轴终点对齐,center表示居中对齐 ,space-between表示两端对齐并将剩余空间在主轴方向上进行平均分配,space-around表示居中对齐然后在主轴方向上将剩余空间平均分配。下图为设置成space-between的效果:
html 代码

<!DOCTYPE html>
<html lang=”en”>
    <head>
        <meta charset=”UTF-8″ />
        <title>Document</title>
        <style type=”text/css”>
            #wraper {
                height: 600px;
                display: flex;
                background-color: #ccc;
                flex-direction: row;
                justify-content: space-between;
            }
            #box1 {
                width: 150px;
                height: 120px;
                background-color: red;
            }
            #box2 {
                width: 150px;
                height: 100px;
                background-color: yellow;
            }
            #box3 {
                width: 150px;
                height: 40px;
                background-color: blue;
            }
            #box4 {
                width: 150px;
                height: 200px;
                background-color: green;
            }
        </style>
    </head>
    <body>
        <div id=”wraper”>
            <div id=”box1″></div>
            <div id=”box2″></div>
            <div id=”box3″></div>
            <div id=”box4″></div>
        </div>
    </body>
</html>

align-items属性,用来表示可伸缩项目在侧轴方向上的对齐方式,有flex-start,flex-end,center,baseline,stretch五个值。baseline值是按照一个计算出来的基准线将项目沿基准线对齐,基准线的计算取决于可伸缩项目的尺寸及内容。stretch值是会让可伸缩项目在侧轴方向上进行拉伸,前提是项目在侧轴方向上没有设置尺寸,否则会按照你设置的尺寸来渲染。下图为设置成stretch的效果:
html 代码

<!DOCTYPE html>
<html lang=”en”>
    <head>
        <meta charset=”UTF-8″ />
        <title>Document</title>
        <style type=”text/css”>
            #wraper {
                height: 600px;
                display: flex;
                background-color: #ccc;
                padding: 20px;
                flex-direction: row;
                justify-content: space-between;
                align-items: stretch;
            }
            #box1 {
                width: 150px;
                background-color: red;
            }
            #box2 {
                width: 150px;
                background-color: yellow;
            }
            #box3 {
                width: 150px;
                background-color: blue;
            }
            #box4 {
                width: 150px;
                background-color: green;
            }
        </style>
    </head>
    <body>
        <div id=”wraper”>
            <div id=”box1″></div>
            <div id=”box2″></div>
            <div id=”box3″></div>
            <div id=”box4″></div>
        </div>
    </body>
</html>

flex-wrap属性,表示是否支持换行或者换列,它有nowrap,wrap,wrap-reverse三个值,nowrap是默认值,表示不换行或者换列,wrap表示换行或者换列,wrap-reverse表示支持换行或者换列,但是会沿着相反方向进行排列。
下面为换行效果:
html 代码

<!DOCTYPE html>
<html lang=”en”>
    <head>
        <meta charset=”UTF-8″ />
        <title>Document</title>
        <style type=”text/css”>
            #wraper {
                height: 600px;
                display: flex;
                background-color: #ccc;
                padding: 20px;
                flex-direction: row;
                justify-content: space-between;
                flex-wrap: wrap;
            }
            #box1 {
                width: 150px;
                height: 120px;
                background-color: red;
            }
            #box2 {
                width: 150px;
                height: 100px;
                background-color: yellow;
            }
            #box3 {
                width: 150px;
                height: 40px;
                background-color: blue;
            }
            #box4 {
                width: 150px;
                height: 200px;
                background-color: green;
            }
        </style>
    </head>
    <body>
        <div id=”wraper”>
            <div id=”box1″></div>
            <div id=”box2″></div>
            <div id=”box3″></div>
            <div id=”box4″></div>
        </div>
    </body>
</html>

align-content属性,用来表示换行之后各个伸缩行的对齐方式,它有 stretch,flex-start,flex-end,center,space-between,space-around六个值,意义和align-items属性取值意义相同。
flex-flow属性,这是一个复属性,如同border一样,它是flex-direction和flex-wrap的复合属性,flex-direction:row;flex-wrap:wrap就等同于flex-flow:row wrap。
order属性,这个属性是用来指定排列顺序,默认情况下,每个伸缩项的order都是0,改属性可为正可为负,越大的值会被排列在越后面。下面为box4设置后效果
html 代码

<!DOCTYPE html>
<html lang=”en”>
    <head>
        <meta charset=”UTF-8″ />
        <title>Document</title>
        <style type=”text/css”>
            #wraper {
                height: 600px;
                display: flex;
                background-color: #ccc;
                padding: 20px;
                flex-direction: row;
                justify-content: space-between;
                flex-wrap: wrap;
            }
            #box1 {
                width: 150px;
                height: 120px;
                background-color: red;
            }
            #box2 {
                width: 150px;
                height: 100px;
                background-color: yellow;
            }
            #box3 {
                width: 150px;
                height: 40px;
                background-color: blue;
            }
            #box4 {
                width: 150px;
                height: 200px;
                background-color: green;
                order: -1;
            }
        </style>
    </head>
    <body>
        <div id=”wraper”>
            <div id=”box1″></div>
            <div id=”box2″></div>
            <div id=”box3″></div>
            <div id=”box4″></div>
        </div>
    </body>
</html>

align-self属性,这个属性是设置各个可伸缩项在侧轴上的对齐方式的,同align-item一样,只是align-self属性是设置在可伸缩项上的,它会覆盖之前的align-item属性,让每个可伸缩项在侧轴上具有不同的对齐方式,取值和align-item相同。
flex属性,这个属性是加在伸缩项上面的,它定义了伸缩项如何分配主轴尺寸,设置为auto或者数字,auto浏览器会自动均分,数字会按照伸缩项所占的数字比重来分配空间。
html 代码

<!DOCTYPE html>
<html lang=”en”>
    <head>
        <meta charset=”UTF-8″ />
        <title>Document</title>
        <style type=”text/css”>
            #wraper {
                height: 600px;
                display: flex;
                background-color: #ccc;
                padding: 20px;
                flex-direction: row;
                justify-content: space-between;
                flex-wrap: wrap;
            }
            #box1 {
                height: 120px;
                background-color: red;
                flex: 1;
            }
            #box2 {
                height: 100px;
                background-color: yellow;
                flex: 2;
            }
            #box3 {
                height: 40px;
                background-color: blue;
                flex: 1;
            }
            #box4 {
                height: 200px;
                background-color: green;
                flex: 2;
            }
        </style>
    </head>
    <body>
        <div id=”wraper”>
            <div id=”box1″></div>
            <div id=”box2″></div>
            <div id=”box3″></div>
            <div id=”box4″></div>
        </div>
    </body>
</html>

尤其提到的一点,margin在flex布局中能力很大,如果给某一个可伸缩项设置某个方向上的margin为auto,那么这个可伸缩项就会占据这个方向上所有的剩余空间为自己的margin。如下面我们把box1的margin-right设置为auto;
html 代码

<!DOCTYPE html>
<html lang=”en”>
    <head>
        <meta charset=”UTF-8″ />
        <title>Document</title>
        <style type=”text/css”>
            #wraper {
                height: 600px;
                display: flex;
                background-color: #ccc;
                flex-direction: row;
                justify-content: space-between;
                flex-wrap: wrap;
            }
            #box1 {
                width: 150px;
                margin-right: auto;
                height: 120px;
                background-color: red;
            }
            #box2 {
                width: 150px;
                height: 100px;
                background-color: yellow;
            }
            #box3 {
                width: 150px;
                height: 40px;
                background-color: blue;
            }
            #box4 {
                width: 150px;
                height: 200px;
                background-color: green;
            }
        </style>
    </head>
    <body>
        <div id=”wraper”>
            <div id=”box1″></div>
            <div id=”box2″></div>
            <div id=”box3″></div>
            <div id=”box4″></div>
        </div>
    </body>
</html>
浪潮前端开发怎么样
51前端开发怎么样
前端开发怎么自学
» 本文来自:前端开发者 » 《前端开发关于flex布局的属性整理》
» 本文链接地址:https://www.rokub.com/8130.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!