Ads Top

What is align-content?

How to use align-content property?
align-content is the property of the flexbox. align-content property align with the main container it's work with content boxes. align-content will not work without flexible item it's mandatory.

The default value of the align-content is the stretch.

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

Here is the align-content demo:

<style>
.flexContainer {
  displayflex;
  align-contentstretch;
  height200px;
  border1px solid #ccc;
  width500px;
}
.flexContainer .innerElement {
  background#0bf;
  text-aligncenter;
  font-size30px;
  font-weight700;
  padding20px;
  margin5px;
  font-size:16px;
  color#fff;
}
</style>

<div class="flexContainer">
  <h1 class="innerElement">1  </h1>
  <div class="innerElement">2
    <div class="abc">2 inner</div>
  </div>
  <span class="innerElement">3</span>
  <strong class="innerElement">4</strong>
</div>

align-content: stretch;

align-content: flex-start;

align-content: center;

align-content: flex-end;

align-content: space-between;

align-content: space-around;

No comments:

Copyright Reserved to Anything Learn. Powered by Blogger.