Ну, независимо от значений по умолчанию для элемента, вы можете изменить это свойство, установив:

display: block
display: inline-block

Теперь в коде измените набор правил .box, чтобы все поля отображались рядом.

Флексбокс и сетка

Что касается внутренних типов отображения, у нас есть еще несколько вариантов позиционирования элементов. Мы можем превратить наш элемент во флексбокс или сетку, что повлияет на расположение его дочерних элементов.

Дисплей: гибкий

Каждая из этих концепций заслуживает отдельного поста, но, по сути, гибкий блок «гибко» позиционирует элементы, содержащиеся внутри родительского элемента, внутри строки. Флексбокс более адаптируется к разным размерам экрана, поскольку он размещает элементы относительно друг друга и содержащего его элемента, а не относительно окна.

Чтобы увидеть это в действии, взгляните на набор правил .frame в Codepen.

Раскомментируйте следующую строку кода:

display: flex;

Это очень похоже на четыре строчных блока, верно? По умолчанию гибкий контейнер выравнивает свои элементы по началу флексбокса или по левому краю, но это тоже можно изменить!

Под объявлением флексбокса добавьте следующее:

justify-content: center;

И теперь мы должны увидеть, как все поля появляются в центре экрана!

Но что, если мы не хотим, чтобы они вот так застряли на вершине? Добавим еще:

align-items: center;

Большой!

Дисплей: Сетка

Примечание. Прежде чем двигаться дальше в CodePen, обязательно закомментируйте или удалите строки, содержащие display: flex и добавленные вами свойства justify-content или align-items.

Помимо флексбокса у нас также есть возможность превратить весь наш элемент в сетку, в которой мы можем размещать элементы!

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

Раскомментируйте следующие строки в наборе правил .frame!

display: grid;  
  grid-template: 1fr 1fr / 1fr 1fr;
  align-items: center;
  justify-items: center;

Теперь вы должны увидеть каждый из прямоугольников, расположенных в центре квадранта кадра!

Используйте свои новые навыки!

Как и в предыдущей статье, здесь есть ряд проблем. Перед попыткой удалить или повторно прокомментировать строки кода, создающие макет сетки!

Задача № 1: Найдите в MDN правильное свойство justify-content, чтобы каждый из блоков отображался равномерно в горизонтальной плоскости, не касаясь сторон, и в центре по вертикали, как показано на рисунке ниже.

Задание № 2: Все еще находясь в гибком контейнере, посмотрите, сможете ли вы сгруппировать все блоки вместе и разместить их в правом нижнем углу! (Какие свойства вам придется для этого настроить?)

Задача №3: Можете ли вы найти гибкое свойство, которое изменит порядок отображения элементов?

Поздравляем с завершением этих испытаний! Увидимся на следующей неделе, чтобы узнать больше о HTML и CSS!