博主信息
xingzhi的博客
博文
26
粉丝
0
评论
0
访问量
4951
积分:0
P豆:52

Flex布局-仿照某生活服务平台网站首页_201909120008

2019年09月12日 00:21:21阅读数:50博客 / xingzhi的博客 / HTML+css

flex属性:

控制容器中的子元素项目排列方式

        display: flex; /* 将子元素紧紧的排列在父元素容器中 */

        flex-direction: row;/* 可写可不写,默认的是行排列,水平正向,不换行 */

        flex-direction: row-reverse; /* 子元素项目水平反向排序 */

        flex-direction: column;/* 子元素垂直正向排列  */

        flex-direction: column-reverse;/* 子元素垂直反向排列 */

控制容器中的子元素项目换行方式 

        flex-wrap: nowrap; /* 默认不换行,缩放排列 */

        flex-wrap: wrap;/* 换行排列,不缩放 */

水平主轴上的排列方式

        justify-content: flex-start; (justify-content: left;)     /* 默认的左对齐 */

        justify-content: flex-end;/* 右对齐 */

        justify-content: center;/* 居中对齐 */

        justify-content: space-between;/* 两边对齐,项目之间等距排列分离 */

        justify-content: space-around;/* 项目两边等距排列  */

        justify-content: space-evenly; /* 项目之间等距评平均分配主轴上的剩余空间 */

交叉轴上的排列方式

       align-items: flex-start;/* 默认顶端对齐 */

        align-items: flex-end; /* 默认底端对齐 */

        align-items: center;/* 垂直居中对齐 */

        align-items: stretch; /* 没有设置子元素高度时会自动充满容器 */


Flex布局-仿照某生活服务平台网站首页-截图:

fehelper-html-io-0909-demo2-html-1568218382404.jpg

html部分:

实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Flex布局-仿照某生活服务平台网站首页</title>
</head>

