html - 将 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;

目前的情况是这样的。

我希望内部容器能够和谐、巧妙地对齐。这意味着彼此等距，并且与外容器的两侧(左侧和右侧)具有相同的边距。

怎么能做到这一点呢？

附言该元素正在滚动原始 CSS，因此 SASS 或 LESS 之类的东西在这里并不是真正的选择。

Answer 1

去年有很多关于 Flexbox 的兴奋 - 你已经发现了原因之一。

从 Bootstrap3 到 Bootstrap4 的主要核心变化是从 float 到 flexbox，这是有原因的。 float 是放置元素的旧方法； flexbox(和 CSSGrid)是新的方式。 Flexbox 非常简单。

从你的问题来看，你最感兴趣的是:

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

Flexbox 需要两件事:

1. 一个父容器(例如 DIV、section、aside、p 等) 在此之上，放置 display:flex; 和 justify-content : 空间环绕;

2. 一个或多个子元素(例如 div、p、img 等) 在这些元素上，放置:flex:1

资源:

Here is an excellent 20min video tutorial

Here is a great cheatsheet