试图与 flex 水平对齐

Question

我尝试创建 2 个菜单栏，但我无法水平对齐菜单按钮，因为元素的数量不同。我尝试了 max-witdh、flex-basis、flex-grow、flex-shrink 属性但我无法实现我想要的。

在这里你可以找到一个代码片段：

body {
  background-color: black;
  text-align: center;
  color: white;
  font-family: Arial, Helvetica, sans-serif;
}
.row{
    display: flex;
    flex-direction: row;
    flex: 1;
    width: 100%;
   
}
  p, .myCustomButton {
    border-radius: 4px;
    height: 2.8em;
    font-size: 1.6rem;
    color: #fff;
    background-color: red;
    margin: 0.4rem 0.2rem;
    padding: 0 1em;
    flex: 1;
  }
  .row2 {
    justify-content: flex-end;
  }
  .myCustomButton {
    max-width: 20%;
    flex: 0.1 0.1 auto;
  }

<div class='row'>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
</div>

<div class='row row2'>
  <p class='myCustomButton'>test</p>
</div>

我希望我的自定义按钮和测试按钮在每种情况下都具有相同的大小（响应）。我可以通过哪种方式实现这一目标？我应该找哪个 css 属性？对我来说它是 flex-basis 但我不知道如何使用它，我已经从 mozzila 文档中阅读了它的工作原理，也许我错过了一些东西

提前致谢。

Answer 1

最后一个元素不适合其他元素的大小的原因是因为边距。在 <p> 周围添加一个额外的 <div> 并告诉 row2 中的那个不要增长超过 20% 的基础对我来说是个窍门：

<div class='row row2'>
   <div>
    <p class='myCustomButton'>test</p>
   </div>
</div>

.row2 > div {
  flex: 0 1 20%;
}

.row {
  display: flex;
  width: 100%;
}

.row > div {
  flex: 1 1 20%;
}

p {
  border-radius: 4px;
  height: 2.8em;
  font-size: 1.6rem;
  color: #fff;
  background-color: red;
  margin: 0.4rem 0.2rem;
  padding: 0 1em;
  flex: 1;
}

.row2 {
  justify-content: flex-end;
}

.row2 > div {
  flex: 0 1 20%;
}

<div class='row'>
    <div>
      <p>test</p>
    </div>
    <div>
      <p>test</p>
    </div>
    <div>
      <p>test</p>
    </div>
     <div>
      <p>test</p>
    </div>
    <div>
      <p>test</p>
    </div>
</div>

<div class='row row2'>
    <div><p class='myCustomButton'>test</p></div>
</div>

如果可能的话，我建议使用 CSS 网格，这样更容易：

https://codepen.io/sergiofruto/pen/zYqmKYW

试图与 flex 水平对齐

trying to align horizontally with flex

html

css

flexbox

responsive