弹性布局的主轴和交叉轴的区别

科技前沿 • 2025-02-17 10:06 • 阅读 44

大家好，我是讯享网，很高兴认识大家。

弹性布局可以让块级元素横向显示，只要设置display:flex;就可以解决，也不会出现高度坍塌的问题。
弹性容器：定义了display:flex的那个元素。容器内部直接子元素进行弹性布局。简单的举个例子。

<style> #parent{ width:700px; border:2px solid red; display:flex; } #d1,#d2,#d3{ width:200px; height:200px; border:2px solid #f0f; } #child1,#child2,#child3{ width:100px; height:100px; border:2px solid #ff0; } </style> </head> <body> <div id="parent"> <div id="d1"> <div id="child1"></div> <div id="child2"></div> <div id="child3"></div> </div> <div id="d2"></div> <div id="d3"></div> </div> </body>

讯享网

id为parent的才是弹性容器，它只是对id分别为d1、d2、d3的直接子元素才有效果，如果想要id分别为child1、child2、child3的元素有效，需要在想应的父元素设置display:flex。

讯享网

弹性项目：真正发生弹性布局的元素们（定义了display:flex的那个元素的直接子元素们）
主轴：项目们排列方向的一根轴，主轴有4条。x轴两条，y轴两条。
x轴两条：
主轴的起点在左侧，主轴的终点在右侧；
主轴的起点在右侧，主轴的终点在左侧；
y轴的两条：
主轴的起点在顶部，主轴的终点在底部；
主轴的起点在底部，主轴的终点在顶部；
交叉轴：永远与主轴垂直相交的一根轴，交叉轴有两条，分别是x轴和y轴。
交叉轴是x轴：交叉轴起点在左侧，终点在右侧；
交叉轴是y轴：交叉轴起点在顶部，终点在底部；

弹性布局的主轴和交叉轴的区别

相关推荐