Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

1 <p>Выравнивание элементов по поперечной оси - одна из главнейших болей всех верстальщиков. Сколько различных способов поставить элемент по центру поперечной оси - даже и не счесть. У всех способов есть свои преимущества и недостатки, но главное одно - никакой из них не является универсальным.</p>

2 <p>Приход Flex помог решить и эту проблему всего одним простым свойством. Это действительно отлично, потому что теперь нам не важны внешние факторы: знание размеров внешнего или внутреннего блока; количество строк текста; возможность его переноса; поддержка браузером. Все это, кроме поддержки браузеров (я надеюсь, вы не разрабатываете под IE7), можно не учитывать, используя простое правило align-items.</p>

3 <p>Для демонстрации работы правила возьмем<em>CodePen</em>и добавим туда три блока с разным размером шрифта:</p>

4 <p><a>https://codepen.io/hexlet/pen/ZEEzJqX</a></p>

5 <h2>align-items: stretch</h2>

6 <p>Значение применяется по умолчанию к дочерним элементам внутри флекс-контейнера. Оно говорит, что высоту необходимо выставить автоматически в зависимости от высоты Flex-контейнера.</p>

7 <p>Ранее для достижения такого эффекта приходилось использовать JS. Блоки автоматически выставят высоту только при условии отсутствия другого значения высоты у блока в CSS.</p>

8 <p>Если один из блоков имеет свое значение высоты, то все зависит от этого значения:</p>

9 <ul><li>Если оно меньше высоты самого высокого блока, то ничего не произойдет, кроме изменения высоты одного блока</li>

10 <li>Если значение больше, чем высота самого высокого блока, то все блоки автоматически пересчитают свою высоту, так как увеличится высота контейнера</li>

11 </ul><p>При использовании любых других значений высота элементов выставляется только такой, какая необходима блоку исходя из контента, свойств padding и border. Меняется только расположение элементов.</p>

12 <h2>align-items: flex-start</h2>

13 <p>Элементы располагаются с начала флекс-контейнера по поперечной оси.</p>

14 <p><a>https://codepen.io/hexlet/pen/yLLBzMj</a></p>

15 <h2>align-items: center</h2>

16 <p>Элементы внутри флекс-контейнера располагаются по центру поперечной оси.</p>

17 <p><a>https://codepen.io/hexlet/pen/XWWreRy</a></p>

18 <h2>align-items: flex-end</h2>

19 <p>Элементы внутри флекс-контейнера располагаются от конца поперечной оси</p>

20 <p><a>https://codepen.io/hexlet/pen/GRRKMvj</a></p>

21 <h2>align-items: baseline</h2>

22 <p>Если вы не знакомы со строением шрифтов, то сначала может показаться непонятным, по какой базовой линии идет выравнивание. Базовая линия шрифта - воображаемая прямая линия, которая проводится по нижнему краю букв без учета выносных элементов. Лучше всего это иллюстрирует следующая картинка:</p>

23 <p>Красным цветом выделена базовая линия шрифта. Именно по ней и будет производиться выравнивание. Браузер найдет элемент с самым большим размером шрифта и выровняет все элементы по его базовой линии. Причем другие блоки также будут выровнены по базовым линиям текста внутри них.</p>

24 <p><a>https://codepen.io/hexlet/pen/YzzKrry</a></p>

25 <h3>Самостоятельное задание</h3>

26 <p>Создайте несколько блоков с текстами внутри флекс-контейнера. Выставьте выравнивание по базовой линии и попробуйте изменять длину текста, а также размер шрифта внутри блоков. Почувствуйте базовую линию шрифта и данное выравнивание.</p>

27 <h3>Документация</h3>

28 <ul><li><a>align-items</a></li>

29 </ul>