如何让我的 flexbox 垂直扩展？

Question

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

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

.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;
}

我只需要帮助弄清楚如何让方框在鼠标悬停时垂直展开而不是水平展开。上面没有列出全部代码，只是一小段。

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>

如何让我的 flexbox 垂直扩展？

How do I get my flexbox to expand vertically?

html

css

transition

flexbox