统计
  • 建站日期:2021-03-10
  • 文章总数:275 篇
  • 评论总数:115 条
  • 分类总数:21 个
  • 最后更新:9月4日
文章 技术代码

前端HTML5 简单flex布局

小椿
首页 技术代码 正文

实现效果(如下图):
三个小盒子分别靠两端对齐,中间间隔相等;

前端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 本站名称:乡野风情
2 本站网址:http://www.t35.cn/
3 本文网址:http://www.t35.cn/jsdm/263.html
4 本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长QQ:550966987进行删除处理。
5 本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
6 本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
7 本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。
-- 展开阅读全文 --
HTML5鼠标点击显示圆点动画特效
« 上一篇
用css和HTML做loding小动画
下一篇 »

发表评论