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:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>FlexBox: Row and Column</title> | |
| <style> | |
| /*flex containers*/ | |
| .fx-flow-row { | |
| display: flex; | |
| flex-direction: row; | |
| height:150px; | |
| background-color:grey; | |
| } | |
| .fx-flow-row-reverse { | |
| display: flex; | |
| flex-direction: row-reverse; | |
| height:150px; | |
| background-color:grey; | |
| } | |
| .fx-flow-column { | |
| display: flex; | |
| flex-direction: column; | |
| height:150px; | |
| background-color:grey; | |
| } | |
| .fx-flow-column-reverse { | |
| display: flex; | |
| flex-direction: column-reverse; | |
| height:150px; | |
| background-color:grey; | |
| } | |
| .child{ | |
| width: 50px; | |
| margin:10px; | |
| background-color: orange; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!– | |
| row-reverse – If the writing-mode (direction) is left to right, the flex items will be laid out right to left | |
| column – If the writing system is horizontal, the flex items will be laid out vertically | |
| column-reverse – Same as column, but reversed | |
| –> | |
| <h4>Coming in a row</h4> | |
| <div class="fx-flow-row"> | |
| <div class="child">A</div> | |
| <div class="child">B</div> | |
| <div class="child">C</div> | |
| </div> | |
| <h4>Coming in a row reverse</h4> | |
| <div class="fx-flow-row-reverse"> | |
| <div class="child">A</div> | |
| <div class="child">B</div> | |
| <div class="child">C</div> | |
| </div> | |
| <h4>Coming in a coloumn</h4> | |
| <div class="fx-flow-column"> | |
| <div class="child">A</div> | |
| <div class="child">B</div> | |
| <div class="child">C</div> | |
| </div> | |
| <h4>Coming in a column reverse</h4> | |
| <div class="fx-flow-column-reverse"> | |
| <div class="child">A</div> | |
| <div class="child">B</div> | |
| <div class="child">C</div> | |
| </div> | |
| </body> | |
| </html> |
For all other examples and their sample code, check this repo. KFD
Nice Blog…..
Reblogged this on Coding, Unix & Other Hackeresque Things.