Ads Top

How to use flexbox in CSS?

Flexbox is a new layout module in css3 and before css3 we did create table layout, block Layout, inline layout, and positioned layout in CSS. But nowadays we create a flexible layout with direction, spacing, size, alignment, and order.
Flexbox means the main container where available more boxes, flexbox need to set the property of the "display: flex" then you will find all direct child element now flexible as below example:
.flexContainer {
  displayflex;
  border:1px solid #ccc;
  height200px;
}
.flexContainer .innerElement  {
  background#0bf;
  text-aligncenter;
  font-size30px;
  padding20px;
  margin5px;
  font-size:16px;
  color#fff;
}
<div class="flexContainer">
  <h1 class="innerElement">flexbox Direct content </h1>
  <div class="innerElement">flexbox Direct content
    <div class="abc">flex example  inner Content</div>
  </div>
  <span class="innerElement">flexbox Direct content flexbox Direct content</span>
  <strong class="innerElement">flexbox Direct content</strong>
</div>

You are seeing that inside of the flexContainer has available more inline element but now at this time, this is flexbox items because this is a direct element. And class abc is not a direct element of the flexContainer so this is only content.

Flexbox have following properties: flex-directionflex-wrapjustify-contentalign-itemsalign-content, align-self, flex-grow, flex-shrink, flex-basis, order etc.

No comments:

Copyright Reserved to Anything Learn. Powered by Blogger.