为什么flexbox空间不起作用？

Question

我正在尝试实现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容器的左侧齐平,最右侧与ul容器的右侧li齐平.欢迎任何帮助.

Answer 1

问题是你应该justify-content: space-between;在具有display: flex属性的元素上设置或者更好地在'parent'上设置,因此'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;
}

Answer 2

还有一点要记住,除了需要添加justify-content:space-between到flex容器而不是元素本身; 确保容器内没有空元素(如空div或:after).

在我的情况下,结果是JS从flex之前的几天添加了一个空div作为"clearfix",当时事情是浮动元素完成的.

justify-content:space-between 将证明容器内的所有元素,即使那些没有内容的元素,这可能会弄乱对齐和包装.

Answer 3

Flex属性分为两类:flex容器和flex项.

某些属性仅适用于容器,其他属性仅适用于项目.

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

在您的代码中,justify-content应用于项目,因此它没有任何效果.

将其重新分配给容器.

当然,元素既可以是flex容器也可以是item,在这种情况下,所有属性都适用.但事实并非如此.该li元素是完全柔性的项目,并会忽略容器的属性.

有关弹性属性列表(按容器和项目划分),请参阅:Flexbox完整指南