找回密码
当前位置：前端开发者 > CSS > 正文

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

2019-02-20 20:20:00 分类：CSS 阅读(1266) 评论(0)
前端开发中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
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论