Dariusz Rup
Dariusz Rup

Reputation: 59

Flexbox Accordion style

I wanted to redesign this Flexbox Accordion: https://codepen.io/arjancodes/pen/gbweYB

  .section-content {
    flex: 1;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    opacity: 0;
    transition: all .25s .1s ease-out;
  }
}

It was displayed vertically, not horizontally as it is now. How can this be done?

Upvotes: 0

Views: 403

Answers (2)

Gowtham V
Gowtham V

Reputation: 79

add flex-direction:column in css

.section-content {
    flex: 1;
    display: flex;
    align-items: center;
    flex-direction:column;
    margin: 0;
    padding: 0;
    opacity: 0;
    transition: all .25s .1s ease-out;
}

Upvotes: 2

Gowtham V
Gowtham V

Reputation: 79

use flex-direction:column to the blue box and remove transform: rotate(-90deg); in klasa 5 and klasa 6

Upvotes: 0

Related Questions