实现效果（如下图）：
三个小盒子分别靠两端对齐，中间间隔相等；
前端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>-- 展开阅读全文 --
测试[呵呵]