Как заставить мой flexbox вертикально расширяться? - PullRequest
Новая
       7

Как заставить мой flexbox вертикально расширяться?

0 голосов
/ 23 октября 2019

Мне дали код, который использует модуль макета flexbox. Свойство box-orient установлено на горизонтальный, и меня просят изменить код, чтобы он использовал вертикальный flexbox и расширялся по вертикали при наведении курсора на поле.

Я изменил -webkit-box-orient to вертикальный и box-orient to вертикальный. (исходный код был горизонтальным). Я также изменил поле на 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;
}

Мне просто нужна помощь, чтобы понять, как получитьЯщики расширяются вертикально, а не горизонтально при наведении. Весь код не указан выше, только фрагмент.

1 Ответ

0 голосов
/ 23 октября 2019

Может быть, что-то вроде этого, анимируя p с помощью max-width

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