【第17周 01 移动web入门 3-17卡片布局】用了display:flex; 是否一定程度上可以不用 float:left 浮动来布局了？

首页课程实战体系课手记专栏慕课教程

来源：3-17 编程练习

easyschen

2022-03-14 13:16:29

问题描述：

1. 老师麻烦看下代码是否正确

2. .box不设置高度height、不用margin，只用flex可以实现box中内容的间隔吗？

3. 用了display:flex; 是否一定程度上可以不用 float:left 浮动来布局了？

相关代码：

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<style>
/* 在此处补充代码*/

/* 一、页头部分 */ 

/*去除默认样式*/
* {
margin: 0;
padding: 0;
}
ul{
list-style: none;
}

/* flex布局的标签 */
header, .logo, .nav, .login, .shopping{
display: flex;
}

/* header样式 */
header {
display: flex;
background-color: black;
justify-content: space-around;
align-items: center;
}

/* logo样式 */
.logo img{
width: 200px;
}

/* li样式 */
header .nav li{
color:white;
width: 100px;
line-height: 80px;
height: 80px;
text-align: center;
}

/* 登陆样式 */
header .login{
width: 100px;
justify-content: space-between;
align-items: center;
}
header .login input{
background-color: orange;   /* 背景颜色橙色 */
color: white;               /* 文字颜色白色 */
width:40px;
height: 30px;
border: none;
border-radius: 2px;
}

/* 二、主体内容部分 */

section, .section, .box, .shopping{
display: flex;
}

section{
flex-flow: row wrap;    /* 容器属性 */
/* 等价于：
            flex-direction: row;
            flex-wrap: wrap; */

justify-content: space-around;
align-items: center;

}

section .section{
/* 作为section的项目时候的属性: */
flex-basis:46%;
/* 作为容器时候的属性 */
flex-direction: row;
justify-content: space-around;
align-items:center;

/* 样式 */
background-color: rgb(154, 240, 233);
border-radius: 10px;
padding:20px 0;
margin: 10px 0;
}

section .section .box{
/* idea：先布局再样式 */
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
height: 100%;
}

section .section .shopping{
/* 布局都在父亲容器属性中写了，这里不写项目属性了 */
background-color: orange;
color: white;
width: 100px;
border-radius: 5px;
justify-content: center;
}

section .section .shopping .btn{
text-align: center;
height: 40px;
line-height: 40px;
}






</style>
</head>

<body>
<!-- 头部 -->
<header>
<div class="logo">
<img src="http://climg.mukewang.com/59197ab000014f1503000100.jpg" alt="">
</div>
<ul class="nav">
<li>课程</li>
<li>路径</li>
<li>猿问</li>
<li>手记</li>
</ul>
<div class="login">
<input type="button" value="登录">
<input type="button" value="注册">
</div>
</header>
<!-- 主体内容 -->
<section>
<div class="section">
<div class="box">
<p>《前端小白入门手册》</p>
<div>适用人群：没有任何前端基础的小白</div>
<div>费用：￥499</div>
</div>
<div class="shopping">
<div class="btn">加入购物车</div>
</div>
</div>
<div class="section">
<div class="box">
<p>《HTML5月CSS3实现动态网页》</p>
<div>适用人群：有html和css基础的童鞋</div>
<div>费用：￥599</div>
</div>
<div class="shopping">
<div class="btn">加入购物车</div>
</div>
</div>
<div class="section">
<div class="box">
<p>《HTML5月CSS3实现动态网页》</p>
<div>适用人群：有html和css基础的童鞋</div>
<div>费用：￥599</div>
</div>
<div class="shopping">
<div class="btn">加入购物车</div>
</div>
</div>
<div class="section">
<div class="box">
<p>《HTML5月CSS3实现动态网页》</p>
<div>适用人群：有html和css基础的童鞋</div>
<div>费用：￥599</div>
</div>
<div class="shopping">
<div class="btn">加入购物车</div>
</div>
</div>
</section>
</body>

