Flexbox grid support

[madisvain]

Currently Col component does not support flexbox as there is no way to define a without it having the column number.

http://v4-alpha.getbootstrap.com/layout/flexbox-grid/
Unlike the default grid system where a grid column starts as full-width in the xs tier, flexbox requires a .col-{breakpoint} class for each tier.

Flexbox would require to have the possibility of defining <div class="col-xs"> but currently the element will add col-xs-12 by default.

[eddywashere]

Thanks for filing the issue! I could imagine leveraging the size props, and adding a boolean option that would only output the col-${size} class. It would look like this:

<Row>
  <Col xs>col-xs</Col>
  <Col xs="6">col-xs-6</Col>
  <Col xs>col-xs</Col>
</Row>

Are the push/pull/offset classes supported in flexbox grid? If so, maybe flex is a prop or the size props accept flex or auto as a way to output the auto layout class.

<Row>
  <Col xs="flex">col-xs</Col>
  <Col xs="6">col-xs-6</Col>
  <Col xs={{offset: 1, size: 'flex'}}>col-xs</Col>
</Row>

<Row>
  <Col xs="auto">col-xs</Col>
  <Col xs="6">col-xs-6</Col>
  <Col xs={{offset: 1, size: 'auto'}}>col-xs</Col>
</Row>

[ronnyhaase]

• Add flexbox auto-layout ability to Col component (PR Add flex-support for Col component #169 #175)
• Add flexbox alignment & reordering support to Col & Row component (PR [WIP] Add support for reordering of Col component and alignment of Row component (#169) #204)
• Use a Bootstrap release with flexbox enabled for Docs (PR fix(docs): Update Bootstrap to alpha.5 and switch to flexbox enabled … #193)

[ronnyhaase]

Hey guys!

I'm almost done with the last task for full flexbox support: Support flex alignment classes of Bootstrap.

I'd like to ask you for feedback regarding naming and types for the necessary properties:

Context: http://v4-alpha.getbootstrap.com/layout/flexbox-grid/

My current implementation looks like:

<Col first="xs" first={['xs', 'sm']} first={{ xs: true, sm: true, /* ... */ }} first />

Where a boolean first could may resolve to ['xs', 'sm', 'md', 'lg', 'xl'] and/or accept "all"?

What do you think about it? And also, do you think the props should be prefixed, like order-first. Or is it better to just have one prop order which expects first, last and unordered as attributes?

<Col order={ first: ['xs'], last: ['xs', 'sm'], unordered: ['lg', 'xl'] } />

Or maybe both???

For <Row /> the same question arrises for horizontal & vertical alignment.

<Row top middle bottom left center right around between />

and/ or (?)

<Row alignVertical={{...}} alignHorizontal={{...}} />

or even (?)

<Row alignment={ vertical: { middle: ['xs', 'sm'] }, horizontal: ... } />

Looking forward to your feedback!

[ronnyhaase]

My personal preference right now would be single props accepting string or array of string, and bool / 'all' for all sizes.

[matias-casal]

@ronnyhaase first, thanks for all, i really appreciate it.
You finally decided how to do the vertical alignment?

[eddywashere]

@ronnyhaase thanks again for your patience and hard work on these components. Following up on our chat, here's the suggestion I mentioned for Col & Row.

<Col xs xsFirst xsLast xsUnordered></Col>

and

<Row xs xsLeft xsTop></Row>

It adds more props but I think it simplifies the usage.

[eddywashere]

bootstrap 4 has switched to flexbox. #267 updates Col component to support new classes. Also, as a result of the flexbox switch, there were new flexbox utility classes added to bootstrap. Instead of making these props available on the components that could potentially use it, I think the simple solution is to let users add those classes manually, ex: className="justify-content-between".

I'm going to close this out as I think the v4 alpha branch of reactstrap should satisfy the flexbox needs.