Невозможно сориентировать дочерние элементы в гибком контейнере в направлении столбца - PullRequest
Новая
       5

Невозможно сориентировать дочерние элементы в гибком контейнере в направлении столбца

1 голос
/ 16 апреля 2020

Я пытаюсь стилизовать мой заголовок так, чтобы заголовок и цитата были центрированы в направлении столбца следующим образом: enter image description here

Прямо сейчас мой метод это применяет flex-direction: column к дочерним элементам заголовка в наборе правил header > *. Однако при рендеринге в браузере отображается следующее: enter image description here

Я не уверен, почему правило flex не применяется к дочерним элементам. Я также попытался использовать правило flex в наборе правил header, но оно создает очень большое пространство между заголовком и разделом вступления внизу.

HTML

<body>
    <header>
      <h1>Space</h1>
      <blockquote cite="https://twitter.com/neiltyson/status/124619676562104320">
        Not the final frontier, but the next frontier. Neil DeGrasse Tyson, <cite>Twitter</cite>
      </blockquote>
    </header>

    <main>
      <section id="intro">
        <h2>An Introduction</h2>
        <section>
          <img src="img/intro.jpg" alt="Helix nebula">
          <p>
            There are more stars in our universe than grains of sand in all of Earth's deserts
            and on all of its beaches. There are more than 200 billion stars in the Milky
            Way galaxy alone, 10% of which are similar to the Sun. Nearly a fifth of those
            Sun-like stars have an Earth-sized plant in the "habitable zone", meaning there are
            an estimated 4 billion Earth-like planets in our galaxy. That number balloons to
            40 billion if you include planets orbiting red dwarfs. The closest one? That would
            be Proxima Centauri b, which orbits the closest star to the Sun, Proxima Centauri,
            a mere 4.2 light-years away. If you were traveling at the speed of the
            fastest-moving manmade object (the Parker Solar Probe), an amazing 68.6 km/s,
            it would still take 18,500 years to get there. So close, yet so far.
          </p>
        </section>
      </section>

CSS

body {
  background-image: url("img/background.png");
  background-attachment: fixed;
  background-size: cover;
  font-family: "Share Tech Mono", monospace;
}


header {
  display: flex;
  height: 100vh;
  align-items: center;
  color: #E0DBD7;
}

header h1 {
  text-transform: uppercase;
  font-size: 120px;
  margin-bottom: 0px;
  text-shadow: 20px 14px 20px #551755;
  font-family: "Coda Caption", sans-serif;
}

header > * {
  flex-direction: column;
}

blockquote {
  margin-top: 0px;
  font-size: 22px;
}

Ответы [ 2 ]

1 голос
/ 16 апреля 2020

Добавьте flex-direction: column; в заголовок.

Это то, что вы ищете? 

body {
  background-image: url("img/background.png");
  background-attachment: fixed;
  background-size: cover;
  font-family: "Share Tech Mono", monospace;
}


header {
  display: flex;
  flex-direction: column;
  height: 100vh;
  align-items: center;
  color: #E0DBD7;
}

header h1 {
  text-transform: uppercase;
  font-size: 120px;
  margin-bottom: 0px;
  text-shadow: 20px 14px 20px #551755;
  font-family: "Coda Caption", sans-serif;
}


blockquote {
  margin-top: 0px;
  font-size: 22px;
}
<body>
    <header>
      <h1>Space</h1>
      <blockquote cite="https://twitter.com/neiltyson/status/124619676562104320">
        Not the final frontier, but the next frontier. Neil DeGrasse Tyson, <cite>Twitter</cite>
      </blockquote>
    </header>

    <main>
      <section id="intro">
        <h2>An Introduction</h2>
        <section>
          <img src="img/intro.jpg" alt="Helix nebula">
          <p>
            There are more stars in our universe than grains of sand in all of Earth's deserts
            and on all of its beaches. There are more than 200 billion stars in the Milky
            Way galaxy alone, 10% of which are similar to the Sun. Nearly a fifth of those
            Sun-like stars have an Earth-sized plant in the "habitable zone", meaning there are
            an estimated 4 billion Earth-like planets in our galaxy. That number balloons to
            40 billion if you include planets orbiting red dwarfs. The closest one? That would
            be Proxima Centauri b, which orbits the closest star to the Sun, Proxima Centauri,
            a mere 4.2 light-years away. If you were traveling at the speed of the
            fastest-moving manmade object (the Parker Solar Probe), an amazing 68.6 km/s,
            it would still take 18,500 years to get there. So close, yet so far.
          </p>
        </section>
      </section>
      </main>
      </body>
0 голосов
/ 16 апреля 2020

Флекс - удивительный единорог зверя. Но вот мое мнение о том, что вы хотите сделать.

Во-первых: 

display: flex;

правильно размещено в родительском элементе "header"

Flex также имеет другие атрибуты, которые должны go в родительском элементе. А именно flex-direction (в вашем случае) 

`flex-direction: column;`

Также должен быть на элементе header. Вот как должен выглядеть ваш заголовок css. 

header {
  display: flex;
  flex-direction: column;
  height: 100vh;
  align-items: center;
  color: #E0DBD7;
}

На данный момент вы можете использовать селектор заголовка header > *, чтобы настроить высоту элементов заголовка. В связанном коде я обнаружил, что высота 25% работает лучше всего для меня. Поиграйте с высотой, чтобы сделать это правильно. 

header > * {
  height: 25%;
}

В качестве альтернативы вы также можете настроить высоту или поле blockquote отдельно. 

blockquote {
  margin: -5px; (I have not tried this value so it will have to be vetted)
}

Это должно приблизить вас к тому, о чем я думаю, вы просите. Вот ссылка на настройку пера, которую вы можете использовать с flexbox. https://codepen.io/roguemaps/pen/KKdzaxX Также здесь есть ссылка на шпаргалку, которую я часто использую при выравнивании элементов с помощью flex. https://yoksel.github.io/flex-cheatsheet/#flex -направление

Удачи. Надеюсь, это поможет.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...