CSS3 flex手写布局

产品列表项目布局

| 标题 | 详情|         |按钮|

实现一个这样的flex布局。

父容器宽度自动,内部有三个平级关系的子元素,宽度固定,宽度和小于父容器宽度。现在要求三个元素排列在一行,前两个元素靠左对齐,第三个元素靠右对齐。请写出符合要求的CSS,采用flex。

.parent-container {
  display: flex;
}

.child-element {
  width: 100px;
  height: 100px;
}

.child-element:nth-child(3) {
  margin-left: auto;
}

主要要说下 margin: auto :

1.在这个例子中

margin-left: auto 可以使子元素的左边距自动计算,从而实现将第三个子元素靠右对齐的效果。

而在第三个子元素上加上 margin-left: auto 的话,就会将其左边距自动计算,从而实现将其靠右对齐的效果。这是因为在flex布局中,当某个子元素上使用margin-left: auto时,浏览器会自动将其左边距调整为可以填充剩余空间的值。由于前两个子元素的宽度已经固定,在父容器宽度大于三个子元素宽度之和的情况下,第三个子元素会占据剩余空间,从而实现了靠右对齐的效果。

margin

margin: auto 的计算过程如下:

如果没有设置宽度(width)属性,那么左右边距都为 auto 时,元素会根据父元素的宽度自动调整宽度,左右边距会各自平均分配。这时,元素将水平居中。 如果设置了宽度,那么左右边距都为 auto 时,元素的宽度不会改变,剩余的空间将被均分为左右边距,从而实现元素水平居中。 如果同时设置了 margin: auto、left: 0、right: 0,则元素将距离父元素的左右两侧各保持相等的距离,从而实现水平居中的效果。

总之,当 margin: auto 时,元素的左右边距将由浏览器自动计算,以实现元素在父容器中的居中等效果(可以是水平居中或垂直居中)。此时,元素的宽度将被自动调整或保持不变,具体情况取决于是否设置了宽度和其他样式属性。

文章来源:

Author:Mark24
link:https://mark24code.github.io/css/2023/03/19/CSS3-flex手写布局.html