Як можна розташувати 5 блоків на сторінці так, щоб при зміні ширини браузера вони також змінювали свою ширину

Тема: Гибкое размещение элементов на веб-странице

Разъяснение:
Для гибкого размещения элементов на веб-странице, не используя свойства `float: left` или `float: right`, можно использовать свойства `display: inline-block` и `text-align: center` у родительского элемента, в котором находятся блоки.

Свойство `display: inline-block` позволяет элементам размещаться в ряд, а свойство `text-align: center` выравнивает элементы по центру родительского блока.

Вот пример кода:

css







    
Блок 1


    
Блок 2


    
Блок 3


    
Блок 4


    
Блок 5

Совет: Чтобы лучше понять работу свойств `display: inline-block` и `text-align: center`, рекомендуется практиковаться с ними на примерах. Изменяйте значения свойств и наблюдайте, как меняется отображение элементов.

Задача на проверку: Попробуйте изменить фоновый цвет блоков на зеленый, а самому контейнеру задайте фоновый цвет желтый.

Название: Расположение блоков на странице с изменяемой шириной

Объяснение:
Чтобы расположить 5 блоков на странице таким образом, чтобы они изменяли свою ширину при изменении ширины браузера, но не использовать параметр float: left или float: right, вы можете воспользоваться гибкой моделью раскладки (flexbox). Flexbox позволяет гибко управлять расположением элементов внутри контейнера и автоматически изменять их размеры в зависимости от доступного пространства.

Для решения задачи вам необходимо создать контейнер, внутри которого будут расположены 5 блоков, и применить к нему следующие свойства:

css

.container {

  display: flex;

  justify-content: space-between;

}

Это устанавливает контейнер в режим гибкой модели раскладки и распределяет блоки равномерно по горизонтали с равным пространством между ними.

Доп. материал:

html



  
Блок 1


  
Блок 2


  
Блок 3


  
Блок 4


  
Блок 5

Совет:
- Убедитесь, что у ваших блоков заданы правильные значения ширины, чтобы они могли изменяться при изменении ширины браузера.
- Изучите дополнительные свойства и возможности гибкой модели раскладки (flexbox), такие как align-items, align-content и flex-wrap, чтобы добиться требуемого расположения элементов.

Закрепляющее упражнение:
1. Создайте HTML-страницу с контейнером и пятью блоками внутри.
2. Примените необходимые CSS-стили для задания гибкой модели раскладки (flexbox).
3. Измените ширину браузера и убедитесь, что блоки соответствующим образом изменяют свою ширину.