📐 CSS Flexbox 练习场

容器属性

选中子元素属性

点击预览区的子元素来编辑属性

实时预览

CSS 代码

常见问题

什么是Flexbox?

Flexbox(弹性盒子布局)是CSS3的一种布局模式,专门用于在容器内对齐和分配空间,即使子元素大小未知或动态变化。它简化了复杂布局的实现。

flex-grow、flex-shrink、flex-basis的区别?

flex-grow定义放大比例(剩余空间如何分配),flex-shrink定义缩小比例(空间不足时如何缩小),flex-basis定义初始大小。简写flex: grow shrink basis。

justify-content和align-items的区别?

justify-content控制主轴方向的对齐,align-items控制交叉轴方向的对齐。主轴方向由flex-direction决定。