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.
The cross axis: The cross axis is that axis which runs perpendicular to the main axis. So the above diagram will look like this.
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:
Arabic Writing Format:
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.
Please Login to comment...