Блог

Предположим, у меня есть <ul> контейнер, стилизованный под определенный класс.

Соответствующие стили

 .resipes_filter .resipes_filter-dish {
    list-style: none;
    margin: 0;
    padding-left: 0;
}
dl, ol, ul {
    margin-top: 0;
    margin-bottom: 1rem;
}
*, ::after, ::before {
    box-sizing: border-box;
}
  

Внутри него у нас есть <li> элементы, которые имеют следующие стили:

 display: inline-block;
margin-right: 10px;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 10px;
width: 90px;
height: 90px;
border-radius: 10px;
border: 1px;
  

В настоящее время это выглядит следующим образом.

Чего бы я хотел, так это чтобы внутренние контейнеры выровнялись гармонично и умно. Это означало бы равное расстояние друг от друга и с одинаковым запасом с обеих сторон (слева и справа) внешнего контейнера.

Как можно это сделать?

P.S. Проект использует необработанный CSS, поэтому такие вещи, как SASS или LESS, здесь не совсем подходят.

В прошлом году Flexbox вызвал большой ажиотаж — и вы обнаружили одну из причин этого.

Есть причина, по которой основное изменение с Bootstrap3 на Bootstrap4 заключается в переходе с floats на flexbox. Floats был старым способом позиционирования элементов; flexbox (и CSSGrid) — новый способ. Flexbox очень прост.

Из вашего вопроса вас больше всего заинтересует:

 justify-content: space-evenly;  (or perhaps "space-around")
  

Для Flexbox требуются две вещи:

1. Родительский контейнер (например, DIV, section, aside, p и т.д.) На это поместите display:flex; и justify-content: space-around;

2. Один или несколько дочерних элементов (например, div, p, img и т.д.) На них поместите: flex:1

Ресурсы:

Вот отличный 20-минутный видеоурок

Вот отличная контрольная таблица