CSS 盒模型

wuchangjian2021-11-05 10:01:34编程学习

效果图

HTML 代码

<div class="r-parent">
   <div class="r-card">1</div>
   <div class="r-card">2</div>
   <div class="r-card">3</div>
</div>

CSS 代码

/* 父元素样式 */
.r-parent {
  margin: 50px auto;
  border: 1px solid red;
  display: flex; /* 开启盒模型 */
  flex-wrap: wrap; /* 自动换行 */
  justify-content: space-around; /* 居中均分(左右间距均分) */
}
/* 子元素样式 */
.r-card {
  border: 1px solid;
  width: 100px;
  height: 100px;
}
display: flex; /*开启盒模型*/
flex-wrap: wrap; /*自动换行*/
justify-content: space-around; /*居中均分(左右间距均分)*/

justify-content: space-between; /*向两端停靠*/

相关文章

应用开发人员会成为普通能力吗?

应用开发人员会成为普通能力吗?

点击此处即可免费领取DevOps资料~ 中小学编程教育在近年来一直备受关注。 去年...

2021-11-18~19 Re 逆向工程略览 三 IDA Pro使用【T.O.CTF】

逆向工程最基本的方法是静态分析,而IDA Pro,也就是...

创领新能源越野,坦克品牌进阶混动时代

创领新能源越野,坦克品牌进阶混动时代

2022-08-27 21:10:10 8月26日,坦克品牌以“创领新...

中移网大 题库 答案 全员产品知识赋能行动 市场人员学习专区 之九

【题目】以下说法是否正确:移动云VR通过“内容+产品+终端”提供全场景沉浸式VR体验。(...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。