Ads Top

What is flex-wrap

How to use flex-wrap property?
Flex-wrap is the property of the flexbox. Flex-wrap means flex items when going to another device then he doesn't find space then it will be move in the other row. if we use Flex-wrap:nowrap; then our flex item box will not be flexible and all not go to the other row. when we use Flex-wrap:wrap-reverse; then it's going to in the reverse order. as given below screenshot.

The default value of the flex-wrap is the nowrap.
Flex-wrap have following value:
Flex-wrap:nowrap;
Flex-wrap:wrap;
Flex-wrap:wrap-reverse;
Flex-wrap:initial;
Flex-wrap:inherit;

Here is the flex-wrap example:
.flexContainer {
  displayflex;
  Flex-wrap:wrap;
  border1px solid #ccc;
  width400px;
}
.flexContainer .innerElement  {
  background#0bf;
  text-aligncenter;
  font-size30px;
  padding20px;
  margin5px;
  font-size:16px;
  color#fff;
}
<div class="flexContainer">
  <h1 class="innerElement"><strong>1</strong> flex-wrap </h1>
  <div class="innerElement"><strong>2</strong>2 flex-wrap
    <div class="abc">flex-wrap inner Content</div>
  </div>
  <span class="innerElement"><strong>3</strong>3 flex-wrap content</span>
  <strong class="innerElement"><strong>4</strong>4 flex-wrap content</strong>
</div>
flex-wrap: wrap;
flex-wrap: nowrap;
flex-wrap: wrap-reverse;

Note: Flex-flow have shorthand property for both flex-direction and flex-wrap as given below example:

.flexContainer {
  displayflex;
  /*Flex-wrap:wrap;*/
  flex-flowrow wrap;
  border1px solid #ccc;
  width400px;
}


No comments:

Copyright Reserved to Anything Learn. Powered by Blogger.