flex布局與position定位存在衝突

情況：現在布局很多時候用到flex方式，有次我將flex布局後的元素b，然後給元素b新增position定位，發現元素b無法被子元素撐開

<

!doctype html>
"zh-cn"
>
"utf-8"
>
"viewport" content=
"width=device-width, initial-scale=1"
/>
flex布局與position定位存在衝突<
/title>
*    #container 
#content 
#content li 
<
/style>
<
/head>
"container"
>
"content"
>
<
/li>
<
/li>
<
/li>
<
/li>
<
/ul>
<
/div>
<
/body>
<
/html>

給#content手動設定寬度為100%

#content

為#content包裹一層

#content

.box

"container"

>
="box"
>
"content"
>
<
/li>
<
/li>
<
/li>
<
/li>
<
/ul>
<
/div>
<
/div>

position與多列布局

關於position absolute 它不是相對於視窗而是相對於最近的 positioned 祖先元素。如果絕對定位 position屬性的值為absolute 的元素沒有 positioned 祖先元素，那麼它是相對於文件的body元素，並且它會隨著頁面滾動而移動。記住乙個 positioned...

flex布局 Flex布局

摘要 flex布局主要思想是讓容器有能力讓其子專案能夠改變其寬度 高度 甚至順序 以最佳方式填充可用空間 主要是為了適應所有型別的顯示裝置和螢幕大小 作者 星星 flex 是 flexible box 的縮寫，意為 彈性布局 flex布局主要思想是讓容器有能力讓其子專案能夠改變其寬度 高度 甚至順序...

position（定位）布局

屬性值 說明static 預設值。沒有定位，元素按照標準文件流布局 inherit 繼承父元素的position值 relative 相對定位，盒子的位置以標準文件流的排版方式為基準，然後相對於它原本的標準位置偏移，相對定位的盒子仍然在標準流中。absolute 絕對定位，盒子的位置以它最靠近的已經...