CSS Flexbox

前端技术 Oct 15, 2023

没有 Flexbox：不就是排列你的冰减贴吗？

没有 Flexbox 的年代，前端有多惨”

Flexbox 就是快递柜。父容器是快递柜（flex container），子元素是快递盒（flex items）。

flex-direction 决定横翗，justify-content 控制水平，align-items 控制垂直。

.cabinet {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

三行代码搞定居中，以前要十几行hack。

flex-grow 饿了多吃，flex-shrink 胖了减胖，flex-basis 你原本多大。

口调：「父亲 display: flex，孩子 flex: 1，世界和平」