Flexbox对齐内容并证明内容不起作用

Question

我设置了特定的宽度,我没有margin: auto在我的flex项目上,但由于某些原因这些属性没有按预期工作.

我只想在流浆箱和列表类之间进行间隔.

现在在我的com上,流浆箱居中,但在片段上没有,我不知道为什么,即使justify-content设置为居中.

但即使在我的电脑上align-items也不能正常工作.

我的意思是我知道它没有效果,但那就是只有一个项目.

我还评论了一些常见的嫌疑人,但这不起作用.

最后,right实际上是一个更大的容器div的一部分,但这应该是无关紧要的.如果你为整个片段做了一个完整的页面,你会看到我在说什么.

.right {
  display: flex;
  position: relative;
  flex-flow: row wrap;
  align-items: space-between;
  justify-content: center;
  // text-align: center;
  order: 3;
  //background: yellow;
  flex: 1 50%;
  height: 100%;
}
div.list {
  display: flex;
  flex-flow: row wrap;
  width: 70%;
  justify-content: center;
  line-height: 300%;
  border: 1px solid pink;
}
.right .headbox {
  border-bottom: 1px solid orange;
  width: 70%;
  height: auto;
}
.right .list {
  // text-align: center;
  height: auto;
}
.list ul {
  list-style: none;
  padding: 0;
}
.list a {
  text-decoration: none;
  color: inherit;
}

<div class="right">
  <div class="headbox">
    <h3>Visit Us</h3>
  </div>
  <div class="list">
    <ul>
      <li><a href="#">Home</a>
      </li>
      <li><a href="#">Hours</a>
      </li>
      <li><a href="#">Plan</a>
      </li>
      <li><a href="#">Directions</a>
      </li>
    </ul>
  </div>
</div>

Answer 1

其实,无论是justify-content和align-items工作正常.

由于其他原因,您无法获得所需的结果.

首先,请记住,flex格式上下文的范围是父子关系.

这意味着子项之外的后代不是flex项,也不接受flex属性.

因此,每当要将flex属性应用于元素时,请确保父级是Flex容器(display: flex或display: inline-flex).

您的.rightFlex容器justify-content: center实际上已居中.headbox.添加边框.right并.headbox清楚地看到这一点.

但是如果你想<h3>使用flex属性居中,那么也可以创建.headbox一个flex容器:

.headbox {
    display: flex;
    justify-content: center;
    align-items: center;
}

其次,您的布局没有定义的高度.它默认为height: auto(内容的高度).因此,align-items没有空间可以移动东西.

将其添加到您的代码中:

html, body { height: 100%; }

html, body { height: 100%; }      /* NEW */

.right {
    display: flex;
    position: relative;
    flex-flow: row wrap;
    align-items: space-between;
    justify-content: center;
    order: 3;
    flex: 1 50%;
    height: 100%;
}

div.list {
    display: flex;
    flex-flow: row wrap;
    width: 70%;
    justify-content: center;
    line-height: 300%;
    border: 1px solid pink;
}

.right .headbox {
    border-bottom: 1px solid orange;
    width: 70%;
    height: auto;
    
    display: flex;                 /* NEW */
    justify-content: center;       /* NEW */
    align-items: center;           /* NEW */
}

.right .list {
    height: auto;
}

.list ul {
    list-style: none;
    padding: 0;
}

.list a {
    text-decoration: none;
    color: inherit;
}

<div class="right">
    <div class="headbox">
        <h3>Visit Us</h3>
    </div>
    <div class="list">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Hours</a></li>
            <li><a href="#">Plan</a></li>
            <li><a href="#">Directions</a></li>
        </ul>
    </div>
</div>

的jsfiddle