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容器的左边齐平，最右边li与右边的from tornado.concurrent import run_on_executor from concurrent.futures import ThreadPoolExecutor ... class SampleThreaded(object): executor = ThreadPoolExecutor(4) @run_on_executor def func1(self): thread_id = ???齐平。 ul的容器。欢迎任何帮助。

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

Flex属性分为两类： flex容器和 flex项。

某些属性仅适用于容器，其他属性仅适用于项目。

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

在您的代码中，justify-content会应用于商品，因此无法生效。

将其重新分配给容器。

当然，元素既可以是flex容器也可以是item，在这种情况下，所有属性都适用。但事实并非如此。 li元素仅是弹性项目，将忽略容器属性。

有关弹性属性的列表 - 除以容器和项目 - 请参阅：A Complete Guide to Flexbox

Answer 3

除了需要将justify-content:space-between添加到Flex容器而不是元素本身之外，还要记住另外一件事;确保容器内没有空元素（如空div或:after）。

在我的情况下，结果是JS在flex之前的几天将一个空div添加为“clearfix”，当时事情是浮动元素。

justify-content:space-between将证明容器内的所有元素，即使那些没有内容的元素，也会弄乱对齐和包装。

为什么flexbox空间不起作用？

3 个答案: