html：运用弹性布局写一个热门活动简介表

最新推荐文章于 2023-08-14 22:02:51 发布

原创

最新推荐文章于 2023-08-14 22:02:51 发布 · 2k 阅读

22 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #前端 #css

在弹性布局出来之前呢，我们一边很多时候都是运用盒子模型，定位，浮动来进行我们的结构框架搭建，那么今天呢我来向大家展示一下如何用弹性布局做一个小的demo。

效果展示：

html+css部分：

代码讲解：

效果展示：

结构比较简单，主要是让大家来简单来认识一下弹性布局。

html+css部分：

<style>
        .container {
            width: 720px;
            margin: 30px auto;
        }

        header {
            width: 660px;
            margin: 0 auto;
        }

        h3 {
            display: inline-block;
            font-size: 20px;
        }

        header>.more {
            float: right;
            font-size: 18px;
            font-weight: bold;
            color: #62666F;
        }
        /* 弹性布局 */
        ul{
            margin: 0 40px;
            height: 350px;
            display: flex;
            /* 将元素从左往右排列 */
            flex-direction: row;
            /* 设置不换行 */
            flex-wrap: wr