Question

我设置了特定的宽度，而且我的弹性项目没有$id = addslashes ($_POST['id']); or $id = addslashes ($_GET['id']);，但由于某些原因，这些属性没有按预期工作。

我只想在流浆箱和列表类之间留出间距。

现在在我的com上，流浆箱居中，但在片段上没有，我不知道为什么，即使margin: auto设置为居中。

但即使在我的计算机上justify-content也无法正常工作。

我的意思是我知道它没有任何效果，但只是因为只有一个项目。

我还评论了一些常见的嫌疑人，但这些都没有用。

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

＆＃13;

right

＆＃13;

.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;
}

＆＃13;

Answer 1

实际上，justify-content和align-items工作正常。

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

首先，请记住flex formatting context的范围是父子关系。

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

因此，每当您想要将flex属性应用于元素时，请确保父级是Flex容器（display: flex或display: inline-flex）。

.right justify-content: center个.headbox容器实际上居中.right。在.headbox和<h3>周围添加边框，以便清楚地看到这一点。

但是如果你想使用flex属性居中.headbox，那么也要使.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;
}

＆＃13;

<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>

＆＃13;

find_element_by_link_text

＆＃13;

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

1 个答案:

jsFiddle