<body>
    <header>
        <input type="text" placeholder="搜索">
        <a href=""><img src="static/images/news.png" alt=""></a>
    </header>
    <div class="nav-icon">
        <a href="" class="nav-item"><img src="static/images/nav-001.png" alt="">
            <p>权益中心</p>
        </a>
        <a href="" class="nav-item"><img src="static/images/nav-002.png" alt="">
            <p>市民服务</p>
        </a>
        <a href="" class="nav-item"><img src="static/images/nav-003.png" alt="">
            <p>社***康</p>
        </a>
        <a href="" class="nav-item"><img src="static/images/nav-004.png" alt="">
            <p>扫码乘车</p>
        </a>
    </div>
    <div class="list-icon">
        <a href="" class="list-item" class="list-item">
            <img src="static/images/nav-005.png" alt="">
            <p>公交充值</p>
        </a>
        <a href="" class="list-item">
            <img src="static/images/nav-006.png" alt="">
            <p>城市活动</p>
        </a>
        <a href="" class="list-item">
            <img src="static/images/nav-007.png" alt="">
            <p>惠民基金</p>
        </a>
        <a href="" class="list-item">
            <img src="static/images/nav-008.png" alt="">
            <p>福利商城</p>
        </a>
        <a href="" class="list-item">
            <img src="static/images/nav-009.png" alt="">
            <p>阅读</p>
        </a>
        <a href="" class="list-item">
            <img src="static/images/nav-010.png" alt="">
            <p>借钱</p>
        </a>
        <a href="" class="list-item">
            <img src="static/images/nav-011.png" alt="">
            <p>房产</p>
        </a>
        <a href="" class="list-item">
            <img src="static/images/nav-012.png" alt="">
            <p>体育</p>
        </a>
        <a href="" class="list-item">
            <img src="static/images/nav-013.png" alt="">
            <p>金币</p>
        </a>
        <a href="" class="list-item">
            <img src="static/images/nav-014.png" alt="">
            <p>体验</p>
        </a>
        <a href="" class="list-item">
            <img src="static/images/nav-015.png" alt="">
            <p>就医</p>
        </a>
        <a href="" class="list-item">
            <img src="static/images/nav-016.png" alt="">
            <p>全部</p>
        </a>
        <a href="" class="list-item">
            <img src="static/images/nav-017.png" alt="">
            <p>全部</p>
        </a>
        <a href="" class="list-item">
            <img src="static/images/nav-018.png" alt="">
            <p>全部</p>
        </a>
        <a href="" class="list-item">
            <img src="static/images/nav-019.png" alt="">
            <p>全部</p>
        </a>
    </div>
    <div class="slide">
        <a href="" class="banner"><img src="static/images/banner.png" alt=""></a>
    </div>
    <div class="slide nav-img">
        <a href="">
            <div class="nav-img-left">
                <span>我要办理</span>
                <p>登记审批</p>
            </div>
            <img src="static/images/fl-001.png" alt="">
        </a>
        <a href="">
            <div class="nva-img-left">
                <span>我要缴费</span>
                <p>充值|缴费|罚款</p>
            </div>
            <img src="static/images/fl-002.png" alt="">
        </a>
        <a href="">
            <div class="nav-img-left">
                <span>我要办理</span>
                <p>登记审批</p>
            </div>
            <img src="static/images/fl-003.png" alt="">
        </a>
        <a href="">
            <div class="nva-img-left">
                <span>我要缴费</span>
                <p>充值|缴费|罚款</p>
            </div>
            <img src="static/images/fl-004.png" alt="">
        </a>
    </div>
    <div class="slide hot-title">
        <h2>热门服务</h2>
    </div>
    <div class="slide servicr">
        <a href="">
            <p>积分落户</p>
            <img src="static/images/t1.png" alt="">
        </a>
        <a href="">
            <p>居住证</p>
            <img src="static/images/t2.png" alt="">
        </a>
        <a href="">
            <p>市民卡申领</p>
            <img src="static/images/t3.png" alt="">
        </a>
        <a href="">
            <p>找车位</p>
            <img src="static/images/t4.png" alt="">
        </a>
        <a href="">
            <p>实时公交</p>
            <img src="static/images/t5.png" alt="">
        </a>
        <a href="">
            <p>违章处理</p>
            <img src="static/images/t6.png" alt="">
        </a>
    </div>
    <div class="slide hot-title">
        <h2>热门消息</h2>
    </div>
    <div class="slide list">
        <a href="">
            <div class="list-left">
                <h2>临杭大道正式通车桐乡加速融入杭州权威!中考第一批36个招生单位录取分数线全公布!杭二中滨江校区565分,学军中学西溪...</h2>
                <p><span>杭州发布 </span><em>2019-07-01</em></p>
            </div>
            <img src="static/images/news2.png" alt="">
        </a>
        <a href="">
            <div class="list-left">
                <h2>临杭大道正式通车桐乡加速融入杭州权威!中考第一批36个招生单位录取分数线全公布!杭二中滨江校区565分,学军中学西溪...</h2>
                <p><span>杭州发布 </span><em>2019-07-01</em></p>
            </div>
            <img src="static/images/news2.png" alt="">
        </a>
        <a href="">
            <div class="list-left">
                <h2>临杭大道正式通车桐乡加速融入杭州权威!中考第一批36个招生单位录取分数线全公布!杭二中滨江校区565分,学军中学西溪...</h2>
                <p><span>杭州发布 </span><em>2019-07-01</em></p>
            </div>
            <img src="static/images/news2.png" alt="">
        </a>
        <a href="">
            <div class="list-left">
                <h2>临杭大道正式通车桐乡加速融入杭州权威!中考第一批36个招生单位录取分数线全公布!杭二中滨江校区565分,学军中学西溪...</h2>
                <p><span>杭州发布 </span><em>2019-07-01</em></p>
            </div>
            <img src="static/images/news2.png" alt="">
        </a>
        <a href="">
            <div class="list-left">
                <h2>临杭大道正式通车桐乡加速融入杭州权威!中考第一批36个招生单位录取分数线全公布!杭二中滨江校区565分,学军中学西溪...</h2>
                <p><span>杭州发布 </span><em>2019-07-01</em></p>
            </div>
            <img src="static/images/news2.png" alt="">
        </a>
    </div>
