FlexBox

Flex box

.box {
   display: flex;
}

<div class="box">
	<div>One</div>
	<div>Two</div>
	<div>Three
		<br>has
		<br>extra
		<br>text
	</div>
</div>

The box class defines the flex container, the direct children become the flex items. Relevant properties of the flex container and their default value:

flex-diretion: row

The main axis is on the row. Use column for the main axis on the column.

flex-wrap: nowrap

The items will not wrap along the main axis, they will overflow. Use flex-wrap: wrap to allow multiple lines along the cross axis.

flex-flow: row wrap

The above is the shorthand for flex-direction and flex-wrap.

justify-content: flex-start

Items align along the main axis from the flex start. Alternatives: center, flex-end.

align-items: stretch

Items stretch along the cross axis to fill the full size of the tallest item. Alternatives: center, flex-end, space-around, space-between, space-evenly.

Flex items

Flex item properties and their default values:

 flex-grow 0
 flex-shrink: 1
 flex-basis: auto

Items will not grow over their flex-basis size, they may shrink below their flex-basis size. Items use their specified size or their content size.

 flex: <grow> <shrink> <basis>