伸缩布局flex的简单运用

最新推荐文章于 2020-11-18 21:10:13 发布

越努力越幸运ky

最新推荐文章于 2020-11-18 21:10:13 发布

阅读量192

点赞数

分类专栏：其他文章标签： flex viewsport 移动端

本文链接：https://blog.csdn.net/kcwmt/article/details/88993045

版权

其他专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本篇文章是用伸缩布局flex来完成移动端手机百度页面。

第一步:为了适应不同的移动设备的宽度则需要在头部<head>中添加一段<meta>信息

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

因为代码中用到rem单位所以要先设置一下(1rem=10px)

html{
    font-size: 10px;
}
body{
    font-size: 1.6rem;
    background-color: #b8b5b5;
}

第二步：开始编码，将页面分为两部分，头部和内容

1 头部

html部分：

 <div class="bd-layout">     /*先设置一个总体div*/
        <div class="bd-header">      /*头部div*/
             <span class="current">推荐</span>
             <span>热点</span>
             <span>娱乐</span>
             <span>视频</span>
             <span>军事</span>
        </div>
    </div>

css部分：

 .bd-layout{
    width: 100%;
    height: 100%;
    /* background-color: #b8b5b5; */
}
.bd-header{
    width: 100%;
    height: 4rem;
    border-bottom: 0.1rem solid #cccccc;
    background-color: #fff;
    display: flex;   /* 伸缩布局 */   
    justify-content: space-around;/* 主轴两端对齐 */
    align-items: center;
    padding: 0.3rem;
    left: 0;
    top: 0;
}
.bd-header span.current{
    color: skyblue;
}

效果图：

2 内容

 HTML部分：
<!-- 内容 -->
    <div class="bd-content">
        <div class="cell1">
            <div class="cell1-top">14℃→31℃！清明节假期直接入夏？接下来的天气很任性……</div>
            <div class="cell1-center">
                <div><img src="image/0.jpg" alt=""></div>
                <div><img src="image/1.jpg" alt=""></div>
                <div><img src="image/2.jpg" alt=""></div>
            </div>
            <div class="cell1-bottom">江都市报</div>
        </div>
    </div>
    <div class="cell2">
            <div class="cell2-left"><img src="image/3.jpg" alt=""></div>
            <div class="cell2-right">
                <p>凉山牺牲消防员赵万昆入伍近20年 每天和母亲通话</p>
                <p>
                    <span>热点</span>
                    <span>新京报</span>
                </p>
            </div>
        </div>

css部分：

.bd-content{
    margin-top: 0rem; 
}
.bd-content .cell1{
    background-color: #fff;
    padding: 0.5rem;
    border-bottom: 1px solid rgb(170, 166, 166);
}
.cell1-center{
    display: flex;
    justify-content: space-around;
    align-items: center;

}
.cell1-center div{
      /* height: 6rem; */
      flex: 1;
      padding: 0.5rem;
}
.cell1-center div img{

    width: 100%;
}
.cell2{
    background-color: #fff;
   padding-top: 0rem;
   border-bottom: 1px solid rgb(170, 166, 166);
   display: flex;   /*伸缩布局*/

}
.cell2-left{
    
flex: 2; /*占总体部分2份*/
}
.cell2-left img{
   width: 100%;
   height: 100%;

}
.cell2-right{
    flex: 4; /*占总体部分4份*/
    display: flex;
    flex-direction: column;   /* 竖的方向，默认横向 */
    margin-left: 1rem;
}
/*first-child是指该p元素下第一个节点*/
.cell2-right p:first-child{
   
    flex: 1;
    line-height: 2.5rem;   /*行高*/
    overflow: hidden;

}
cell2-right p span{
    margin: 0.5rem;
}
.cell2-right p span:first-child{
    color: red;
}

效果图：

总结：总之运用伸缩布局flex，可以使代码更加方便简洁，还可以解决响应式问题，无论网页在pc端或移动端···打开都不会出现问题，虽然上面代码注释不多，但我相信大家应该看得懂，虽然网页简单，但是也是辛苦所写，一积一累，总成江河（flex还有很多知识需要学习，学海无涯，编码作乐）

越努力越幸运ky

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
伸缩布局flex的简单运用

本篇文章是用伸缩布局flex来完成移动端手机百度页面。第一步:为了适应不同的移动设备的宽度则需要在头部<head>中添加一段<meta>信息 <meta name="viewport" content="width=device-width, initial-scale=1.0">因为代码中用到rem单位所以要先设置一下(1rem=10px)...
复制链接

扫一扫

专栏目录