</body>

</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

css部分:

实例

    * {
        margin: 0;
        padding: 0;
    }
    
    a {
        text-decoration: none;
    }
    
    header {
        padding: 0 20px;
        height: 45px;
        background: #4a7cf6;
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
        align-items: center;
    }
    
    header>input {
        background: #fefefe;
        border-radius: 20px;
        height: 25px;
        padding-left: 1rem;
        width: 80%;
    }
    
    header a img {
        width: 20px;
        height: 20px;
    }
    
    .nav-icon {
        background: #4a7cf6;
        padding: 10px 0;
        display: flex;
        flex-flow: row wrap;
        justify-content: space-evenly;
    }
    
    .nav-icon .nav-item {
        text-align: center;
    }
    
    .nav-icon .nav-item>img {
        width: 40px;
        height: 40px;
    }
    
    .nav-icon .nav-item p {
        color: #fefefe;
        font-size: 0.9rem;
    }
    
    .list-icon {
        margin: 20px 0;
        display: flex;
        flex-flow: row wrap;
        justify-content: space-evenly;
    }
    
    .list-icon .list-item {
        width: 20%;
        margin: 10px 0;
        text-align: center;
    }
    
    .list-icon .list-item>img {
        width: 30px;
        height: 30px;
    }
    
    .list-icon .list-item p {
        font-size: 0.8rem;
        color: #666666;
    }
    
    .slide {
        width: 90%;
        margin: 10px auto;
    }
    
    .slide .banner>img {
        width: 100%;
    }
    
    .slide.nav-img,
    .slide.nav-img a {
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
        align-items: center;
    }
    
    .slide.nav-img a {
        width: 45%;
        margin: 1% 0 2% 0%;
        padding: 2%;
        background: #fff;
        box-shadow: 0 1px 9px #e4e4e4;
    }
    
    .slide.nav-img span {
        font-weight: 500;
        font-size: 1rem;
        color: #3d4457;
    }
    
    .slide.nav-img p {
        font-size: 0.8rem;
        color: #a9a9a9;
    }
    
    .slide.nav-img a>img {
        width: 32px;
        height: 32px;
    }
    
    .hot-title h2 {
        margin: 20px 0;
        font-size: 1rem;
        font-weight: 600;
        border-left: 3px solid #327dfd;
        padding-left: 10px;
    }
    
    .slide.servicr,
    .slide.list,
    .slide.list a {
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
    }
    
    .slide.servicr a {
        width: 31%;
        background: #f3f8fe;
        text-align: center;
        margin: 5px 0;
    }
    
    .slide.servicr a>p {
        color: #333333;
        font-size: 1rem;
        padding: 10px 0;
    }
    
    .slide.servicr a>img {
        width: 100%;
    }
    
    .slide.list a {
        margin: 15px 0;
    }
    
    .slide.list .list-left {
        flex: 1;
        padding: 5px 0;
    }
    
    .slide.list .list-left>h2 {
        font-size: 0.9rem;
        color: #333;
        margin-bottom: 10px;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
    }
    
    .slide.list .list-left>p {
        color: #959595;
        font-size: 0.8rem;
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
    }
    
    .slide.list .list-left>p>em {
        font-style: normal;
        text-align: right;
    }
    
    .slide.list a>img {
        width: 100px;
        height: 100px;
        margin-left: 20px;
    }

运行实例 »

点击 "运行实例" 按钮查看在线实例


意外发现:

1、在flex容器子元素中,text-align: center; 不仅能水平居中文字,还能水平居中子元素中的图片

2、在flex容器子元素中,当固定了右侧元素的大小后,对左侧元素定义flex: 1;可以自动给左侧元素分配空间,使左右子元素排列在同一水平轴上

批改状态:合格

老师批语:看上去不错的, 其实掌握了flex, 之前很多pc端盒模型的诡异问题,都不再存在了

全部评论

文明上网理性发言,请遵守新闻评论服务协议

条评论
暂无评论暂无评论!