使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）是新方法。 Flexbox已失效 easy 。

从您的问题中，您将最感兴趣：

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

Flexbox需要做两件事：

1. 父容器（例如DIV，剖面，侧面，p等）在此上面，放置display:flex;和justify-content: space-around;

>

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

资源：

Here is an excellent 20min video tutorial

Here is a great cheatsheet