Flexbox:

flex-basis, flex, align-items, align-self

The flex-basis property gives you even more control over the size of flex items.

flex and flex-basis apply to flex items only.

flex-basis specifies the initial main size of a flex item.

You set the initial size you want the flex items to be, then flexbox evenly distributes the free space according that size.

container {display: flex; flex-wrap: wrap}
item {flex-grow: 1; flex-basis: 200px}

Item 1

Mustache cred 3 wolf moon shabby chic, flannel vegan Godard selfies aesthetic taxidermy post-ironic forage deep v tousled.

Item 2

Vegan meggings hashtag, before they sold out Pitchfork next level vinyl. Fanny pack direct trade High Life.

Bicycle rights mumblecore irony disrupt.

Item 3

Banksy squid distillery Portland whatever, lo-fi Wes Anderson.

Item 4

Sriracha raw denim fixie.

The flex shorthand property intelligently sets flexbox values when you don't specify them.

flex is the shorthand for flex-grow, flex-basis and flex-shrink. Using only one number value for flex sets the flex-grow value of an item.

The second and third values are optional in the flex shorthand.

Setting only one number value for flex automatically sets the flex-basis value to 0.

Shorthand example: flex: 1 200px

container {display: flex; flex-wrap: wrap; }
item {flex-grow: 1; flex-basis: 200px; align-items: stretch;}

Item 1

Mustache cred 3 wolf moon shabby chic, flannel vegan Godard selfies aesthetic taxidermy post-ironic forage deep v tousled.

Item 2

Vegan meggings hashtag, before they sold out Pitchfork next level vinyl. Fanny pack direct trade High Life.

Bicycle rights mumblecore irony disrupt.

Item 3

Banksy squid distillery Portland whatever, lo-fi Wes Anderson.

Item 4

Sriracha raw denim fixie.

Align flex items on the cross axis with the align-items and align-self properties

The align-items property applies to flex containers only.

align-items aligns flex items vertically in the flex container.

To align all flex items to the start of the cross axis, use the align-items: flex-start;.

container {display: flex; flex-wrap: wrap; align-items: flex-start;}
item {flex-grow: 1; flex-basis: 200px}

Item 1

Mustache cred 3 wolf moon shabby chic, flannel vegan Godard selfies aesthetic taxidermy post-ironic forage deep v tousled.

Item 2

Vegan meggings hashtag, before they sold out Pitchfork next level vinyl. Fanny pack direct trade High Life.

Bicycle rights mumblecore irony disrupt.

Item 3

Banksy squid distillery Portland whatever, lo-fi Wes Anderson.

Item 4

Sriracha raw denim fixie.

align-items: flex-end; packs the items toward the end of the cross axis.

container {display: flex; flex-wrap: wrap; align-items: flex-end; align-items: flex-end;}
item {flex-grow: 1; flex-basis: 200px}

Item 1

Mustache cred 3 wolf moon shabby chic, flannel vegan Godard selfies aesthetic taxidermy post-ironic forage deep v tousled.

Item 2

Vegan meggings hashtag, before they sold out Pitchfork next level vinyl. Fanny pack direct trade High Life.

Bicycle rights mumblecore irony disrupt.

Item 3

Banksy squid distillery Portland whatever, lo-fi Wes Anderson.

Item 4

Sriracha raw denim fixie.

align-items: center; perfectly centers items along the cross axis.

container {display: flex; flex-wrap: wrap; align-items: center;}
item {flex-grow: 1; flex-basis: 200px}

Item 1

Mustache cred 3 wolf moon shabby chic, flannel vegan Godard selfies aesthetic taxidermy post-ironic forage deep v tousled.

Item 2

Vegan meggings hashtag, before they sold out Pitchfork next level vinyl. Fanny pack direct trade High Life.

Bicycle rights mumblecore irony disrupt.

Item 3

Banksy squid distillery Portland whatever, lo-fi Wes Anderson.

Item 4

Sriracha raw denim fixie.

The align-self property applies to flex items only.

align-self: flex-start; aligns a flex item to the start of the cross axis.

align-self: flex-end; aligns a flex item to the end of the cross axis.

align-self: center; aligns a flex item to the center of the cross axis.

container {display: flex; flex-wrap: wrap}
item {flex-grow: 1; flex-basis: 200px; align-self: flex-start/flex-end/center;}

Item 1

Mustache cred 3 wolf moon shabby chic, flannel vegan Godard selfies aesthetic taxidermy post-ironic forage deep v tousled.

Item 2

Vegan meggings hashtag, before they sold out Pitchfork next level vinyl. Fanny pack direct trade High Life.

Bicycle rights mumblecore irony disrupt.

Item 3

Banksy squid distillery Portland whatever, lo-fi Wes Anderson.

Item 4

Sriracha raw denim fixie.