前端HTML5 简单flex布局

最新推荐文章于 2024-07-31 02:02:05 发布

逾期不予

最新推荐文章于 2024-07-31 02:02:05 发布

阅读量350

点赞数 1

文章标签： css html5 css3 es6 flex

本文链接：https://blog.csdn.net/m0_49681744/article/details/107646455

版权

前端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>

实现效果（如下图）：
三个小盒子分别靠两端对齐，中间间隔相等；
在这里插入图片描述
感谢阅读！
下期分享弹性盒的所有属性和属性值
有疑问可以在下面留言！

逾期不予

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端HTML5 简单flex布局

前端HTML5 简单flex布局第一步提前简单布局1、简单的布局一下HTML页面代码2、我是在div标签中塞了三p标签当然里面也可以用其他标签，这个看个人习惯。<body> <div> <p>第一个盒子</p> <p>第二个盒子</p> <p>第三个盒子</p> </div></body>第二步简单布
复制链接

扫一扫