В предыдущем уроке в нашей плиточке получалось так, что ширина элементов и их отступов в сумме должна давать ширину родителя. Это немного не универсально. Давайте сделаем так, чтобы элементы автоматически подстраивались под ширину родителя.
Пусть у нас есть вот такой родитель:
.parent {
display: flex;
flex-wrap: wrap;
width: 800px;
margin: 50px auto;
border: 1px solid red;
}
Пусть элементы этой плиточки стоят по 4
блока в ряд:
.child {
box-sizing: border-box;
width: 200px;
height: 100px;
border: 1px solid green;
}
Зададим ширину наших блоков так, чтобы каждый
из них занимал четверть родителя. Для этого
поставим их размер в 25%:
.child {
box-sizing: border-box;
width: 25%;
height: 100px;
border: 1px solid green;
}
Задайте блокам ширину в процентах так, чтобы в плитке стало три блока в ряд.
Задайте блокам ширину в процентах так, чтобы в плитке стало два блока в ряд.
Задайте блокам ширину в процентах так, чтобы в плитке стало по одному блоку в ряд.