无需登录 数据私有 本地保存

CSS Flexbox交互演示 - 在线弹性布局学习

前端设计 教育工具 CSS Flexbox 学习
76
0
0
0
「Flex容器」：设置了display: flex或display: inline-flex的元素，成为Flex布局的上下文环境，其直接子元素自动成为Flex项目。「Flex项目」：Flex容器的直接子元素，参与Flex布局，可以调整其在容器中的排列和对齐方式。「主轴」：Flex项目排列的方向轴，由flex-direction属性决定，默认为水平方向（从左到右）。「交叉轴」：与主轴垂直的轴线，Flex项目在交叉轴上的对齐由align-items和align-content属性控制。「flex-grow」：定义项目的放大比例，默认为0，即不放大，数值越大，占据的剩余空间比例越大。「flex-shrink」：定义项目的缩小比例，默认为1，即空间不足时项目会缩小，为0则不缩小。「flex-basis」：分配多余空间前，项目占据的主轴空间，默认值为auto，即项目本来大小。「align-items」：控制所有Flex项目在交叉轴上的对齐方式，常用值包括flex-start、flex-end、center、stretch、baseline。「align-content」：控制多行Flex项目在交叉轴上的对齐方式，仅在flex-wrap: wrap时生效。「justify-content」：控制Flex项目在主轴上的对齐方式，常用值包括flex-start、flex-end、center、space-between、space-around、space-evenly。「flex-wrap」：控制Flex项目是否换行，默认nowrap为不换行，wrap为换行，wrap-reverse为反向换行。「order」：定义项目的排列顺序，数值越小越靠前，默认为0。「gap」：控制Flex项目之间的间距，替代传统的margin实现更简洁的间距控制。「flex shorthand」：flex属性是flex-grow、flex-shrink、flex-basis的简写形式，常用值如flex: 1、flex: 0 0 200px等。「交叉轴尺寸」：Flex项目在交叉轴方向上的大小，可通过align-self单独控制某个项目的交叉轴对齐方式。
🔧 相关工具