在 Flex 布局中,可以使用 'justify-content' 属性来控制元素在主轴上的对齐方式。要让左边一个元素靠左,其他元素靠右,可以将容器的 'justify-content' 属性设置为 'space-between',然后将左边的元素放在容器的第一个位置,其他元素放在容器的最后位置。

HTML 代码:

<div class='container'>
  <div class='left'>左边元素</div>
  <div class='right'>右边元素</div>
</div>

CSS 代码:

.container {
  display: flex;
  justify-content: space-between;
}

.left {
  align-self: flex-start;
}

.right {
  align-self: flex-end;
}

在上面的例子中,'.container' 是 Flex 容器,'.left' 是左边的元素,'.right' 是右边的元素。通过设置 '.container' 的 'justify-content' 属性为 'space-between',可以让左边的元素靠左,右边的元素靠右。使用 'align-self' 属性可以控制每个元素在交叉轴上的对齐方式,这里使用 'flex-start' 和 'flex-end' 来使左边的元素靠左,右边的元素靠右。

Flex 布局:让左边元素靠左,其他元素靠右

原文地址: https://www.cveoy.top/t/topic/fx3X 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录