为什么右侧的 flexbox 项间距不正确 [关闭]-解网

问：

这个问题是由错别字或无法再现的问题引起的。虽然类似的问题可能在这里是主题，但这个问题的解决方式不太可能帮助未来的读者。

7天前关闭。

改进此问题

下面的链接有一个行方向的弹性框，里面有一个列方向的弹性框。右侧第二个弹性框内的绿色按钮没有均匀地放置在弹性框内以占据弹性框的高度。

为什么？

[JSFiddle URL https://jsfiddle.net/gpranjan/d7aqpxn0/6/]（https://jsfiddle.net/gpranjan/d7aqpxn0/6/)

<!DOCTYPE html>
<html lang="en">
<head>
  <link href="asu_bio_web.css" rel="stylesheet"/>
</head>
<body>

  <div class="container page">

    <div class="leftPanel">
    </div>

    <div class="midPanel">
      <img class="section-image" src="https://th.bing.com/th/id/OIP.XbLWCZk5jM_32n5owqQYmwHaLH?w=236&h=354&c=7&o=5&dpr=2&pid=1.7"/>
    </div>

    <div class="rightPanel">
    <div class="flex1">
    <div class="rightPanelItems">

      <div class="rightPanelButton">
        <a href="/asu_bio/site/html/asu_bio_second_quiz.html">Quiz</a>
      </div>

      <div class="rightPanelButton">
        <a href="/asu_bio/site/html/asu_bio_forms_survey.html">Survey</a>
      </div>

      <div class="surveyPanel rightPanelButton">
        <a href="/asu_bio/site/html/asu_bio_forms_support.html">Support</a>
      </div>

      <div class="rightPanelButton">
        <a href="/asu_bio/site/html/asu_bio_forms_feedback.html">Feedback</a>
      </div>

    </div>

    </div>
    </div>
  </div>

</body>
</html>

* {
  font-family: Arial, Helvetica, sans-serif;
}

html, body {
  margin: 0;
  border: 0;
  padding: 0;
  background-color: #fde3e9;
}

.page {
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  margin-bottom: 0;
  background-color: #fde3e9;
  width: max-content; 
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}

.leftPanel {
  width: 25vw;
  height: 100%;
}

.midPanel {
  width: max-content;
  height: max-content;
}

.section-image {
  width: 50vw;
  height: auto;
}

.rightPanel {
  display: flex;
  width: 25vw;
  height: inherit;
  background-color: blue;
}

.flex1 {
  flex: 1 0 auto;
  height: inherit;
  background-color: red;
}

.rightPanelItems {
  display: flexbox;
  flex-direction: column nowrap;
  justify-content: center;
  background-color: yellow;
  height: 100%;
}

.rightPanelButton {
  background-color: darkolivegreen;

  margin: auto;
  flex: 1 0 auto;
}

.rightPanelButton > a {
  color: white;
}

HTML CSS 弹性框

为什么右侧的 flexbox 项间距不正确 [关闭]

Why are the flexbox items on the right side not spacing correctly [closed]

评论