Выравнивание DOM-контейнеров на равном расстоянии друг от друга и внешнего контейнера

Question

Предположим, у меня есть контейнер <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, на самом деле не подходят.

Answer 1

В прошлом году было много волнений по поводу Flexbox - и вы обнаружили одну из причин.

Существует причина, по которой основное основное изменение ядра с Bootstrap3 на Bootstrap4 перемещается с поплавков на flexbox. Поплавки были старым способом позиционирования предметов; flexbox (и CSSGrid) - это новый способ. Флексбокс мертв легкий .

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

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

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

1. Родительский контейнер (например, DIV, раздел, в стороне, p и т. Д.) Для этого положите display:flex; и justify-content: space-around;

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

Ресурсы:

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

Вот отличная таблица