Flex布局应用--盒子四角放置

双非地信Jun

已于 2023-03-07 09:59:37 修改

阅读量660

点赞数

分类专栏： web 跨专业学前端文章标签： css html

于 2023-03-07 09:59:08 首次发布

本文链接：https://blog.csdn.net/J1756465965/article/details/129375859

版权

本文介绍了两种使用Flex布局实现盒子四角放置的方法。方法一通过设置两个上下占一半的盒子并利用flex属性实现；方法二则是在方法一的基础上，增加一个外层盒子，内外两层盒子都采用flex布局，调整主轴方向来达到目的。详细步骤和代码示例有助于理解。

摘要由CSDN通过智能技术生成

方法一：
css样式和html代码如下：

    <div class="parent1">
        <div class="child">1</div>
        <div class="child">2</div>
    </div>
    <div class="parent2">
        <div class="child">3</div>
        <div class="child">4</div>
    </div>

body,html{
            margin: 0;
            padding: 0;
            height: 100%;
        }
        .parent1{
            display: flex;
            height: 50%;
            justify-content: space-between;
            background-color: gray;
        }
        .parent2{
            display: flex;
            height: 50%;
            align-items: flex-end;
            justify-content: space-between;
        }
        .child{
            width: 100px;
            height: 100px;
            backgro