2023年5月8日 星期一

搞懂css flex-grow, flex-shrink, flex-basis

要控制flexbox內的子物件的寬度最好的方法就是善用下面這三個屬性:

flex-grow: 0;     /* 不增長 - 初始值:0 */
flex-shrink: 0;   /* 不收縮 - 初始值:1 */
flex-basis: 25em; /* 寬度/高度 - 初始值:自動 */
//上面三個屬性可簡寫為
flex:0 0 25em;
如下範例
.flexbox .child{
flex:0 0 25em;
}

沒有留言: