如何解決前端的flex流動布局中的單個子元素位置？

比如這樣一段代碼：

&
&

& &

& &

& &

這裡面給div定義了display:-webkit-flex;和align-items:center;屬性 為了讓三個子元素p垂直居中，然而又出現了讓第三個p元素靠右的需求，因為父級div設置了flex屬性float:left;不起作用，做的是移動端又不想用position屬性，還有解決辦法嗎

如圖，讓更新按鈕去箭頭的位置

---

謝邀

「更新」 加一個樣式 margin-left: auto; 或 margin-start: auto;

https://drafts.csswg.org/css-flexbox-1/#auto-margins

http://caniuse.com/#feat=css-logical-props

---

CSS Flexible Box Layout Module Level 1中的一句話:

&> The margins of adjacent flex items do not collapse.Auto margins absorb extra space in the corresponding dimension and can be used for alignment and to push adjacent flex items apart; see Aligning with auto margins.

flex item的margin不與相鄰flex item的摺疊，margin為auto值時伸縮包含塊剩餘的空間將會分配到flex item的外邊距margin上，這個可用於實現居中效果:

.wrap{
display: flex;
}
.item{
margin: auto;
}


同時，後面也說了，這將會使其旁邊的flex item儘可能的往它的那邊靠。

因此，要實現題主所說的布局，只要給第二個p元素一個margin-right:auto就行了

---

在第三個加上這兩行樣式

flex: 1;

text-align: right;

---

淺薄理解，其實可以用下一級別的flex實現,前兩個p可以完成合併為一個div，這樣就很讓容易實現需求

---

怎麼解決的，最近也遇到了

---

推薦閱讀：