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

Question

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

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

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

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

谢谢！

Answer 1

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

Answer 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>

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

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

html

css

flexbox

justify