Ads Top

What is align-items?

How to use align-items property?
align-items is the property of the flexbox. align-items vertically align with flex items. align-items will not work without flexible item it's mandatory.

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

align-items have following value:
align-items:stretch;
align-items:flex-start;
align-items:center;
align-items:flex-end;
align-items:baseline;
align-items:initial;
align-items:inherit;

Here is the align-items demo:

 <style>
.flexContainer {
  displayflex;
  align-itemsstretch;
  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-items: stretch;

align-items: flex-start;

align-items: center;

align-items: flex-end;

align-items: baseline;

No comments:

Copyright Reserved to Anything Learn. Powered by Blogger.