Css Flexbox

by Venkatesh Dematti

HTML

<div class="container">
  <div class="row box1">1</div>
  <div class="row box2">2</div>
  <div class="row box3">3</div>
  <div class="row box4">4</div>
  <div class="row box5">5</div>
  <div class="row box6">6</div>
  <div class="row box7">7</div>
  <div class="row box8">8</div>
  <div class="row box9">9</div>
  <div class="row box10">10</div>
</div>

CSS

.container{
  height:100vh;
  display:flex;
  /* flex-direction:row | row-reverse | column-reverse | column; */
  flex-direction:row;
  /* flex-wrap:wrap | nowrap | wrap-reverse; */
  flex-wrap:wrap;
  /* justify-content:space-between | center | flex-start | flex-end | space-evenly  */;

  /* align-items: flex-end | flex-start | center | baseline | stretch; */
  align-items: flex-end;
   /* align-content:center | flex-end | flex-start | space-between | space-around | stretch; */
   align-content:center;
}
.row{
  height:50px;
  width:200px;
  border:1px solid slategray;
  text-align:center;
  margin:5px;
}
.box10{
  order:-1;
  flex-basis:250px;
  flex-grow:10;
  flex-shrink:1;
  /* align-self:auto | flex-start | flex-end | baseline | center; */
}