将 Flex 父级置于页面底部

问题描述 投票：0回答：1

我正在尝试将我的“div--stats”弹性容器设置为始终位于页面底部，目前我只能通过手动将 margin-top 设置为 430px 来做到这一点，但是我希望能够自动执行此操作。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Jersey+15&display=swap" rel="stylesheet">
</head>
<body class="b--color">
    <div class="main--container">
    <div class="button--container">
        <button class="button--element">Press to change color</button>
        <h1 class="button--header">Color</h1>
    </div>
    <div class="div--stats">
        <h1 class="previous--colorsh1">Previous Colors</h1>
        <ul class="color--history">
            <li>Test</li>
        </ul>
    </div>
    <script src="script.js"></script>
    </div>
</body>
</html>

/*
1. Use a more-intuitive box-sizing model.
*/
*, *::before, *::after {
    box-sizing: border-box;
  }
  /*
    2. Remove default margin
  */
  * {
    margin: 0;
  }
  /*
    Typographic tweaks!
    3. Add accessible line-height
    4. Improve text rendering
  */
  body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    height: 100%;
  }
  /*
    5. Improve media defaults
  */
  img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
  }
  /*
    6. Remove built-in form typography styles
  */
  input, button, textarea, select {
    font: inherit;
  }
  /*
    7. Avoid text overflows
  */
  p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
  }
  /*
    8. Create a root stacking context
  */
  #root, #__next {
    isolation: isolate;
  }

  .main--container {
    display: flex;
    flex-wrap: wrap;
    }

.b--color {
    background-color: red
}

.button--container {
    color: white;
    display: flex;
    flex-basis: 100%;
    justify-content: center;
    margin-top: 150px;
    flex-wrap: wrap;
    align-items: flex-start
}

.button--header {
  flex-grow: 0;
  font-family: "Jersey 15", Courier, monospace;
  text-align: center;
  flex-basis: 100%;
  margin-top: 30px;
}

.button--element {
    background-color: white;
    font-weight: 500;
    border-radius: 5px;
    font-style: normal;
    font-family: "Jersey 15", Courier, monospace;
    align-self: center;
    height: 40px;
    flex-basis: 200px;
    transition: all 0.15s linear;
}

.button--element:hover {
  border-color: 2px solid black;
  cursor:grab;
}
.previous--colorsh1 {
    text-align: center;
    font-family: "Jersey 15", sans-serif;
    font-weight: 400;
    font-size: 54px;
    flex-basis: 100%;
    color: white;
}

.div--stats {
  display: flex;
  flex-basis: 100%;
  flex-wrap: wrap;
  border-top: 5px solid white;
  background-color: black;
  flex-grow: 1;
  margin-top: 410px;
}

.color--history {
  color: white;
}


.color--history li {
    list-style: none;
    font-size: 32px;
    font-family: "Jersey 15", sans-serif;
    font-weight: 400;
    font-style: normal;
}

我尝试关注一些与此相关的帖子，但我尝试将第一个 Flex 父容器设置为 justify-content: space- Between 但这似乎不起作用。设置 margin-top: auto 会将 div 容器放置在按钮 div 的下方。如前所述，将其设置为 430px 似乎可行，如果这是最好的方法，我很乐意将其保留，并设置为 Flex Growth，因为列表将被填充，因为它将包含不同的列表项。

感觉我已经把其他 div 的样式搞得太复杂了。

css
1个回答
0
投票

这就是您正在寻找的吗？

https://jsfiddle.net/rLnj576d/10/

/*
1. Use a more-intuitive box-sizing model.
*/
*,
*::before,
*::after {
  box-sizing: border-box;
}

/*
    2. Remove default margin
  */
* {
  margin: 0;
}

/*
    Typographic tweaks!
    3. Add accessible line-height
    4. Improve text rendering
  */
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  height: 100%;
  min-height: 100vh;
  display:flex;
}

/*
    5. Improve media defaults
  */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

/*
    6. Remove built-in form typography styles
  */
input,
button,
textarea,
select {
  font: inherit;
}

/*
    7. Avoid text overflows
  */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

/*
    8. Create a root stacking context
  */
#root,
#__next {
  isolation: isolate;
}

.main--container {
  flex-grow:1;
  display: flex;
  flex-direction: column;
}

.b--color {
  background-color: red
}

.button--container {
  color: white;
  display: flex;
  flex-basis: 100%;
  justify-content: center;
  margin-top: 150px;
  flex-wrap: wrap;
  align-items: flex-start;
  flex-grow:1;
}

.button--header {
  flex-grow: 0;
  font-family: "Jersey 15", Courier, monospace;
  text-align: center;
  flex-basis: 100%;
  margin-top: 30px;
}

.button--element {
  background-color: white;
  font-weight: 500;
  border-radius: 5px;
  font-style: normal;
  font-family: "Jersey 15", Courier, monospace;
  align-self: center;
  height: 40px;
  flex-basis: 200px;
  transition: all 0.15s linear;
}

.button--element:hover {
  border-color: 2px solid black;
  cursor: grab;
}

.previous--colorsh1 {
  text-align: center;
  font-family: "Jersey 15", sans-serif;
  font-weight: 400;
  font-size: 54px;
  flex-basis: 100%;
  color: white;
}

.div--stats {
  display: flex;
  flex-wrap: wrap;
  border-top: 5px solid white;
  background-color: black;
  flex:1 1 0;
  /* margin-top: 410px; */
}

.color--history {
  color: white;
}


.color--history li {
  list-style: none;
  font-size: 32px;
  font-family: "Jersey 15", sans-serif;
  font-weight: 400;
  font-style: normal;
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.