子容器大小與排列方式問(wèn)題
.box div{}里面定義了所有div的大小,題目中是一個(gè)div容器里面包含了三個(gè)div容器,但是由定義父容器大小與子容器大小一樣,是不是意味著父容器被被撐爆了。還有一個(gè)問(wèn)題,就是我在任意一個(gè)子容器關(guān)聯(lián)里面再加n(假設(shè)是3)個(gè)子容器,然后用class="box"關(guān)聯(lián),按理說(shuō),box定義的時(shí)候display:flex,那么接下來(lái)的子元素(2代子元素)應(yīng)該也是行排列才對(duì),可是為什么我做完后就是列排列?求大佬解惑,拜托了
2021-07-07
定義父容器大小與子容器大小一樣,是不是意味著父容器被被撐爆了?
答:不會(huì)被撐爆,可以利用給父元素添加 border: 1px solid red; 去觀察父元素是否變形,我親測(cè)后沒(méi)有變形,因此得出不會(huì)撐爆父元素的結(jié)論。
按理說(shuō),box定義的時(shí)候display:flex,那么接下來(lái)的子元素(2代子元素)應(yīng)該也是行排列才對(duì),可是為什么我做完后就是列排列?
答:flex布局應(yīng)該只對(duì)設(shè)置 flex:?的元素有效,由于子孫元素沒(méi)有設(shè)置,flex: ? 所以會(huì)安裝塊級(jí)元素的特性縱向排列,要想子孫元素實(shí)現(xiàn)橫向排列,可以在祖先元素及最外層包裹器的子元素再次設(shè)置 display: flex;
具體可以參考以下代碼:(您提出的問(wèn)題很有代表性,是我從沒(méi)有想過(guò)的,佩服你的思考量,加油)