Flexbox Properties

Flexbox is a layout module in CSS that makes it easier to create flexible, responsive layouts and alignments. It allows you to lay out elements in a one-dimensional row or column and automatically adjusts the size and position of elements to fit within the container. Here are some of the main properties associated with flexbox:

flex-flow

This shorthand property for flex-direction and flex-wrap allows you to set both values in a single line.

justify-content

This property aligns the flex items along the main axis (horizontally for row flex direction and vertically for column flex direction). The possible values are flex-start, flex-end, center, space-between, and space-around. The default value is flex-start.

It can have one of the following values:

• flex-start;
• flex-end;
• center. Elements are centered along the main axis;
• space-between. Elements are evenly distributed along the main axis, with equal space between them;
• space-around. Elements are evenly distributed along the main axis, with equal space before, between, and after them;
• align-items. This property aligns elements along the cross-axis. It can have one of the following values:

align-items

property is used to align the items along the flex container's cross axis. The cross axis is the axis that runs perpendicular to the main axis (the axis defined by the flex-direction property).

For example, if the flex-direction property is set to row, the main axis is horizontal, and the cross axis is vertical. In this case, align-items can align the items vertically within the flex container.

Here's an example of using align-items to center the items vertically within a flex container:

• flex-start. This value aligns the items to the start of the cross-axis;
• flex-end. This value aligns the items to the end of the cross-axis;
• baseline. This value aligns the items to the baseline of the text within them;
• stretch. This value stretches the items to fill the full length of the cross-axis. This is the default value.