道友请了~ 最近小道在修练主修功法《嘉蛙》之余,偶然从一名散修手中得到了一本《CSS秘籍》,刚好近期有自己做微信小程序的打算,这不是瞌睡了给递枕头么。欣喜若狂,翻开第一章,拜读之后受益匪浅。韩老魔说过:好记性不如烂笔头。(韩老魔:我没说过!)遂誊抄一份,分享给各位道友。
弹性布局的设计理念是让容器能够根据空间的变化自动调整其子元素的大小和位置,从而在不同屏幕尺寸和设备上创建响应式和适应性强的界面。
Flex 布局的核心概念包括:
- 容器 (Flex Container): 当一个元素的
display
属性被设置为flex
或inline-flex
时,这个元素就变成了一个 Flex 容器。这将改变其默认的布局行为,使其遵循 Flex 布局规则。 - 子项 (Flex Items): Flex 容器的所有直接子元素都自动成为 Flex 子项,它们将根据容器的 Flex 属性进行布局。
- 主轴 (Main Axis): 这是 Flex 容器中默认的方向,可以是水平或垂直,取决于
flex-direction
属性的值。Flex 子项沿主轴排列。 - 交叉轴 (Cross Axis): 这是与主轴垂直的方向。当 Flex 子项堆叠在主轴上时,交叉轴决定了子项的层叠顺序。
大约 3 分钟