0

I think it's faster to describe my question in images.

What I made and what I expect

  • I have some flex rectangle cards and a flex container.
  • I applied rotate(90deg) to one of the cards, the cards are 1:2 so I was expecting the other cards would be pushed left and right, which did not happen
  • I applied align-items: flex-end; to the flex container, because I wanted the card to "touch the ground" after rotating, which did not happen either

What should I do to make that 2 effects ;(

   <div class="container">
      <div class="item">
        <div id="card"></div>
      </div>
      <div class="item">
        <div id="card"></div>
      </div>
      <div class="item spin">
        <div id="card"></div>
      </div>
      <div class="item">
        <div id="card"></div>
      </div>
    </div>

#card {
  border: 8px black solid;
  aspect-ratio: 1/2;
  background-color: red;
}

.container {
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  width: 100%;
  gap: 5px;
}

.item {
  flex-grow: 1;
  max-width: 100px;
}

.spin {
  transform: rotate(90deg);
}

Codebox: https://codesandbox.io/s/clever-pine-0ucjo3

osennyaya
  • 25
  • 5
Direktor
  • 491
  • 2
  • 8
  • Please add you code to the question body as text / stack snippet and not in an external site. – ATP Oct 02 '22 at 16:12
  • Does this answer your question? [Rotated elements in CSS that affect their parent's height correctly](https://stackoverflow.com/questions/16301625/rotated-elements-in-css-that-affect-their-parents-height-correctly) – ATP Oct 02 '22 at 16:15
  • adding margin is not what you needed, `.spin { transform: rotate(90deg); margin: 0 30px; }` – Exception Oct 02 '22 at 16:17
  • When you are putting your code into your question perhaps you could take the opportunity to put it through a validator. It has many elements with the same id which is not valid HTML. – A Haworth Oct 02 '22 at 16:28

0 Answers0