Как выровнять 3 элемента так, чтобы первый и последний встали по краям блока, а второй в его центре

Question

На примере такой верстки, нужно, чтобы .header__hero-text встал по центру, в то время, как остальные элементы header__container по краям этого контейнера.

       <header className='header'>
            <div className='header__container'>
                <div className='header__links-wrapper'>
                    <a className='header__link'>Link 1</a>
                    <a className='header__link'>Link 2</a>
                    <a className='header__link'>Link 3</a>
                    <a className='header__link'>Link 4</a>
                </div>
                <p className='header__hero-text'>91 DAYS</p>
                <p className='header__action'>watch</p>
            </div>
        </header>

Answer 1

.header__container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: baseline;
  width: 100%;
}

.header__container > * {
  width: 100%;
}

.header__container > *:nth-child(1),
.header__container > *:nth-child(3) {
  background: gray;
}

.header__container > *:nth-child(2) {
  background: red;
}

<header class='header'>
  <div class='header__container'>
    <div class='header__links-wrapper'>
      <a class='header__link'>Link 1</a>
      <a class='header__link'>Link 2</a>
      <a class='header__link'>Link 3</a>
      <a class='header__link'>Link 4</a>
    </div>
    <p class='header__hero-text'>91 DAYS</p>
    <p class='header__action'>watch</p>
  </div>
</header>

БЛОГ НА HUSL

Как выровнять 3 элемента так, чтобы первый и последний встали по краям блока, а второй в его центре

Ответы (1 шт):