flexboots demo

*all examples below include extra outlines and padding for display purposes

*tip: resize the browser window to see how flexboxes behave at different widths

flexbox with two plain flexitems:

.flexbox
.flexitem
.flexitem

flexitems with standard widths

Full-width

.flexbox
.flexitem.full

Halfs

.flexbox
.flexitem.half
.flexitem.half

Thirds

.flexbox
.flexitem.one-third
.flexitem.one-third
.flexitem.one-third
.flexbox
.flexitem.one-third
.flexitem.two-thirds

Quarters

.flexbox
.flexitem.one-quarter
.flexitem.three-quarters

Golden Ratios

.flexbox
.flexitem.golden-lg
.flexitem.golden-sm

flexitems with custom widths

.flexbox
.flexitem style="width:400px;"
.flexbox
.flexitem style="width:400px;"
.flexitem.one-quarter

Adding more than 100% will wrap to a new line

.flexbox
.flexitem.half
.flexitem.one-quarter
.flexitem.two-thirds

flexitems with 
.fill
expand to fill up remaining space in a line

.flexbox
.flexitem
.flexitem.fill
.flexbox
.flexitem.half.fill
.flexitem.one-quarter
.flexitem.two-thirds

Different ways to align flexitems

.flexbox
[default]

.flexbox
.flexitem
.flexitem
.flexitem

.flexbox-tight-center

.flexbox.flexbox-tight-center
.flexitem
.flexitem
.flexitem

.flexbox-wide-center

.flexbox.flexbox-wide-center
.flexitem
.flexitem
.flexitem

.flexbox-align-left

.flexbox.flexbox-align-left
.flexitem
.flexitem
.flexitem

.flexbox-align-right

.flexbox.flexbox-align-right
.flexitem
.flexitem
.flexitem

flexboxes can be further customized through styling

.flexbox style="width: 50%; float: right;"
.flexitem