基本的样式和布局
<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; }
方案二
元素块撑满剩余空间，文字靠右
.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%
