在弹性行内对齐 div

Question

我这辈子都做不到。我想要父项 div 中间的一项和父项 div 最右侧（末尾）的一项，每一项都在同一行。

经过我的努力，他们要么在中间，要么在不同的行。

https://codepen.io/kiggs1881/pen/KKZWwBw

<div class="parent">
  <div class="one">Items</div>
  <div class="one">Items</div>
</div>


.parent {
  border: 1px solid red;
  display: flex;
  justify-content: center;
  margin: auto;
  max-width: 600px;
 }

.one {
  display: inline-flex;
  justify-content: center;
}

.two {
  display: inline-flex; 
 justify-content: end;
}

对齐 css 是我最大的弱点。

Answer 1

给你。我建议你研究一下 flexbox，这样你就可以看到你是如何错误地使用它的。您将 flex 属性应用于父元素，子元素不需要它。我链接的指南应该对你有帮助。

.parent {
  border: 1px solid red;
  display: flex;
  justify-content: space-between;
  margin: auto;
  max-width: 600px;
}

.parent > div {
  margin-left: auto;
}

<div id="q-app">
  <div class="parent">
    <div>Items</div>
    <div>Items</div>
  </div>
</div>

在弹性行内对齐 div

Aligning div within flex row

css