</html>

<!DOCTYPE html>

<html>

<head>

<style>

/* 在此处补充代码*/

/* 一、页头部分 */

/*去除默认样式*/

* {

margin: 0;

padding: 0;

}

ul{

list-style: none;

}

/* flex布局的标签 */

header, .logo, .nav, .login, .shopping{

display: flex;

}

/* header样式 */

header {

display: flex;

background-color: black;

justify-content: space-around;

align-items: center;

}

/* logo样式 */

.logo img{

width: 200px;

}

/* li样式 */

header .nav li{

color:white;

width: 100px;

line-height: 80px;

height: 80px;

text-align: center;

}

/* 登陆样式 */

header .login{

width: 100px;

justify-content: space-between;

align-items: center;

}

header .login input{

background-color: orange; /* 背景颜色橙色 */

color: white; /* 文字颜色白色 */

width:40px;

height: 30px;

border: none;

border-radius: 2px;

}

/* 二、主体内容部分 */

section, .section, .box, .shopping{

display: flex;

}

section{

flex-flow: row wrap; /* 容器属性 */

/* 等价于：

flex-direction: row;

flex-wrap: wrap; */

justify-content: space-around;

align-items: center;

}

section .section{

/* 作为section的项目时候的属性: */

flex-basis:46%;

/* 作为容器时候的属性 */

flex-direction: row;

justify-content: space-around;

align-items:center;

/* 样式 */

background-color: rgb(154, 240, 233);

border-radius: 10px;

padding:20px 0;

margin: 10px 0;

}

section .section .box{

/* idea：先布局再样式 */

flex-direction: column;

justify-content: space-between;

align-items: flex-start;

height: 100%;

}

section .section .shopping{

/* 布局都在父亲容器属性中写了，这里不写项目属性了 */

background-color: orange;

color: white;

width: 100px;

border-radius: 5px;

justify-content: center;

}

section .section .shopping .btn{

text-align: center;

height: 40px;

line-height: 40px;

}

</style>

</head>

<body>

</div>

</ul>

</div>

</header>

<p>《前端小白入门手册》</p>

<div>适用人群：没有任何前端基础的小白</div>

</div>

<div class="btn">加入购物车</div>

</div>

<p>《HTML5月CSS3实现动态网页》</p>

<div>适用人群：有html和css基础的童鞋</div>

</div>

<div class="btn">加入购物车</div>

</div>

<p>《HTML5月CSS3实现动态网页》</p>

<div>适用人群：有html和css基础的童鞋</div>

</div>

<div class="btn">加入购物车</div>

</div>

<p>《HTML5月CSS3实现动态网页》</p>

<div>适用人群：有html和css基础的童鞋</div>

</div>

<div class="btn">加入购物车</div>

</div>

</section>

</body>

</html>

写回答

1回答

好帮手慕慕子

2022-03-14

同学你好，对于你的问题解答如下：

1、代码实现是对的

2、可以，示例：

修改后效果如下：

3、是的，不过还是要具体情况具体分析，灵活应用所学知识去实现效果即可。

祝学习愉快~

hasyschen

hp>感谢老师。

h022-03-14

共1条回复

0 学习 · 15276 问题

查看课程

相似问题

试了下两种方式float和这个一浮动都得浮动而且还要设置margin值，这样的话本来就对称，所以设置margin也只用简单设置一下就可以了。但是为啥当初没有教呀

回答 3

这里好多属性都和float:left,right相似。而且这个display：flex方法更简单，为什么当时学float时没讲呢？

回答 2

什么是卡片布局

回答 1

啥时候补充一下grid布局的资料啊？

回答 1

【第17周移动基础 01 移动开发入门】3-11 换行布局。这两行代码效果一样，是对的吗？

回答 1

打开慕课网App查看更多内容