css 我怎样才能把一个包含在列的灵活方向和中心的内容的项目结束？[副本]

lnlaulya 于 2023-05-19 发布在其他

关注(0)|答案(1)|浏览(87)

此问题已在此处有答案：

Center and bottom-align flex items（3个答案）
5天前关闭。
https://codesandbox.io/s/romantic-proskuriakova-q5w4ik?file=/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;
}

我怎么能把“E”写在容器的底部？？
我不想使用相对位置和绝对位置，因为我需要它响应。
我想让所有内容都居中，除了包含字母E的div

css

来源：https://stackoverflow.com/questions/76245485/how-can-i-put-an-item-at-end-that-is-contained-in-a-flex-direction-of-column-and

1条答案

按热度按时间

a7qyws3x1#

根据我的理解，你希望A，B，C，D居中，E在底部。问题是你给了#container指令来显示：flex和justify-content：中心，但当您使其显示：flex也会将其应用于其子节点。所以#end是居中的，它不会接受justify-self：柔性端
您可以通过将ABCD设置为自己的组并应用justify-content将其与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;
}

min-height应用于使space-between的空间有效。Flexbox可能会让人感到困惑，但可以在YouTube上查看Kevin Powell在Flexbox上的视频，他很好地解释了你需要的一切。

赞(0）回复(0）举报 2023-05-19

我来回答

css 我怎样才能把一个包含在列的灵活方向和中心的内容的项目结束？[副本]

1条答案

相关问题

热门标签

最新问答