且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

css:flex布局最后一个子元素靠右摆放

更新时间:2022-06-09 11:38:06

基本的样式和布局

<style>
  .box {
    display: flex;
  }

  .item {
    height: 100px;
    width: 100px;
    border: 1px solid green;
    color: green;
    font-size: 50px;
    line-height: 100px;
    text-align: center;
  }
</style>


<div class="box">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item item-right">3</div>
</div>

方案一

整个元素块靠右

.item-right {
    margin-left: auto;
  }

css:flex布局最后一个子元素靠右摆放

方案二

元素块撑满剩余空间,文字靠右

.item-right {
    flex: 1;
    text-align: right;
  }

css:flex布局最后一个子元素靠右摆放可以看到,两种方案都可以实现最后一个子元素靠右

参考

flex布局让某个子元素靠右显示