收藏
批改状态：合格
老师批语：看上去不错的, 其实掌握了flex, 之前很多pc端盒模型的诡异问题,都不再存在了
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布局-仿照某生活服务平台网站首页-截图：
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;可以自动给左侧元素分配空间，使左右子元素排列在同一水平轴上
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
