flex弹性盒子平分布局

最新推荐文章于 2024-07-09 21:39:47 发布

原创最新推荐文章于 2024-07-09 21:39:47 发布 · 1k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #html5

web 专栏收录该内容

20 篇文章

订阅专栏

本文介绍了如何利用HTML和CSS中的弹性盒子（Flexbox）特性，创建一个左中右对齐且自适应的布局，通过`.out-parent`和`.share-item`类展示了如何设置弹性布局样式。

1、布局效果

2、css布局样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试弹性盒子</title>
</head>
<body>
<div class="out-parent">
    <div class="share-item"><div style="margin: auto">1</div></div>
    <div class="share-item"><div style="margin: auto">2</div></div>
    <div class="share-item"><div style="margin: auto">3</div></div>
    <div class="share-item"><div style="margin: auto">4</div></div>
</div>

</body>
<style>
    /**将父容器作为一个弹性盒子，左中右弹性布局*/
    .out-parent {
        display: flex;
        background: aquamarine;
        width: 100%;
        height: 200px;
        margin-top: 20px;
    }
    .share-item{
        flex: 1;
        background: chartreuse;
        height: 100%;
        margin-left: 10px;
        margin-right: 10px;
        display: flex;
        justify-items: center;
        align-items: center;
    }
</style>
</html>