У меня есть 3 кнопки CSS, но другая

Question

У меня проблема с тем, чтобы сделать три кнопки css одинакового размера (с использованием отступов) и выровнять их по вертикали, потому что у 2-й кнопки есть «
», что делает ее не равной двум другим.Также мне сказали использовать flex box.Я хочу, чтобы кнопки были выровнены с одинаковым размером, но не могу.

вот HTML:

.flex.container.parent {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  vertical-align: middle;
  position: relative;
}

.child {
  background-color: rgb(242, 242, 242);
  display: table-cell;
  padding: 25px;
  margin: 4px;
  color: rgb(75, 75, 75);
  text-align: center;
}

<div class="article container">
  <div class="flex container parent">
    <div class="child">ARTICLES</div>
    <div class="child">
      CASE STUDIES /<br /> WHITEPAPERS
    </div>
    <div class="child">NEWS/EVENTS</div>
  </div>

Спасибо за помощь, все действительно ценят это !!Теперь он работает так, как я хочу!

Answer 1

.parent {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: stretch;
    vertical-align: middle;
    position: relative;
}

.tab-selections {
    background-color: rgb(242, 242, 242);
    display: table-cell;
    padding: 25px 100px;
    margin: 4px;
    color: rgb(75, 75, 75);
    text-align: center;
}

.child {
  margin:0 10px;
  background-color: gray;
}

<div class="article container">
  <div class="flex container parent">
    <div class="child">ARTICLES</div>
    <div class="child">
      CASE STUDIES /<br />
      WHITEPAPERS
    </div>
    <div class="child">NEWS/EVENTS</div>
</div>

Answer 2

Вы должны просто присвоить высоту .child.Таким образом, вы можете контролировать, что все элементы будут иметь одинаковую высоту.В конце концов вы можете использовать max-height.

.flex.container.parent {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  vertical-align: middle;
  position: relative;
}

.child {
  background-color: rgb(242, 242, 242);
  display: table-cell;
  padding: 25px;
  margin: 4px;
  color: rgb(75, 75, 75);
  text-align: center;
  height: 30px;
}

<div class="article container">
  <div class="flex container parent">
    <div class="child">ARTICLES</div>
    <div class="child">
      CASE STUDIES /<br /> WHITEPAPERS
    </div>
    <div class="child">NEWS/EVENTS</div>
  </div>

Answer 3

Снимите align-items:center с родителя и наденьте его на детей (дав им display:flex).

.flex.container.parent {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  vertical-align: middle;
  position: relative;
}

.child {
  background-color: rgb(242, 242, 242);
  padding: 25px;
  margin: 4px;
  color: rgb(75, 75, 75);
  text-align: center;
  display: flex;
  align-items: center;
}

<div class="article container">
  <div class="flex container parent">
    <div class="child">ARTICLES</div>
    <div class="child">
      CASE STUDIES /<br /> WHITEPAPERS
    </div>
    <div class="child">NEWS/EVENTS</div>
  </div>