CSS3’s Justify-Content Property

CSS3’s justify-content property is a really useful way to make space around the items within an element that has been defined as a flexible container.  Basically, it tells the elements within the flex container how much space should appear between them and the flexbox/the other items within the container. The default value is flex-start, which tells the elements to start at the beginning of the container.

Here are the other values that justify-content takes:

Join us in our newest publication:
  • flex-end: to position elements at the end of the container
  • center: to position elements in the center of the container
  • space-between: to position elements with space between the borders
  • space-around: to position elements with space all around (before, after, and between) the borders

If you plan on using flexbox as a CSS tool (which is highly recommended – it’s very dynamic in creating responsive layouts and grids), it’s definitely important that you also understand how to use it properly. Check out the code below to see it in action:

  1. .main-div{
  2. width: 400px;
  3. height: 150px;
  4. border: 1px solid #000;
  5. display: flex;
  6. justify-content: space-around;
  7. }
  8. .element{
  9. width: 60px;
  10. height: 30px;
  11. border: 1px solid #0096aa;
  12. }

Screen Shot 2016-09-10 at 12.15.40 AM

As you can see, justify-content: space-around adds space all around the two elements within the flexbox div to add a sense of positioning to the elements.



Share and Enjoy !

0 0