CODEWITHSUNDEEP
cssreactjs
Fernando Maymone
Fernando Maymone

Reputation: 755

flexDirection not working

I tried everything I can. But it doesnt work. I want to use flexbox to make my elements inline, with this code: 

<div style={{
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'center',
  }}>
    <div style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
    <div style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
    <div style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
  </div>

Everything I do, it only renders by columns. Someone can save my life?

enter image description here

Upvotes: 0

Views: 242

Answers (2)

Tomasz Mularczyk
Tomasz Mularczyk

Reputation: 36219

You should use row instead of column if you want them inline:

<div 
  style={{
    display: 'flex',
    flexFlow: "row nowrap",
    justifyContent: 'center',
  }}
>
    <div style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
    <div style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
    <div style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
</div>

flex is a property for children elements.

Upvotes: 4

jmargolisvt
jmargolisvt

Reputation: 6088

You need flexDirection: row to lay it out horizontally.

Upvotes: 1

Related Questions