CSS flexbox
The Flexible Box Module, often known as flexbox, was created as a one-dimensional layout model and a way for providing space distribution and powerful alignment capabilities between elements in an interface. This post provides an overview of the core features of flexbox, which we will go over in further depth in the next tutorials.
When we say flexbox is one dimensional, we're referring to the fact that it only works with one dimension at a time — either a row or a column. This is in contrast to the two-dimensional CSS grid layout concept, which controls both columns and rows.
Flexbox makes no assumptions about the document's writing mode, which is another crucial point to grasp. CSS used to favor horizontal and left-to-right writing modes considerably. We no longer expect that a line of text will start at the top left of a page and flow to the right, with additional lines appearing one under the other, because modern layout approaches embrace a wide range of writing styles.
A flex container is a section of a document that is put out using flexbox. The display property of the area's container is set to flex or inline-flex to create a flex container. The container's immediate offspring become flex items as soon as we do this.