主页 / 问题 / 1130499
Accepted
Izzei -
Asked:2020-05-24 07:19:03 +0000 UTC2020-05-24 07:19:03 +0000 UTC

如何对齐 3 个元素，使第一个和最后一个元素位于块的边缘，第二个位于块的中心

  • 772

以这种布局为例，您希望 .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>
html

1 个回答

  1. Best Answer

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

    • 0

相关问题