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