Есть ли способ выполнить ./gradlew run --developer = true и установить истинное значение в файле свойств?

Существуют определенные свойства гибкости, которые применимы только к элементам flex, в то время как другие применимы только к гибким контейнерам.

Свойства align-items и justify-content применяются только к контейнерам с гибкостью. Тем не менее, вы используете их в элементе flex ...

.likeness-rank-table .col .col-inner {
  flex: 1;
  align-items: center;
  justify-content: center;
  height: 150px;
}

... поэтому они игнорируются.

Вам нужно добавить display: flex к правилу выше , Это заставит align-items: center работать.

Однако justify-content: center будет продолжать сбой, потому что у родителя есть max-width: 20% ограничение горизонтального движения.

.likeness-rank-table .col {
  box-sizing: border-box;
  text-align: center;
  position: relative;
  flex: 1;
  max-width: 20%;            /* limits horizontal centering of child element */
  min-height: 50px;
  display: flex;
  flex-wrap: wrap;
}

Итак, примените горизонтальное центрирование на родительский уровень вверх.

.likeness-rank-table .likeness-rank-table-body {
  display: flex;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  border: 1px solid #a2a5a7;
  justify-content: center;    /* new */
}

Пересмотренный Codepen

Вот полезный список свойств flex, разбитых на родительский и дочерний: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

0
задан Joffrey B. 18 January 2019 в 15:56
поделиться