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

基本的样式和布局

  .box {
    display: flex;
  }

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




    1
    2
    3

方案一

整个元素块靠右

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

方案二

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

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

可以看到，两种方案都可以实现最后一个子元素靠右

关于flex:1

flex-grow: 可拉伸 flex-shrink: 可压缩 flex-basis: 当前元素的宽度

flex默认值： flex-grow: 0, flex-shrink: 1, flex-basis: auto
flex: 1： flex-grow: 1, flex-shrink: 1, flex-basis: 0%
flex: auto： flex-grow: 1, flex-shrink: 1, flex-basis: auto
flex: 1 会导致父元素宽度自动为100%

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