Web Designer’s Guide to CSS Flexbox for Modern Website Layouts

Floats

With floats, you have to manually calculate and specify the widths and margins of all your boxes. This can be a lot of work, and it's easy to make mistakes.

Floats are great for creating simple columnar layouts, but they can be a bit inflexible when it comes to more complex designs.

Floats requires you to use media queries to manipulate your layouts.

Floats require a "clear fix" in order to prevent unwanted layout surprises.

Floats are notoriously confusing for beginner web designers.

display

The display property controls how a container behaves when it's applied to the page. There are two flexbox-related values you need to know. Think of this as "switching on" Flexbox.

• flex: This is the default value, and it causes the flex container to become a flexbox. The items inside the container will be laid out according to the flexbox rules.
• inline-flex: This value causes the flex container to behave like an inline box. The items will be laid out one after the other, similar to how they would be laid out if they were all in a single line.

flex-direction

This property defines the direction in which your content will be displayed. You can use it to create horizontal or vertical layouts, or switch between the two depending on the context.

There are four flex-direction values to choose from:

• row: This value will create a row layout, with the content displayed from left to right.
• column: This value will create a column layout, with the content displayed from top to bottom.
• row-reverse: This value will create a row layout, but with the content displayed from right to left.
• column-reverse: This value will create a column layout, but with the content displayed from bottom to top.

flex-wrap

This property determines how your content will wrap when it doesn't fit in the defined layout. You can use it to either wrap your content or overflow it.

There are three flex-wrap values:

• nowrap: This value will prevent the content from wrapping, so it will overflow the container if it doesn't fit.
• wrap: This value will cause the content to wrap when it doesn't fit, creating a new row or column as needed.
• wrap-reverse: This value creates a layout where the content wraps in the opposite direction, from bottom to top instead of from top to bottom.

flex-flow

This is a shorthand property that combines the flex-direction and flex-wrap properties into a single value.

justify-content

The justify-content property sets the alignment of items within a flex container along its main axis.

• flex-start: this value aligns the items at the start of the container
• flex-end: this value aligns the items at the end of the flex container.
• center: This value aligns the items in the middle.
• space-between: this value sets the spacing between items in a flex container. You can use it to create equal spacing between all items, or to space items out evenly along the main axis.
• space-around: This value sets the spacing between items in a flex container to be equal on all sides, except the items at the beginning and the end of the container, which have a "half-sized space" from the edge.
• space-evenly: This value sets the spacing between items in a flex container to be equal on all sides.

align-items

The align-items property sets the alignment of items within a flex container along its cross axis. You can use it to center items, align them at the start or end, or stretch them out to fill out the container equally.

• stretch: this is the default value for the align-items property, and it stretches all of the items to fill the container equally (while respecting height and width constraints).
• flex-start: This value will align all of the items at the start of the cross axis.
• flex-end: This value will align all of the items at the end of the cross axis.
• center: This value will center
• baseline: This value will align all of the items at their contents' baselines. A baseline is the "line" on which a letter typically "sits" (i.e. think back to when you were learning to write the alphabet in your journal and your teacher would make sure your letters were sitting properly on that line...that's the baseline)

align-content

The align-content property sets the alignment of the flex container's content along its main axis. You can use it to center the content, align it at the start or end, provide equal space between content, or stretch it out to fill out the container equally.

• normal: This is the default value and the items are packed in a, well, pretty normal fashion as if nothing is happening.
• stretch: This value distributes the items evenly within the container.
• flex-start: This value will pack items at the start of the container.
• flex-end: This value will pack items at the end of the container.
• center: This value will pack items around the center of the container.
• space-between: This value will distribute items evenly with the first item being flush with the start of the container and the last item flush with the end.
• space-evenly: This value will distribute items evenly with the first and last items having "half-sized" spaced at the start and the end of the container.

gap

The gap property applies to both Flexbox and CSS Grid and controls the minimum amount of space between items.

flex

This is the shorthand property that combines flex-grow, flex-shrink, and flex-basis. The syntax is as follows:

flex: [flex-grow] | [flex-shrink] | [flex-basis];

The default values are:

flex: 0 1 auto;

In the longhand version, this reads as:

flex-grow: 0; /* items do not grow */

flex-shrink: 1; /* items can shrink smaller than their flex-basis */

flex-basis: auto; /* items will be sized based on their content and the available space */