Confused with HTML elements positioning in CSS and by using other libraries or CSS snippets from stackoverflow? Don’t worry CSS flex is here. Flex means flexible box.
“The flex CSS property specifies how a flex item will grow or shrink so as to fit the space available in its flex container.”
So overall flex provides you the way to make your content flexible/responsive according to your view, you can position your elements upside down and anywhere on your page, whether it is the requirement to align your content in the center of the screen or anything else.
So flex has so many properties here we’ll talk about some major ones, with examples.
- Aligning the elements on the view
- Justifying your content on the view
- Wrapping the elements
- Flow of elements on row and column
Now we will look into the code for the 4th image example: In this, we are talking about flex-flow row & column properties, The flex-wrap property specifies whether the flex items should wrap or not if there is not enough room for them on one flex line.
The possible values are as follows:
nowrap – Default value. The flexible items will not wrap
wrap – The flexible items will wrap if necessary
wrap-reverse – The flexible items will wrap, if necessary, in reverse order
Code sample:
For all other examples and their sample code, check this repo. KFD
