收藏
批改状态：合格
老师批语：其实flex布局并不难, 就是熟悉几个属性就可以, 难就难在一个布局,必须要在大脑中想好, 这就考验大家的空间几何能力了, 还好, flex是一维的
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>php中文网</title>
<style>
ul li {
list-style-type: none;
}
a {
text-decoration: none;
}
body {
/*border: 1px solid red;*/
min-width: 320px;
max-width: 768px;
margin: 0 auto;
/*height: 2000px;*/
background-color: #edeff0;
overflow-y: initial;
position: relative;
/*y轴滑动隐藏*/
overflow-x: hidden;
/*课外，防止点击高亮 ios*/
-webkit-tap-highlight-color: transparent;
}
.top {
position: fixed;
top: 0;
width: 100%;
height: 42px;
display: flex;
/*flex-direction: row;*/
background-color: #444444;
min-width: 320px;
max-width: 768px;
/*固定定位后 margin 无效*/
left: 50%;
/*兼容苹果*/
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.top img:first-of-type {
width: 30px;
height: 30px;
border-radius: 50%;
margin-top: 5px;
margin-left: 5px;
}
.top img:last-of-type {
width: 30px;
height: 30px;
margin-top: 5px;
}
.top .logo {
flex: 1;
text-align: center;
}
.top .logo img {
width: 94px;
height: 35px;
}
.banner {
display: flex;
}
.banner img {
margin-top: 42px;
width: 100%;
height: 160px;
}
.nav {
/*width: 100%;*/
height: 170px;
background-color: white;
box-sizing: border-box;
}
.nav ul {
margin: 0;
padding: 8px;
display: flex;
}
.nav ul li {
flex: 1;
text-align: center;
height: 75px;
}
.nav ul li a {
text-align: center;
color: #000;
}
.nav ul li img {
width: 35px;
height: 35px;
}
h3 {
color: gray;
}
.content {
/*height: 500px;*/
color: gray;
}
.content ul {
margin: 0;
padding: 0;
display: flex;
}
.content ul li {
padding: 10px;
}
.content ul img {
width: 100%;
height: 90px;
}
.content div {
background-color: white;
display: flex;
padding: 10px;
margin-top: 10px;
height: 90px;
justify-content: flex-start;
}
.content div img {
height: 90px;
width: 100%;
}
.content div a {
flex: 0.45;
color: gray;
}
.content div p {
flex: 0.55;
margin-left: 20px;
}
.content div p span:first-of-type {
font-size: 0.55rem;
}
.scol {
font-size: 0.85rem;
background-color: black;
padding: 0.5px;
color: white;
border-radius: 20%;
}
.content div p span:last-of-type {
font-size: 0.7rem;
}
.content div .sdiff {
display: flex;
justify-content: space-between;
margin-top: 10px;
}
.gengduo {
background-color: white;
text-align: center;
padding: 5px;
}
.gengduo a {
color: gray;
}
.bcontent {
/*height: 285px;*/
}
.bcontent a p {
background-color: white;
color: gray;
display: flex;
justify-content: space-between;
padding: 5px;
}
body {
height: 2500px;
}
.footer {
background-color: #edeff0;
position: fixed;
bottom: 4px;
width: 100%;
height: 45px;
min-width: 320px;
max-width: 768px;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.footer ul {
display: flex;
margin: 0;
padding: 0;
text-align: center;
border-top: 1px solid #555555;
/*padding-top: 4px;*/
}
.footer ul li img {
width: 10%;
height: 15px;
}
.footer ul li a {
text-align: center;
color: gray;
text-decoration: none;
}
.footer ul li span {
text-align: center;
font-size: 0.76rem;
}
</style>
</head>
<body>
<div class="top">
<img src="https://img.php.cn/upload/avatar/000/000/001/0da00397c33db11f71b393f4a4648ca4.jpg" alt="">
<div class="logo">
<img src="https://m.php.cn/static/images/logo.png" alt="">
</div>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1568137491606&di=4a524f35569d6c6aa7843ce7c73f505b&imgtype=0&src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F01%2F47%2F40%2F095743ea6772c7d.jpg" alt="">
</div>
<div class="banner">
<img src="https://m.php.cn/static/images/ico/1.jpg" alt="">
</div>
<div class="nav">
<ul>
<li><a href=""><img src="https://m.php.cn/static/images/ico/html.png" alt=""><br>html</a></li>
<li><a href=""><img src="https://m.php.cn/static/images/ico/JavaScript.png" alt=""><br>javascript</a></li>
<li><a href=""><img src="https://m.php.cn/static/images/ico/code.png" alt=""><br>服务端</a></li>
<li><a href=""><img src="https://m.php.cn/static/images/ico/sql.png" alt=""><br>数据库</a></li>
</ul>
<ul>
<li><a href=""><img src="https://m.php.cn/static/images/ico/html.png" alt=""><br>html</a></li>
<li><a href=""><img src="https://m.php.cn/static/images/ico/JavaScript.png" alt=""><br>javascript</a></li>
<li><a href=""><img src="https://m.php.cn/static/images/ico/code.png" alt=""><br>服务端</a></li>
<li><a href=""><img src="https://m.php.cn/static/images/ico/sql.png" alt=""><br>数据库</a></li>
</ul>
</div>
<h3>推荐课程</h3>
<div class="content">
<ul>
<li><a href=""><img src="https://img.php.cn/upload/course/000/000/001/5d242759adb88970.jpg" alt=""></a></li>
<li><a href=""><img src="https://img.php.cn/upload/course/000/000/001/5d2426f409839992.jpg" alt=""></a></li>
</ul>
<div>
<a href=""><img src="https://img.php.cn/upload/course/000/000/035/5d2941e265889366.jpg" alt=""></a>
<p>
<a href="">CI框架30分钟极速入门</a>
<br>
<span class="scol">中级</span><span>49748次播放</span>
</p>
</div>
<div>
<a href=""><img src="https://img.php.cn/upload/course/000/000/035/5d2941e265889366.jpg" alt=""></a>
<p>
<a href="">CI框架30分钟极速入门</a>
<br>
<span class="scol">中级</span><span>49748次播放</span>
</p>
</div>
</div>
<br>
<h3>最新更新</h3>
<div class="content">
<div>
<a href=""><img src="https://img.php.cn/upload/course/000/000/014/5d2814b3a7a92573.jpg" alt=""></a>
<p>
<a href="">JavaScript极速入门</a>
<br>
<span>本套课程将帮助大家迅速掌握JavaScript这门高端的、动态的、弱类型编...</span>
<br>
<span class="sdiff">
<span class="scol">中级</span><span>49748次播放</span>
</span>
</p>
</div>
<div>
<a href=""><img src="https://img.php.cn/upload/course/000/000/020/5d521d6cbbeb7258.jpg" alt=""></a>
<p>
<a href="">Laravel 5.8 中文文档手册</a>
<br>
<span>《Laravel 5.1/5.8速查表：https://www.php.cn/phpkj/laravel...</span>
<br>
<span class="sdiff">
<span class="scol">中级</span><span>49748次播放</span>
</span>
</p>
</div>
<div>
<a href=""><img src="https://img.php.cn/upload/course/000/000/020/5d521d6cbbeb7258.jpg" alt=""></a>
<p>
<a href="">Laravel 5.8 中文文档手册</a>
<br>
<span>《Laravel 5.1/5.8速查表：https://www.php.cn/phpkj/laravel...</span>
<br>
<span class="sdiff">
<span class="scol">中级</span><span>49748次播放</span>
</span>
</p>
</div>
</div>
<br>
<h3>最新文章</h3>
<div class="content">
<div>
<p>
<a href="">wamp运行PHP中文字乱码</a>
<br>
<span>发布时间：2019-10-10</span>
</p>
<a href=""><img src="https://img.php.cn/upload/article/000/000/041/5d78831a82980429.jpg" alt=""></a>
</div>
<div>
<p>
<a href="">wamp运行PHP中文字乱码</a>
<br>
<span>发布时间：2019-10-10</span>
</p>
<a href=""><img src="https://img.php.cn/upload/article/000/000/041/5d78831a82980429.jpg" alt=""></a>
</div>
<div>
<p>
<a href="">wamp运行PHP中文字乱码</a>
<br>
<span>发布时间：2019-10-10</span>
</p>
<a href=""><img src="https://img.php.cn/upload/article/000/000/041/5d78831a82980429.jpg" alt=""></a>
</div>
<p class="gengduo"><a href="">更多内容</a></p>
</div>
<br>
<h3>最新博文</h3>
<div class="bcontent">
<a href="">
<p>
<span>mysql查询时间戳和日期的转换</span>
<span>2019-10-10</span>
</p>
</a>
<a href="">
<p>
<span>mysql查询时间戳和日期的转换</span>
<span>2019-10-10</span>
</p>
</a>
<a href="">
<p>
<span>mysql查询时间戳和日期的转换</span>
<span>2019-10-10</span>
</p>
</a>
<p class="gengduo"><a href="">更多内容</a></p>
</div>
<h3>最新问答</h3>
<div class="bcontent">
<a href="">
<p>
<span>mysql查询时间戳和日期的转换</span>
<span>2019-10-10</span>
</p>
</a>
<a href="">
<p>
<span>mysql查询时间戳和日期的转换</span>
<span>2019-10-10</span>
</p>
</a>
<a href="">
<p>
<span>mysql查询时间戳和日期的转换</span>
<span>2019-10-10</span>
</p>
</a>
<p class="gengduo"><a href="">更多内容</a></p>
</div>
<div class="footer">
<ul>
<li><a href=""><img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3249588340,2275832195&fm=26&gp=0.jpg" alt=""><br><span>主页</span></a></li>
<li><a href=""><img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2200471184,4213706250&fm=26&gp=0.jpg" alt=""><br><span>视频</span></a></li>
<li><a href=""><img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2162411735,2401613782&fm=26&gp=0.jpg" alt=""><br><span>社区</span></a></li>
<li><a href=""><img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2073423850,3031235830&fm=26&gp=0.jpg" alt=""><br><span>我的</span></a></li>
</ul>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
总结：
1、任何一个容器都可以指定为flex 布局，行内元素也可以；
2、webkit 内核的 前面加上 -webket 例如 safari
3、注意的是：flex 布局后 float clear vertical-align 属性失效
4、容器有6个属性
flex-direction 绝对主轴方向 row 行 column 列 加入 -reverse 表示反向
flex-wrap 默认都在一条线，wrap 换行 nowrap 不换行 wrap-reverse 相反方向
flex-flow flex-direction flex-wrap 2个值的简写 默认 row nowrap
justify-content 主轴上的对齐方式 flex-start 左起始 flex-end 末尾 center 中间 space-between 两边对齐
space-around 每个项目2边都相等
align-items 交叉轴对齐方式（列） flex-start 上对齐 flex-end 下对齐 center 中间对齐 baseline 第一行文字基线 对齐 stretch 默认 如果项目未设置高度 或者 auto 则自动占满整个容器
align-content 多跟轴线生效 存在6种属性
5、项目的属性（容器的子元素）也存在6种属性
order 排序作用
flex-grow 项目放大比例 默认 0 如果空间不够 不放大
flex-shrink 项目缩小比例 默认1 如果空间不足 不缩小
flex-basis 默认 auto 项目本来大小
flex flex-grow flex-shrink flex-basis 三者简写 默认 0 1 auto 后两者可选
align-self 允许单个项目与其他项目不一样的对齐方式
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
