#yyds干货盘点#弹性布局中让其中一个元素靠右显示-CFANZ编程社区

#yyds干货盘点#弹性布局中让其中一个元素靠右显示

1.效果

#yyds干货盘点#弹性布局中让其中一个元素靠右显示_弹性布局

在弹性布局中如何让最边上的一个往反方向布局

2.代码

// html
<body>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="more">......</div>
</body>
// css
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.container {
    width: 50%;
    height: 200px;
    padding: 30px;
    background-color: aquamarine;
    margin: 100px auto;
    /* 弹性布局 */
    display: flex;
    align-items: center;
}
.container .item{
    height: 100%;
    padding: 10px;
    margin: 10px;
    background-color: #1acd7e;
}

.container .more {
    height: 100%;
    width: 100px;
    background-color: #ccc;
    margin-left: auto;
}

3.核心代码说明

#yyds干货盘点#弹性布局中让其中一个元素靠右显示_css_02

4.总结

弹性布局中让其中一个元素靠右显示

0 条评论