如何让我的 flexbox 垂直扩展？

Question

我得到了使用 flexbox 布局模块的代码。 box-orient 属性设置为水平，我被要求修改代码以将其设置为使用垂直弹性盒并在将鼠标悬停在盒子上时垂直展开。

我已将 -webkit-box-orient 更改为垂直，将 box-orient 更改为垂直。（原始代码是水平的）我还将边距更改为 0px（原始代码的边距为 10 px -10px 10px 0 px）我被告知在框之间不要有任何空格，这就是我更改边距的原因。一切都是原始代码。 我尝试更改过渡并使用转换，但我仍然需要缓出过渡，并且更改这部分代码会使缓出消失。

.flexbox {
  width: 600px;
  height: 420px;
  display: -webkit-box;
  display: box;
  -webkit-box-orient: vertical;
  box-orient: vertical;
}

.flexbox>div {
  -webkit-transition: 1s ease-out;
  transition: 1s ease-out;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  border: 2px solid black;
  width: 90px;
  margin: 0px;
  padding: 20px 20px 20px 20px;
  box-shadow: 10px 10px 10px dimgrey;
}

我只需要帮助弄清楚如何让框在悬停时垂直扩展而不是水平扩展。上面没有列出整个代码，只是一个sn-p。

Answer 1

通过使用max-width 为p 设置动画可能是这样的

.flexbox {
  width: 90px;
  height: 420px;
  display: -webkit-box;
  display: box;
  -webkit-box-orient: vertical;
  box-orient: vertical;
}

.flexbox>div {
  -webkit-border-radius: 10px;
  border-radius: 10px;
  border: 2px solid black;
  width: 90px;
  margin: 0px;
  padding: 20px 20px 20px 20px;
  box-shadow: 10px 10px 10px dimgrey;
}

.flexbox>div:nth-child(1) {
  background-color: lightgrey;
}

.flexbox>div:nth-child(2) {
  background-color: lightgrey;
}

.flexbox>div:nth-child(3) {
  background-color: lightgrey;
}

.flexbox>div:nth-child(4) {
  background-color: lightgrey;
}

.flexbox>div:hover {
  color: white;
  font-weight: bold;
}

.flexbox>div:hover p {
  max-height: 1000px;
  -webkit-transition: 1s ease-in;
  transition: 1s ease-in;
}

.flexbox>div:nth-child(1):hover {
  background-color: royalblue;
}

.flexbox>div:nth-child(2):hover {
  background-color: crimson;
}

.flexbox>div:nth-child(3):hover {
  background-color: crimson;
}

.flexbox>div:nth-child(4):hover {
  background-color: darkgreen;
}

p {
  max-height: 250px;
  overflow: hidden;
  font-family: "Rosario";
  -webkit-transition: 1s ease-out;
  transition: 1s ease-out;
}

<link href='http://fonts.googleapis.com/css?family=Rosario' rel='stylesheet' type='text/css'>


<div class="flexbox">
  <div><img src="GPP.png" alt="Good programming practice icon">
    <p>Good Programming Practices call attention to techniques that will help you produce programs that are clearer, more understandable and more maintainable.</p>
  </div>
  <div><img src="EPT.png" alt="Error prevention tip icon">
    <p>Error-Prevention Tips contain suggestions for exposing bugs and removing them from your programs; many describe aspects of programming that prevent bugs from getting into programs in the first place.</p>
  </div>
  <div><img src="CPE.png" alt="Common programming error icon">
    <p>Common Programming Errors point out the errors that students tend to make frequently. These Common Programming Errors reduce the likelihood that you'll make the same mistakes.</p>
  </div>
  <div><img src="SEO.png">
    <p>Software Engineering Observations highlight architectural and design issues that affect the construction of software systemms, especially large-scale systems.</p>
  </div>
</div>