flexcontainer


    Item 1
    Item 2
    Item 3


.flexcontainer{
  //display:flex;
}

.flexitem{
  width: 100%;
  height: 100px;
  text-align: center;
}
  .item1{
    background: #faa6a6;;
  }
   
  .item2{
    background: #8bbaff;
  }
   
  .item3{
    background: #f3ffbe;
  }

===== displayの指定なし ===== {{:css:pasted:20200921-164439.png}} ===== display:flex(flex-direction:row) =====


.flexcontainer{
  display:flex;
  flex-direction:row; // デフォルトrow
}
...

{{:css:pasted:20200921-164514.png}} ===== display:flex(flex-direction:column) =====


.flexcontainer{
  display:flex;
  flex-direction:column;
}

{{:css:pasted:20200921-165040.png}} ===== flex-wrap:wrap =====


.flexcontainer{
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
}

.flexitem{
  width: 200px;
  height: 100px;
  text-al
}
{{:css:pasted:20200921-165711.png}}