Выровняйте базовые линии предметов внутри flexbox

Question

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

Я могу заставить его работать, если я ditch flexbox в целом, но он мне нужен для отзывчивости.

Канонический совет, похоже, заключает в себе гибкие элементы в inline-block, но, как вы можете видеть из этого кода, мне кажется, что он не работает.

Вот кодовый блок, где я пробовал вещи: https://codepen.io/jskrt/pen/OJyXxyv

.value_and_unit {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: baseline;
}

.value {
  line-height: 1;
  font-size: 120px;
  margin-right: 10px;
}

.unit_container {
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-end;
  align-items: center;
}

.divider {
  width: 100%;
}

.inline-block {
  display: inline-block;
}

<div class="value_and_unit">
  <span class="value">
    340
  </span>
  <div class="unit_container">
    <span class="unit">
      m
    </span>
    <hr class="divider" />
    <span class="unit">
      s
    </span>
  </div>
</div>

Answer 1

Попробуйте следующее:

.value_and_unit {
    display: flex;
    /* flex-flow: row nowrap; */
    /* justify-content: flex-start; */
    /* align-items: baseline; */
}

.value {
    font-size: 120px;
    margin-right: 10px;
    line-height: 1;
}

Скажите, является ли это желаемым эффектом, а если нет, скажите, в чем проблема, поэтому у меня есть подсказка, которой нужно следовать. Удачи!

РЕДАКТИРОВАТЬ: Заменить тег <h1> на <div>, потому что браузеры по умолчанию добавляют к нему высоту строки, поля и другие свойства! Украсьте изделие по своему желанию, добавив жирный шрифт самостоятельно. Имейте в виду, что h1 - это тег semanti c с большим весом и не должен использоваться, когда он не требуется !!!

EDIT2: я забыл упомянуть, что работал с кодом в реальной среде, а не в ручке, и все выглядело хорошо, если я правильно понял вашу проблему. Попробуйте сами на реальном сервере, если есть проблема с кодом.

Answer 2

Если элемент .value будет содержать только цифры, то вы, вероятно, можете обойтись простым изменением line-height. Сделайте его немного меньше, чтобы линейный блок уменьшался до высоты шрифта.

.value_and_unit {
  display: flex;
  border: 1px solid red; /* demo */
}

.value {
  line-height: .75; /* key adjustment */
  font-size: 120px;
  margin-right: 10px;
}

.unit_container {
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-end;
  align-items: center;
}

.divider {
  width: 100%;
}

<div class="value_and_unit">
  <span class="value">340</span>
  <div class="unit_container">
    <span class="unit">m</span>
    <hr class="divider" />
    <span class="unit">s</span>
  </div>
</div>

---

Однако этот метод не будет работать, если элемент .value содержит случайные буквы, поскольку дополнительный пробел над и под числами существует для приспособить спусков и спусков .

В этом случае вам нужно будет попробовать другой метод. align-items: flex-end будет работать (т. Е. Визуальные базовые линии будут выровнены), но в этом случае единицы будут выровнены ниже чисел.

.value_and_unit {
  display: flex;
  align-items: flex-end;
  border: 1px solid red;
  padding: 5px;
}

.value {
  font-size: 120px;
  margin-right: 10px;
  border: 1px dashed blue;
}

.unit_container {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  border: 1px dashed blue;
}

.divider {
  width: 100%;
}

<div class="value_and_unit">
  <span class="value">340j&Aacute; </span>
  <div class="unit_container">
    <span class="unit">m</span>
    <hr class="divider" />
    <span class="unit">s</span>
  </div>
</div>

Итак, поскольку вы хотите, чтобы базовая линия "s" была выровнена с базовой линией чисел, вы на самом деле не ищите выравнивание базовой линии (потому что истинная базовая линия коробка большего размера находится под "j"). Вы хотите произвольное выравнивание, поэтому в этом случае может потребоваться корректировка line-height.

Answer 3

Попробуйте установить значение align-items в end . Это так

align-items: end;