flex 弹性盒子

最新推荐文章于 2024-07-28 16:45:11 发布

zjjdawang

最新推荐文章于 2024-07-28 16:45:11 发布

阅读量101

点赞数

分类专栏： html 文章标签：大数据

本文链接：https://blog.csdn.net/zjjdawang/article/details/125489666

版权

html 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Flexible Box 模型，通常被称为 flexbox，是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。本文给出了 flexbox 的主要特性，更多的细节将在别的文档中探索。

我们说 flexbox 是一种一维的布局，是因为一个 flexbox 一次只能处理一个维度上的元素布局，一行或者一列。作为对比的是另外一个二维布局 CSS Grid Layout，可以同时处理行和列上的布局。

主轴由 flex-direction 定义，可以取 4 个值：

row
row-reverse
column
column-reverse

另外一个需要理解的重点是 flexbox 不会对文档的书写模式提供假设。过去，CSS 的书写模式主要被认为是水平的，从左到右的。现代的布局方式涵盖了书写模式的范围，所以我们不再假设一行文字是从文档的左上角开始向右书写，新的行也不是必须出现在另一行的下面。

你可以在接下来的文章中学到更多 flexbox 和书写模式关系的详细说明。下面的描述是来帮助我们理解为什么不用上下左右来描述 flexbox 元素的方向。

外面的大容器的属性的设置

1. flex-direction 主轴方向
2. flex-wrap 主轴一行满了换行
3. flex-flow 1和2的组合
4. justify-content 主轴元素对齐方式
5. align-items 交叉轴元素对齐方式//单行
6. align-content 交叉轴行对齐方式//多行

示例代码

* {
        padding: 0;
        margin: 0;
    }
    .all {
        display: flex;
        margin: 200px auto;
        flex-direction: row;
        justify-content: center;
        background-color: aliceblue;
        flex-wrap: nowrap;
        width: 700px;
        height: 100px;
        align-items: center;



    }

    .obj {
        flex: 1;
        margin: 2rem;
        text-align: center;
    }

    .img {
        background-image: url(./images/localnav_bg.png);
        height: 4rem;
        width: 4rem;
        margin: 0 auto;
    }

    .text {
        padding-top: 2px;
    }

    .obj:nth-child(2) .img {
        background-position: 0 16rem;
    }

    .obj:nth-child(3) .img {
        background-position: 0 12rem;
    }

    .obj:nth-child(4) .img {
        background-position: 0 8rem;
    }

    .obj:nth-child(5) .img {
        background-position: 0 4rem;
    }
</style>

<body>
    <div class="all">
        <div class="obj">
            <a href="#"><div class="img"></div></a>
            <div class="text">景点 娱乐</div>
        </div>
        <div class="obj">
            <a href="#"><div class="img"></div></a>
            <div class="text">周边游</div>
        </div>
        <div class="obj">
            <a href="#"><div class="img"></div></a>
            <div class="text">美食林</div>
        </div>
        <div class="obj">
            <a href="#"><div class="img"></div></a>
            <div class="text">一日游</div>
        </div>
        <div class="obj">
            <a href="#"><div class="img"></div></a>
            <div class="text">当地攻略</div>
        </div>
    </div>
</body>

</html>