前端HTML5 简单flex布局
第一步 提前简单布局
1、简单的布局一下HTML页面代码
2、我是在div标签中塞了三p标签
当然里面也可以用其他标签,这个看个人习惯。
<body>
<div>
<p>第一个盒子</p>
<p>第二个盒子</p>
<p>第三个盒子</p>
</div>
</body>
第二步 简单布局CSS样式
1、我给div和p标签设置了简单的css样式
2、给div标签设置display:flex;
设置两端对齐
垂直居中
<style>
div{
/* 基础布局 */
width: 1000px;
height: 300px;
background: black;
margin: 50px auto;
/* 下面是弹性盒子布局 */
/* 转换为弹性盒子模式 */
display: flex;
/* 两端对齐 */
justify-content: space-between;
/* 居中 */
align-items: center;
}
p{
/* 基础布局 */
height: 200px;
width: 200px;
background: orange;
text-align: center;
line-height: 200px;
}
</style>
实现效果(如下图):
三个小盒子分别靠两端对齐,中间间隔相等;
感谢阅读!
下期分享弹性盒的所有属性和属性值
有疑问可以在下面留言!