我可以在同一个 flex 容器中左对齐和居中对齐两个对象吗？ [复制]答案

【问题标题】：Can I Left justify and Center justify two objects inside the same flex container? [duplicate]我可以在同一个 flex 容器中左对齐和居中对齐两个对象吗？ [复制]
【发布时间】：2020-10-10 02:34:11
【问题描述】：

我有一个 flex-container(row)，我在其中寻找第一个以静态宽度左对齐的对象，然后让下一个对象居中并填充容器的其余部分。

[ (obj1) | ]

我知道我可以通过下面的网格样式更轻松地完成此任务，但我的目标是在 flex 方面自学。

display:grid; grid-template-columns: 100px 1fr;

谢谢！

【问题讨论】：

标签： html css flexbox justify

【解决方案1】：

请参阅代码 sn-ps 了解 flex 实现。

.wrapper {
  display: flex;
}

.obj-a {
  background: lime;
  flex-basis: 100px;
}
.obj-b {
  background: skyblue;
  flex-grow: 1;
  display: flex;
  justify-content: center;
}

<div class="wrapper">
  <div class="obj-a">obj-a</div>
  <div class="obj-b">obj-b</div>
</div>

【讨论】：

这对我有用，但我必须添加 min-width:100px。我确信这与我在容器上的其他样式有关。谢谢！
我很乐意提供帮助。

【解决方案2】：

是的，这可以在flex 中完成最好读的是here

你需要使用 flex-shrink, flex-grow, flex-basis 简写如下

flex: shrink grow basis 即。 flex: 1 1 auto

下面是我使用flex 短格式并添加了一个边框用于表示目的的示例。

* {
  borx-sizing: border-box;
}

.flex-container {
  display: flex;
  flex-direction: row;
  border: 1px solid black;
  height: 200px;
  padding: 1em;
}

.flex-container .left {
  width: 100px;
  border: 2px solid red;
  height: 200px;
}

.flex-container .main {
  flex: 1 1 auto;
  border: 2px solid green;
  height: 200px;
}

<div class="flex-container">
  <div class="left"></div>
  <div class="main"></div>
</div>

【讨论】：

我读过“beset”，但听说它没有得到广泛支持，所以我远离它。