CSS Flex: with all examples


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

Flex-wrap            flex:align-items

flex-justify-content             flex-row-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


Advertisements

About Nikhil Kumar

Senior Software Consultant at Knoldus Software LLP.
This entry was posted in CSS, Scala and tagged , , , , , . Bookmark the permalink.

One Response to CSS Flex: with all examples

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s