Flexbox CSS justify-content:space-*

Flexbox CSS justify-content:space-*

Flexbox layout and its properties are a set of properties which helps to align flex-items in a container. As we have discussed in detail in  our previous articles
i) flexbox is a set of properties
ii) it helps to align grid elements in a container in may ways
iii) it also helps to realign the way it is arranged in a mobile or responsive screen  without writing too much of code.

Justify-content

Justify-content is the property provided by flexbox concept which works like text-align property.
Justify -around takes up the following values
justify-content: center | flex-start | flex-end | space-around | space-between | space-evenly





justify-content: space-*

justify-content: space-* helps us to align flex-items horizontally between the flex-container. In other words, it deals with the horizontal alignment within the container

justify-content: space-around

space-around helps us to align items in such a way that items have equal space around them.
The space between the items and the flex-container will be 1x, whereas space-between any two flex-items will be 2x.
Example
CSS3 Flexbox
Example with number of flex-items changed
CSS3 Flexbox

justify-content: space-evenly

space-evenly helps us to align items in such a way that items have even space between them. The flex-items will have 1x space between any two flex-items and the flex-items and flex-container edges.
CSS3 Flexbox
Another example showing justify-content:space-evenly
CSS3 Flexbox
Do you know
Recently, space-evenly has been made support and compatible with all modern browsers.

justify-content:space-between

space-between aligns the flex-items within the flex-container in such a way that space is allotted in between flex-items and not between the edges of the flex-container and the flex-items in the edges. The items in the edges move towards the edges in the left and right side respectively making space in between the flex items.
Example for justify-content:space-between
CSS3 Flexbox

Flex box also provides way to order the flex-items by giving a numeric value thereby aligning elements in responsive using flexbox very easy.
________________

Feel free to ask your doubts and share your feedback

Follow our FB page @CreativeTechnocrayts
Subscribe to Creative Technocrayts and be a part of growing community.

Comments

Post a Comment

Popular posts from this blog

How to initialize Datatable plugin?

Image
How to initialize Datatable plugin? Datatables.net is a sophisticated plug in built on Jquery, JavaScript library which provides more functionality to normal HTML tables. The plug in offers search, pagination and sorting functionalities. The assets file can be downloaded From the website, CDN From website: https://datatables.net/download/index CDN Links: https://cdn.datatables.net/ Basic Implementation of Datatable Write the basic markup of the table with data Add a class name to the table Include all the assets As Datatables.net is built on Jquery, make sure that Jquery is downloaded before data tables Sites Followers Rank Country SitePoint 11456 5 Canada Learnable 123449 3 USA Flippa 143567 1 Brazil $(function(){ $("#example").dataTable(); }) You may continue th...
Read more >>

Datatables.net - Plugin options

Image
Datatables jquery plugin options In PART i of this series we have discussed the basics of datatables.net plugin Datatables.net has a wide set of options which gives extensive interface support and browser compatibility. The following article clearly explains how to utilize the options provided by the plugin. The datatables.net CDN links for style sheet reference https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css https://cdn.datatables.net/responsive/2.2.1/css/responsive.dataTables.min.css The datatables.net CDN links for script reference https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js https://cdn.datatables.net/responsive/2.2.1/css/responsive.dataTables.min.css To disable all options $("#example").dataTable({ paging: false, searching: false, info: false }); To display “Show entries” at the bottom of the data table $('.promo-pricing-table').dataTable({ "dom": 'frtlip' }); }) To display “Show entries” at the ...
Read more >>

What are some mistakes people make when they start learning HTML, CSS and JavaScript?

Image
Using id instead of class names Many beginners are tending to write CSS using id names instead of CSS class names. We should always aim to reuse the code as much as possible. By using id names we are applying styles only to that particular div rather than sharing the styles which are common to div s having the same class name. Do read this article which gives a practical approach to maintainable CSS . Not using CSS shorthand Using CSS shorthand will come as a second nature by practice. Until then we need to force ourselves to write CSS in the right way. While working on a large project, we will notice that by using shorthand properties the number of code lines in CSS file will be reduced reasonably. CSS Measurements 0px is just a 0. There is no need to mention if it is a px or em. Following a standard measurement throughout the project is important. Be it px or rem, it should be followed by all for the project. Using relative values are encouraged more than absolu...
Read more >>