Ads Top

What is justify-content?

How to use justify-content Property?

justify-content is the property of the flexbox. justify-content and align-items is a similar functionality both are the aligning property. justify-content align to flexible items in the horizontal OR x-axis.

The default value of the justify-content is the flex-start.

justify-content have following value:
justify-content:flex-start;
justify-content:center;
justify-content:flex-end;
justify-content:space-between;
justify-content:space-around;
justify-content:initial;
justify-content:inherit;

Here is the justify-content example:

<style>
.flexContainer {
  displayflex;
  border:1px solid #ccc;
  justify-contentflex-start;
  width600px;
}
.flexContainer .innerElement  {
  background#0bf;
  text-aligncenter;
  font-size20px;
  padding10px;
  margin5px;
  font-size:16px;
  color#fff;
  width50px;
}
</style>
<div class="flexContainer">
  <h1 class="innerElement">1 justify-content </h1>
  <div class="innerElement">2justify-content
    <div class="abc">justify-content Inner</div>
  </div>
  <span class="innerElement">3 justify-content</span>
  <strong class="innerElement">4 justify-content</strong>
</div>


justify-content: flex-start;

justify-content: center;

justify-content: flex-end;

justify-content: space-around;

justify-content: space-between;

No comments:

Copyright Reserved to Anything Learn. Powered by Blogger.