提供Discuz ,ECShop ,PHPCMS ,帝国CMS ,CSS教程 ,PHP教程 ,DedeCMS ,WordPress ,HTML教程等cms问题查询.
当前位置: CSS教程 > 怎样经由过程flex举行网页规划【css教程】,flex

flex称为弹性规划,当父元素设置为flex值后子元素会自动成为其成员,再经由过程设置属性值来完成种种规划结果。例经由过程给父元素设置justify-content属性完成程度垂直居中结果

经由过程Flex能够轻便、完全、相应式地完成种种页面规划。跟着浏览器的生长,如今,它已得到了一切浏览器的支撑,这意味着,如今就可以很安全地运用这项功用。接下来将和人人分享怎样经由过程flex举行网页规划

【引荐课程:CSS教程

flex规划

称为"弹性盒模子", 当父容器设置了display:flex时,子元素自动成为其成员, 容器默许存在两根轴:程度方向的主轴和垂直的交织轴,项目默许沿主轴分列。

flex容器(父容器)的一些属性:

flex-direction:决议主轴的方向(即项目的分列方向)

flex-wrap:假如一条轴线排不下,怎样换行

flex-flow:是flex-direction属性和flex-wrap属性的简写情势,默许值为row nowrap

justify-content:定义了项目在主轴上的对齐体式格局

align-items:定义项目在交织轴上怎样对齐

align-content:定义了多根轴线的对齐体式格局。假如项目只要一根轴线,该属性不起作用

实例

flex完成程度垂直居中

* {
            margin: 0;
            padding: 0;
        }

html {
            width: 100%;
            height: 100%;
        }
 body {
            display: flex;
            width: 100%;
            height: 100%;
            background: #eee;
            justify-content: center;
            align-items: center;
        }
 .box {
            width: 200px;
            height: 200px;
            background:pink;
        }

结果图:

两列等高规划:

左侧牢固宽度,右侧占有盈余宽度:

<style>
    *{
        margin: 0;
        padding:0;
    }
    .grid{
        display: flex;
        border: 1px solid #ccc;
    }
    .left{
    
        background-color:pink;
        flex-basis: 200px;
}
    .right{
    
        background-color:skyblue;
        flex-basis:calc(100% - 200px);
    }
</style>

结果图:

总结:以上就是有关flex规划的有关内容了,愿望对人人有所协助。

以上就是怎样经由过程flex举行网页规划的细致内容,更多请关注ki4网别的相干文章!

「梦想一旦被付诸行动,就会变得神圣,如果觉得我的文章对您有用,请帮助本站成长」

分享到:
赞(0) 打赏

支付宝扫一扫打赏

微信扫一扫打赏

标签:

上一篇:

下一篇:

相关推荐

0 条评论关于"怎样经由过程flex举行网页规划【css教程】,flex"

最新评论

    暂无留言哦~~

博客简介

看古风美女插画Cos小姐姐,素材合集图集打包下载:炫龙网,好看二次元插画应有尽有,唯美小姐姐等你来。

友情链接

他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,但同学却不局限在一国一校,而是遍及全球!申请交换友链

服务热线:
 

 QQ在线交流

 旺旺在线