flex布局小技巧之让某个子元素靠右或靠左显示
<!--我是父盒子--> <div class="father_box"> <!--三个子盒子--> <div class="son_box1">普通盒子甲</div> <div class="son_box2">普通盒子乙</div> <div class="son_box3">靠右显示盒子</div> </div>
.father_box { margin: 100px auto; width: 300px; height: 200px; background-color: rebeccapurple; display: flex; } .son_box1 { width: 80px; height: 80px; background-color: cornflowerblue; } .son_box2 { width: 80px; height: 80px; background-color: pink; } .son_box3 { width: 100px; height: 100px; background-color: blue; color: #ff9d00; margin-left: auto; }
在需要移动的子元素里(此处为靠右显示),加入以下代码:
margin-left: auto;