CSS Flexbox? ?? ? ?? ?? ????? ?????

? ????? CSS Flexbox? ???? ?? ??? 2 : 5 : 3 ? ????? ??? ?? ????? ???? ???? ??? ?? ?????. ? ????? ? ????? ?? ????? ??? ??? ??? ??? ???? ?? ? ? ????.

?? ??? CSS? Flexbox Elastic Box ?????. display: flex ?? ? ?? ??? flex ?? ??? ???? ?? ??? ?? ??? ?? ?? ? ? ????.

??, ?? ???? ???? Flex ???????? ??????.

 .Container {
  ????? : Flex;
  ??? ?? : ?; /* ?? ??? ?? ??*/
  ?? : 100VH; /* ??? ?? ??*/
  ?? ?? : ????; /* ?? ??? ?? ???? ??? ?????*/
}

flex-direction: column; ??? ??? ???? ???? ??? ??????. height: 100vh; align-items: stretch; ??? ??? ?? ????? ??? ? ??????.

?? ?? ?? ??? flex ??? ???? ?? ???? ??????.

 .box1 {flex : 2; }
.box2 {flex : 5; }
.box3 {flex : 3; }

flex: 2; , flex: 5; , flex: 3; ?? ? ?? ??? ?? ??? 2 : 5 : 3?? ?????. Flexbox?? ??? ?? ?? ??? ??? ???? ?????.

??? ??? HTML ????.

 


  <title>Flexbox ?? ??</title>
  <style>
    .container {
      display: flex;
      flex-direction: column;
      height: 100vh;
      align-items: stretch;
    }
    .box1 { flex: 2; background-color: lightpink; }
    .box2 { flex: 5; background-color: lightblue; }
    .box3 { flex: 3; background-color: lightgreen; }
  </style>


  <div class="container">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </div>

? ??? ?? ???? ?? ??? ???? ? ?? ?? ??? ?? ??? ?? 2 : 5 : 3?? ????? ??? ?? ? ????? ?????.

? ??? 2 : 5 : 3 ???? ??? ?? ?? ????? ???? CSS Flexbox? ???? ?? ???? ???? ??? ??????? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!