place-content: center не работает должным образом - PullRequest
Новая
       7

place-content: center не работает должным образом

0 голосов
/ 10 июля 2020

Я пытаюсь понять, почему place-content: center не работает должным образом в данном примере: 

div {
  background-color: maroon;
  display: flex;
  font-size: 1.25rem;
  height: 2em;
  line-height: 1.3;
  width: 2em;
  place-content: center;
}

a {
  color: white;
}
<div>
  <a href="/page-2" aria-label="Page 2" aria-current="page">2</a>
</div>

Я понимаю, что свойство place-content является сокращением от align-content и justify-content, поэтому вопрос может быть ограничен тем, почему align-content не делает ' t работает в приведенном выше коде.

Однако, если я изменю свойство display на display: grid;, оно будет работать должным образом: 

div {
  background-color: maroon;
  display: grid;
  font-size: 1.25rem;
  height: 2em;
  line-height: 1.3;
  width: 2em;
  place-content: center;
}

a {
  color: white;
}
<div>
  <a href="/page-2" aria-label="Page 2" aria-current="page">2</a>
</div>

В документах указано, что:

Свойство place-content CSS является сокращением для align-content и justify-content. Его можно использовать в любом методе макета, который использует оба этих значения выравнивания.

Любые указатели?

1 Ответ

1 голос
/ 10 июля 2020

Вам необходимо использовать flex-wrap:wrap;, чтобы иметь возможность использовать align-content с flexbox 

div {
  background-color: maroon;
  display: flex;
  font-size: 1.25rem;
  height: 2em;
  line-height: 1.3;
  width: 2em;
  place-content: center;
  flex-wrap:wrap;
}

a {
  color: white;
}
<div>
  <a href="/page-2" aria-label="Page 2" aria-current="page">2</a>
</div>

Свойство align-content выравнивает линии гибкого контейнера внутри гибкого контейнера, когда есть дополнительное пространство на поперечной оси, аналогично тому, как justify-content выравнивает отдельные элементы на главной оси. Обратите внимание, это свойство не влияет на однострочный гибкий контейнер. ref

и

Свойство flex-wrap определяет, является ли гибкий контейнер однострочным или многострочным, а также направлением поперечной оси, которое определяет направление, в котором складываются новые линии.

nowrap

Гибкий контейнер является однострочным.

wrap

Гибкий контейнер является многострочным. исх.

...