弹性布局的主轴和交叉轴的区别
弹性布局可以让块级元素横向显示，只要设置display:flex;就可以解决，也不会出现高度坍塌的问题。弹性容器：定义了display:flex的那个元素。容器内部直接子元素进行弹性布局。简单的举个例子。<style>#parent{width:700px;border:2px solid red;display:flex;}#d1,#d2,#d3{width:200px;height
·
弹性布局可以让块级元素横向显示，只要设置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轴：交叉轴起点在顶部，终点在底部；
权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区
更多推荐
3
0- 0
已为社区贡献1条内容
所有评论(0)