hi,你好!欢迎访问本站!登录
本站由简数采集腾讯云宝塔系统阿里云强势驱动
当前位置:首页 - HTML - 正文 请牢记本站网址www.sosophp.cn

怎样经由过程flex举行网页规划【html5教程】

2019-11-26HTML搜搜PHP网61°c
A+ A-
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网别的相干文章!

  选择打赏方式
微信赞助

打赏

QQ钱包

打赏

支付宝赞助

打赏

  选择分享方式
  移步手机端
怎样经由过程flex举行网页规划【html5教程】

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章
标签: