假设我有一个使用特定类设置样式的<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之类的选择。
答案 0 :(得分:1)
去年,Flexbox令人兴奋不已-您已经找到了原因之一。
从Bootstrap3到Bootstrap4的主要核心更改是从浮动浮动到Flexbox,这是有原因的。浮动广告是放置商品的旧方法; flexbox(和CSSGrid)是新方法。 Flexbox已失效 easy 。
从您的问题中,您将最感兴趣:
justify-content: space-evenly; (or perhaps "space-around")
Flexbox需要做两件事:
父容器(例如DIV,剖面,侧面,p等)在此上面,放置display:flex;
和justify-content: space-around;
一个或多个子元素(例如div,p,img等)在这些元素上,放置:flex:1
资源: