Flexbox? ?? ??? ?? ? ? ?? ?? ?? ???? ???? ??? ???? ? ?? ?????. ??? ?? ??? ? ???? ?? ???? ??? ?????. ?? ? ? ?? ?????!

? ???

flexbox? ???? ??? ????? ??? ? ??? ????

?? (? : Flex ????)? ?? ? ? ????. ??? ??? ??? ??? ???? ??? ??? ? ????.
• Flexbox? ?? ??? ???? ???? ?? Flex ??? ??? ??? ???? ? ??? ? ????. ??? ??? ??? ???? ??? ????? ???? ?? ? UI ??? ???????. position ? ????? ??? ???? ?? ??? static ??? ???? ?? ?? ? ?? ?? ?? ?? ???? ?? ???? ??? ?? ? ? ????. ??? ????? ?? ???? ???? ???? ?? ?????. z-index
Flexbox ? z-index ??? ?? ??? ???? ???? ????? ?? ?? ???? ????. ????? ?? ??? ???
• ?? ???? ????. ??? ??? , , flex-grow ?? ? ???? ??? "????"?????.
??? ??? FLEX ??? ?? ?? ? ?? (? : Flex ??)?

????? ? ????. CSS ?? ?? ???? ??? ?????

??? ????? ??? ??? ?? ?? ?? ?? ?? ?? ???? ? ???? (

)? ?? ????? ????.

z-index ? ??? ????? ?? ?? ?????? Codepen Demo Link position static ???, ??? ? ?? ??? ??? ?????. ???? ?? "1"??? ?? ??? ????. ?? ??? ????? ???? ????. ?????, ? ??? position?? ?? ???? ????. relative absolute ??? fixed ??? ??? ???????. ???? "2"? "3"????? ??? ???? ????. ??? ??? ??? ???? ??? ???? ???? ??? ????? sticky ??? ????? ? ???? (?, ??? ).

?? ???? ??? ???? ??? ?????

? ?? ? ? z-index ?? ?? ????.

Flexbox ? ?? ?? ??? ??? ????? ?? ??? ???? ???? UI ??? ??? ? ????. ??? ???? ?? ????? ???? ??? ?? ? ???.

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

??? ??? ????? :

??? CSS? ??? ????

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

? ??? ?? ??? ???? ? ?? ??? ?? ???

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

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

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

? ?????.

<header>
  <nav>
    <h1 class="logo">LOGO</h1>
    <ul class="menu">
      <li><a href="http://www.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">About</a></li>
      <li><a href="http://www.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Projects</a></li>
      <li><a href="http://www.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Contact</a></li>
    </ul>
    <ul class="social">
      <li><a href="http://www.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Facebook</a></li>
      <li><a href="http://www.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Twitter</a></li>
    </ul>
  </nav>
</header>

? ?? ?? ??? ???? ????? ? ??? ????. ? ?? ???? ???? ??? ???? ?? ?? ??? ????. ?? ??, ??? ??? 1100px ? ?? ?? ??? ??? ????.

<<>

??? ? ?? ???? ???? ? ???? ?? ??? ????. ??? ??? 1100px ? ?? ?? ??? ??? ????.

header {
  background: http://www.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b333;
}

nav {
  display: flex;
  align-items: center;
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

.menu {
  margin-left: 60px;
  margin-right: auto;
}

Codepen Demo Link nav

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

margin-right: auto ??? ???? ?????. ??? ?? CSS? ???????. align-self ? ??? ?? ??? ?? ??? ?? ????? ?????. ?? ????, ??? ?? ???

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

? ??? ? ??? ??? ??? ?????. margin-right Codepen Demo Link flex-grow: 1

???? ? ? ?? ?? ?? ??

??? ?????? ??? ??? ??? ?? ????. ?? ?? ??? ???? ??? ??? ???? ??? ?????. ?? ??? ??? ?? justify-content ??? ?????. ??? ?? : justify-content ?? ??? ?? ??? ????, ??? Flex ?? ?? ?? ?? ???? ??? ???? ??? ?? ??? ?? ???? ???? ????.

??, ??? ??? ??? ??? ??? :

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

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

Codepen Demo Link

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

justify-content: space-between Flex ????? margin: 0 auto ??? ? ????

??? ??Flex ????? ?? ? ? ????.

??? ?? ??? ???? ???? ?? Flex ??? ??? ??? ?? ? ? ????. ?????? ??? ?? ???? ?? ?? ??? ??????.

z- ???? ?? FAQ ? FlexBox Flexbox? z-index ? ?????? ??? ??????

? ??? ??? ?? ??? ??? ???? ??CSS ?????. Flexbox?? ??? ?????? Flex ??? z ?? ???? ??? ?? ? ? ????.

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

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

? Z-index? Flexbox?? ???? ?? ??? ??????
• position ??? static? ? ?? ??? Flexbox?? ???? ????. ???? ??? z-index ??? ???? ???? ???? ?????. ??? ???? ??? (?, ,
• ?? ? ??)
? ??? ??? ????. ? ?? ??? ?? ???

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

Flexbox?? ?? ??? ??? ??????

Flexbox?? ?? ???? ??? ??? ????. ?? ??? ???? ??? ????? ?? ? ? ????. Flex ?????? ?? ??? ???? ???? ?? ?? ??? ???? ?? ????? ????? ?? ????. ??? ??? ???? ??? ??? ???? ? ?? ?????.

z-index? ???? ??? ??? ??? ?? ? ? ?????

?,

??? ?????? z ?? ?? ??? ??? ??? ?? ? ? ????. ??? ? ???? ???? ????? ?? ??????. Flex ????? ???? ???

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

? ??? ????? ?? ??? ??? ???? ?? ??? ??????

Flex ????? ?? ??? ??? ???? ??? ? ?? ??? ??? ? ????. ???? ??? ??? ????? ?? ?? ??? ?????? ??? ?? ??? ??? ???? ?????. ? ?? ??? Flex ????? ?? ? ????? ??? ?? ??? ???? ????? ??? ? ????. Z-Index Flexbox?? z-index ??? ???? ??? ?????? Z-Index flexbox?? Z-Index ??? ????? ????? ??? ????

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

Flexbox?? z-index? ???? ??????

flexbox?? ? ????

???. ?? Flex ??? ??? ??? ?? ??? ????? ?? ?????. ??? ??? ????? ?? ?? ???

? ?? ? ? ????.

z- ???? ??? ??? ??? ?? ??? ??? ?? Z-Index Z-Index ?? ?? ?? ?? ??? ???? ? ???? ??? ??? ??? ??? ????. ?? ?? ??? Z-Index ???? HTML ??? ???? ??? ??? ?????. relative flexbox? ?? z-index? ???? ??? ??? ?? ? ?????

?, Flexbox? ??

??? ?????? ??? ??? ?? ? ? ????. Flex ????? ?? ? ???? ???? ????? ? ????? Flex ????? ???????.

?? ?? ??? ??? ?? ???? ????? ???? ?? ????? ?? ??? ??? ?? ??? ?? ??? ??? ??? ?? ??????. Codepen ??? ??? ? ? ???? ?? ???? ??? " Codepen Demo Link Z-Index

? ??? ?? ? : Flexbox?? Z-INDEX ? ?? ??? ???? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!