色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

如何將包含在列的伸縮方向和居中對齊內容中的項目放在末尾？[重復]

CSS
夏志豪1年前7瀏覽0評論

https://codesandbox.io/s/romantic-proskuriakova-q5w4ik?文件=/src/styles.css

我有下面的html

<div id="container">
      <div>A</div>
      <div>B</div>
      <div>C</div>
      <div>D</div>
      <div id="end">E</div>
    </div>

使用以下css

#container {
  height: 500px;
  border: 1px solid red;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#end {
  justify-self: end;
  color: red;
}

我怎么能說& quotE & quot在容器的底部？？

我不想使用位置相對和絕對，因為我需要這個來響應。

我希望除了包含字母E的div之外的所有內容都居中

根據我的理解，你希望A，B，C，D在中間，E在底部。問題是您給了#container指令來顯示:flex和justify-content: center，但是當您讓它顯示:flex時，它也將該指令應用于其子元素。所以#end是居中的，不需要justify-self: flex-end。

您可以通過將ABCD放入它自己的組中并應用justify-content: space-between將其與E分開來解決這個問題。

如果沒有意義，下面是代碼:

HTML:

<body>
<div id="container">
  <div id="group-container">
    <div>A</div>
    <div>B</div>
    <div>C</div>
    <div>D</div>
  </div>
  <div id="end">E</div>
</div>

CSS:

#container {
  height: 500px;
  border: 1px solid red;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#group-container{
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
}

#end {
  color: red;
}

最小高度被應用于使空間之間的空間工作。 Flexbox可能會令人困惑，但請在Youtube上查看Kevin Powell在flexbox上的視頻，他會很好地解釋您需要的一切。