, ? ? ? ???? ??? ???? ????. Flexbox? ??? ??? ?? ??? ? ?? ??? ?? ? ? ??? ?? ??? ????? ????. ?? ???? ??? ? ??? ??? ?????. ? ?? ??? ??? ??? ?????. ??? ? ? ?? ??? ????? ???? ?? ??? ??? ????? ??? ??? ???????. Flexbox? ???????.

flexbox

??? ???? ??? ???????. ????? ?? ??? "?? ??"?? ????. ? ??? ????? ? ?? ??? ??? ????. ?? ??, ???? ??? ????, ??? ????? ??? ??? ??? ???? ?????.
• ??? ? ? ???? ?? ??? ????
? ??? ?????. ?? ??? ?? ???? ????? ?? ????,? ? ?? ??? ???? ??? ?????.

• <div class="example">
    <header>header content here</header>
    <main class="main">
      <nav>nav content here</nav>
      <div class="content">main content here</div>
      <aside>aside content here</aside>
    </main>
    <footer>footer content here</footer>
  </div>

  <<> ?? ?? : Flexbox ?? order Flexbox? ? ?? ??? ?? ??? ?? ??? ? ??? ????. ?????? ?? ?? ????? ????? ???? ?? ??

  ? ????? ????.

  ????? HTML ?? ??? ?? ??? ???????. Flexbox? ???? CSS? ?? ????? ??? ?? ? ? ????. ??? .content 's <nav> ??? ??-1? ???? ??? ?? ?? ????.

  <,>? ?? ?? ?? ?? .content ?? ?? ??? ?? ? ??? ????. order CSS ???? ???? Flexbox? ??? <<> HTML ?? ?? ??? ??? ?? ???? ????. ???

  ? ???? ? ?? ??, ???? ?????. ??, Flexbox? ?? ????? (? ?? ???? ?? ??? ???? ?? ????). ?? ? ?? ??? ? ??????? ? ??

  .main {
    display: flex;
  }

  ??? ???????. ? ???? ??? ????? ???? ??? ??? ?? ? ????. ,

  ? order? ???? ?? ?? ??? ?? ?? ????? ??????

  ? ??? ?? ? ? ????. ??

  ? ?? -1??? ?? ???? ?????. ??? ?????. ??? ?? ?? ? ?? ? ??? ????? ??? ?????? ?? (

  ? ??????)? ??? ? ????. > ??? ??? ???? ??? ????. ?? ???? ???? ???? Flexbox ?? ? ???? ?? ? ???? HTML ?? ??? ?? ??? ??, ???? ??? ??? ? ? ????.

  <footer> <<> flexbox ? ???? ?? Flexbox? ????? ?? ????? ?? ??? ??? ???? ?? ? ? ????. <header> <<> <div>? ???? ??? ???? ?? ?? ??? ??? ??? ?? ? ? ????. ? ?????? ?? ??? ????? display: flex? ??????. ??? ??? <header> ??? ?? ?? ????. ? ?? <<> (?, ??? ???? ???) ? ?? ??? ?? ?? ?????. <main>? <footer> (?, ??? ???? ?? ?)? ???? ?? ?? ?????. flex-direction: column ?? ?? ???? ?? ??? ??? ????? ??? ????. ??? ????? : <footer>

  • ? ??? align-self ??? ????? ??? ??????. ??? ?? ??? ????. <<<>, center (??? ????? ?? ?????), , stretch ? flex-start (??? ????? ???? ?????). flex-end ???? ??? ? ??????. baseline ?????, ?? ?? ??? ???? ??? ??? ???? ?? ?????
  ?????? ??????.
  • display: flex
  ?? ????? ?? ??? ????? ???? ?? ???? ?? ?? ??????
  • ??? ????? ? ????. ??? ???? , flex-direction,
  ,
  (??? : ??? ????? ?? ?? ??) ?

  <div class="example">
    <header>header content here</header>
    <main class="main">
      <nav>nav content here</nav>
      <div class="content">main content here</div>
      <aside>aside content here</aside>
    </main>
    <footer>footer content here</footer>
  </div>

  (??? ????? ???? ??)? ?????.

  align-items center <<> Flexbox? ???? ???? ????? flex-start flex-end ? ?? ?? ??? stretch??, ?? ?? ??? ?? ??? ??? ??? ????? ?? ?????. baseline ?? ??? ?? ??? ????. , , ,

  (?? ??? ??? ????)? (??, ?? ? ?? ?? ??? ????).

  .main {
    display: flex;
  }

  ?? ?? , ??? ???? ??? html ????

  ?? ??? , ? ? ? ?? ??? ?? ? ????. ??, ??? ?? ???? ???? ?????. ? ?? ? ??? ??? ?? ? ??? ??? ??? ??? ???? ?? ?? ??? ??? ??? ??? ? ?? ??? ??? ? ????? ? ??????. :

  justify-content <<> Flexbox? ???? ???? ??? ??????

  center ??? ?????? Flex ????? ?? ??? ?? ??? ??? ?? ? ? ????. flex-start ? ??? ?? ?? ??? ?? ?????. flex-end space-between <<> - ?? ?? ??? ?? ??? ??? ????? ???? ??. space-around

  <<> - ?? ?? ??? ?? ??? ??? ??? ???? ??.

  <main> <<> - ??? ??. ?? ??? ??? ??? ?????. , <nav> ?? "%", "px", "em"?? ?? ?? ??? ?????. .content <aside> ?? ??, 3 ?? ?? ???? ?? ???? ? ?? ?? .main? ?????. justify-content ??? ??? ? space-between?? ? ?? ???? ? ???? ?? ? ?? 1? ?? ????.

  .main {
    display: flex;
  }
  
  .content {
    order: -1;
  }

  ? ?? ??

  ??

  ?????, ? ???? ?? ??? ?? ???? ?? Flexbox? ??? ?? ?? ?? ?? ? ????. ??? ?? ??? ? ???, ??, ?? ?? ?? ?? ?? ???? ? ?? ??? ??? ??? ?? ?? ??? ? ????.

  ??? ?????, ??? ?? ??? ????? ?? ? ?? ??? CSS ?????? Flexbox ??? ??? ?? ??? ??? ? ??? ????. FlexBox? ?? ??? ? ???? ???? ? ?? ????? ??? ?? ?? ?????? ???? ???? ?? ??? ??? ? ?? ????.

  CSS Flexbox

  ? ?? FAQS (?? ??? ???? ?? ?? ?? ??? ??? ???????)