css,對包含有子元素的元素進行flex後,會影響原有的佈局。如何後續處理

對包含有子元素的元素進行flex後,會影響原有的佈局。佈局

例如設置兩個div,第一個div包含一個img(圖片),第二個div包含多個p元素(對前面的img的說明)。以下圖flex

1:當對着兩個兩個div進行flex佈局後。雖然兩個div會同時處在一行內。但第二個div內部多個p元素的排序會被打亂,由於p元素的父元素div被應用了display:flex;後,已經改變了其主軸方向,全部的p元素都會橫向排列,而不是原來的縱向排列blog

2:爲了讓兩個div再同一行內,同時第二個div內部的多個p元素仍按照原有的塊元素排序,須要對第二個div。需對第二個div做以下處理。排序

display:flex;圖片

flex-direction:column;io

則會從新改變第二個div的主軸方向。從而獲得咱們想要的結果。im

結果以下:d3

相關文章
相關標籤/搜索