Content positioning

We can all agree that row and grow are already enough to make FlexView your new enhanced div, but why stopping there?

Flashback time!

Your designer:

"This content should be centered horizontally and vertically”

You:

"Oh come on! Where do you think to live? in 2016?"

This is how you used to center a div inside another div:

// horizontally (life is beautiful)
<div>
  <div style={{ margin: '0 auto' }}/>
</div>
// horizontally (damn! Venus, Mars and the Moon are aligned...again!)
<div style={{ position: 'relative' }}>
  <div style={{ position: 'absolute', width: 100, left: '50%', margin-left: -50 }}/>
</div>


// vertically
<div style={{ display: 'table-cell', vertical-align: 'middle' }}> // WTF?!
  <div style={{ display: 'inline-block' }}/> // Ok, I quit..
</div>

Fast-forward!

Here we are, this is 2016: time to make that dream come true!

With flex we can finally align content wherever we want. But even if we can, that doesn’t mean it’s easy!

Let me introduce you the horrible (and really counterintuitive) API to align content in a flex element with pure CSS:

Any alignment can be achieved by using the combination of two (absurdly named) properties: align-items and justify-content. Which of them aligns horizontally and which vertically? The truth is: it depends on the direction of the element! (wait, what?)

NB: justify-content works for main-axis while align-items for the cross-axis

If that’s not enough, this causes another problem: as they may work for both horizontal and vertical alignment how could we use the natural values top, bottom, left and right without confusion?

The answer is: you can’t use them at all! Instead they have been translated to flex-start, center and flex-end so to make them unisex...

We (everyone) found this API to be confusing and unnecessary complex. So we thought: if the source of all evil is the direction, and we know it for sure (FlexView knows if it’s a row or a column), can we make a more natural API?

Luckily, yes!

With FlexView we can finally align content in an intuitive, easy and reliable way: no more astronomical shit alignments, no more align-items and justify-content non-sense.

// horizontal
<FlexView hAlignContent='left'>
  <div />
</FlexView>
<FlexView hAlignContent='center'>
  <div />
</FlexView>
<FlexView hAlignContent='right'>
  <div />
</FlexView>
// vertical
<FlexView vAlignContent='top'>
  <div />
</FlexView>
<FlexView vAlignContent='center'>
  <div />
</FlexView>
<FlexView vAlignContent='bottom'>
  <div />
</FlexView>
// both
<FlexView hAlignContent='right' vAlignContent='center'>
  <div />
</FlexView>

NB: you can use vAlignContent and hAlignContent to position your content exactly where you want!

As you probably deduced by the examples, both props accept an enum of strings:

  • vAlignContent["top", "center", "bottom"]
  • hAlignContent["left", "center", "right"]

Better, right?

results matching ""

    No results matching ""