Primer CSS Flexbox Required Reading

In this article, we will see the required reading. Primer CSS is a free open-source CSS framework based on principles that set the foundation for basic design elements like spacing, typeface, and color. This rigorous approach ensures that our patterns are consistent and interoperable.

Flexbox is a flexible box that is used to create a responsive website. In the required reading, we will discuss the flexbox types and various ways to create a flexbox.

Earlier, the flexbox was one-dimensional that can only deal with the layout in one dimension at a time either as a row or as a column but later in the latest version of CSS i.e CSS3 we can use a two-dimensional model which controls columns and rows together. 

The two axes of flexbox: In a two-dimensional flexbox need to think in terms of two axes, the main axis, and the cross axis. The main axis is defined by the flex-direction property, and the cross axis runs perpendicular to it and it is referring back to these axes.

The main axis:

• .flex-row: This is the main axis which means the elements are aligned in a row.
• .flex-row-reverse: This is the main axis which means the elements are aligned in a row in reverse order.
• .flex-column: This is the cross axis which means the elements are aligned in the column.
• .flex-column-reverse: This is the cross axis which means the elements are aligned in the column in reverse order.

👁 Image

The cross axis: The cross axis is that axis which runs perpendicular to the main axis. So the above diagram will look like this.

👁 Image

Start and end line:

Earlier, when we write any document then the writing will start from left to right but in the latest CSS3 model there is a range of writing modes and that is the reason why we no longer assume that a line of text will start at the top left of a document and run towards the right-hand side, with new lines appearing one under the other.

English Writing Format:

👁 Image

Arabic Writing Format:

👁 Image

The flex container: It is used to make an element layout it's content using the flexbox model. Each direct child of the flex container will become a flex item.

Output:

👁 Image

Changing flex-direction: It is used to set the direction of the flex items in the flexbox. 

Output:

👁 Image

Multi-line flex containers with flex-wrap: It is used to place flex items into a single line or wrapped onto multiple lines.

Output:

👁 Image

The flex-flow shorthand: This property is a sub-property of the flexible box layout module and also a shorthand property for flex-wrap and flex-direction.

Output:

👁 Image

Properties applied to flex items: We can use three properties to control flex items and the three properties are:

• flex-grow: It allows an item to fill up the available free space.
• flex-shrink: It allows an item to shrink if there is not enough free space available.
• flex-basis: It defines the size of an item before space is distributed.

Output:

👁 Image

Alignment, justification, and division of interstitial space:

• Align content: It is used to create multiple main axis lines and adds extra space on the cross-axis.
• Justify content: Justify Content classes are used to distribute space between and around flex items along the main axis of the container.

Output:

👁 Image

Reference: https://primer.style/product/css-utilities/#required-reading