css 为什么正义内容：间隔不起作用？

unhi4e5o 于 2023-03-05 发布在其他

关注(0)|答案(3)|浏览(154)

我试图实现flexbox，但不能让它工作。我错过了什么？我有所有的flexbox供应商前缀到位。

.main-navigation ul { 
   width:100%; 
   display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6, BB7 */
   display: -ms-flexbox;  /* TWEENER - IE 10 */
   display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
   display: flex;         /* NEW, Spec - Firefox, Chrome, Opera */
  }

.main-navigation ul li {
   justify-content:space-between; 
   width:100px; 
   background:#666; 
   display:block;
 }

我们的目标是让最左边的li与ul容器的左边齐平，最右边的li与ul容器的右边齐平。

css

来源：https://stackoverflow.com/questions/33010395/why-is-justify-content-space-between-not-working

3条答案

按热度按时间

2admgd591#

还有一件事要记住，除了需要将justify-content:space-between添加到flex容器而不是元素本身之外;确保容器中没有空元素（如空的div或:after）。
在我的例子中，结果是一个JS添加了一个空的div作为“clearfix”，这是在flex之前的日子里发生的，当时的事情是浮动元素。
justify-content:space-between将调整容器中的所有元素，甚至是那些没有内容的元素，这可能会打乱对齐和 Package 。

赞(0）回复(0）举报 2023-03-05

wydwbb8l2#

问题是您应该在具有display: flex属性的元素上设置justify-content: space-between;，或者更好地说，在'parent'上设置justify-content: space-between;，这样'child'元素将彼此之间以空格对齐。

.main-navigation ul { 
  width: 100%; 
  display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6, BB7 */
  display: -ms-flexbox;  /* TWEENER - IE 10 */
  display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
  display: flex;         /* NEW, Spec - Firefox, Chrome, Opera */
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.main-navigation ul li {
  width: 100px; 
  background: #666; 
  display: block;
}

赞(0）回复(0）举报 2023-03-05

bweufnob3#

Flex特性分为两类：* 弹性容器 * 和 * 弹性项目 *。
某些属性仅应用于容器，其他属性仅应用于项。

justify-content属性仅适用于Flex容器。

在您的代码中，justify-content应用于这些项，因此没有任何效果。
将其重新分配给容器。
当然，一个元素可以同时是flex容器和item，在这种情况下所有属性都适用，但这里不是这样，li元素只是flex item，将忽略容器属性。
有关按容器和项目划分的Flex属性列表，请参见：A Complete Guide to Flexbox

赞(0）回复(0）举报 2023-03-05

我来回答

css 为什么正义内容：间隔不起作用？

3条答案

相关问题

热门标签

最新问答