Question

我创建了一个子容器，包含两个我希望显示为flex-direction的项：带有justify-content的行：space-between。我似乎无法让它发挥作用。

HTML：

<body>
<div class="container"> 
<div class="randqg">
<div class="title">Random Quote Generator</div>
<div class="subcontainer">
<i class="fa fa-quote-left fa-3x" aria-hidden="true"></i>
<a class="twitter-share-button" href="https://twitter.com/intent/tweet">Tweet</a>
</div>
<blockquote id="text">Original Text</blockquote>
<div class="subcontainer">
<span id="author">author</span>
<i class="fa fa-quote-left" aria-hidden="true"></i> 
</div>
</div>
</div>
</body>
<script src="https://use.fontawesome.com/02b956c77d.js"></script>

CSS：

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    background-color: blue;
}

.randqg {
  display: flex;
  align-items: center;
  min-height: 24em;
  justify-content: center;
  flex-direction: column;
  width: 500px;
  height: 50%;
  border: 5px solid red;
}

.title {

}

.subcontainer{
    width: 80%;
    height: 80%;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    margin: auto;
}

JS小提琴：https://jsfiddle.net/3qx8aw44/

我已经使用开发工具检查过将内容应用于子容器，因此我不认为这是错字错误。

我认为这可能是项目之间没有足够的可用空间分配的问题。所以改变宽度小于100％。

我检查了

Answer 1

这是因为你正在使用显示块，你不能使用显示块，并在同一个div中给出flexy-content之类的flex属性，你需要使用display flex：

.subcontainer{
  width: 80%;
  height: 80%;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  display: flex;                       /*  added  */
}

证明内容不起作用

1 个答案: