产品列表项目布局

| 标题 | 详情|         |按钮|

实现一个这样的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 时，元素的左右边距将由浏览器自动计算，以实现元素在父容器中的居中等效果（可以是水平居中或垂直居中）。此时，元素的宽度将被自动调整或保持不变，具体情况取决于是否设置了宽度和其他样式属性。