CODEWITHSUNDEEP
htmlcssflexbox
terratermatwoa
terratermatwoa

Reputation: 99

Flex affects inner inline elements

I would like a simple two column flex layout. I don't really understand why it changes all my spans act like divs. How do I leave the inner elements of the column unaffected?

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}

.column {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
}
<div class="row">
  <div class="column">
    <span>Text 1</span>
    <span>Text 2</span>
    <span>Text 3</span>
  </div>
  <div class="column">
    <span>Text 1</span>
    <span>Text 2</span>
    <span>Text 3</span>
  </div>
</div>

https://jsfiddle.net/23of4Lt5/

Upvotes: 1

Views: 703

Answers (1)

Robert Feduș
Robert Feduș

Reputation: 311

This happens due to "flex-direction: column". Remove that and everything should be fine. What it's doing, is that by setting the column divs to "display: flex" and direction as column, the spans are considered as flex items, but on the vertical axis.

Upvotes: 2

Related Questions