我可以左对齐和居中对齐同一弹性容器内的两个对象吗?

Can I Left justify and Center justify two objects inside the same flex container?

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

[ (obj1) | <------------(obj2)--------> ]

我知道我可以使用下面的网格样式更轻松地完成此操作,但我的目标是自学 flex。

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

谢谢!

请参阅 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>

是的,这可以在 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>