flex布局各种方式示例代码-html代码-BFW代码库

代码语言：html
代码描述：flex布局各种方式示例代码，点击右边切换flex的布局方式，左侧更直观展现效果。
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  
  
  
<style>
@import url("https://fonts.googleapis.com/css2?family=Alegreya:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&family=Bubblegum+Sans&family=Roboto+Slab:wght@100;200;300;400;500;600;700;800;900&display=swap");

:root {
  --system-color-hidden: transparent;
  --system-color-white: oklch(99% 0 0);
  --system-color-dark: oklch(40% 0 0);
  --system-color-banana: oklch(97% 0.05053033581831252 103.66280428012995);
  --system-color-kiwi: oklch(94.37% 0.0612 148.78);
  --system-color-watermelon: oklch(68% 0.179 18.99);
  --system-color-scrollbar: oklch(67% 0.179 18.99);
  --system-color-h1-shadow: oklch(39% 0 0);
  --system-color-button-shadow: oklch(39.5% 0 0 / 70%);
  --system-color-text-shadow: oklch(0% 0 0 / 21%);
  --border-theme: var(--system-color-hidden) var(--system-color-hidden)
    var(--system-color-white) var(--system-color-hidden);
}

*,
*:after,
*:before {
  margin: 0;
  padding: 0;

  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

/** custom scrollbar **/
::-webkit-scrollbar-thumb {
  border-radius: 3px;

  background: var(--system-color-scrollbar);
  box-shadow: inset 0 0 4px var(--system-color-dark);
  -webkit-box-shadow: inset 0 0 4px var(--system-color-dark);
}

::-webkit-scrollbar-track-piece {
  background: var(--system-color-white);
}

::-webkit-scrollbar {
  width: 13px;
}

html {
  font-size: 16px;
}

body {
  max-width: 100dvw;
  height: 100dvh;

  display: flex;
  flex-flow: row-reverse wrap;
  justify-content: center;
  align-items: center;

  /* ✑ text selection disabling */
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;

  /* ☛ ⚠ max size 128px*128px */
  cursor: url("//repo.bfw.wiki/bfwrepo/image/5e56f73fda0cd.png"),
    pointer;

  /*** javascript injected class ***/
  /** justify-content **/
  & .jc-start {
    justify-content: flex-start;
  }

  & .jc-center {
    justify-content: center;
  }

  & .jc-end {
    justify-content: flex-end;
  }

  & .jc-between {
    justify-content: space-between;
  }

  & .jc-around {
    justify-content: space-around;
  }

  & .jc-evenly {
    justify-content: space-evenly;
  }

  /** align-content **/
  & .ac-start {
    align-content: flex-start;
  }

  & .ac-center {
    align-content: center;
  }

  & .ac-end {
    align-content: flex-end;
  }

  & .ac-between {
    align-content: space-between;
  }

  & .ac-around {
    align-content: space-around;
  }

  /** flex-direction **/
  & .fd-column {
    flex-direction: column;
  }

  & .fd-column-reverse {
    flex-direction: column-reverse;
  }

  & .fd-row {
    flex-direction: row;
  }

  & .fd-row-reverse {
    flex-direction: row-reverse;
  }

  /** gap *   */
  & .column-gap {
    gap: 0 5rem;
  }

  & .row-gap {
    gap: 5rem 0;
  }

  & .gap {
    gap: 5rem 5rem;
  }

  & header {
    width: 25%;
    height: 100%;

    background-color: var(--system-color-watermelon);
    border-left: 1px solid var(--system-color-dark);

    & nav {
      width: 100%;
      height: 100%;

      display: flex;
      flex-flow: column nowrap;
      justify-content: start;
      align-items: center;

      /* ✑ change scrollbar position to the left */
      direction: rtl;
      overflow-y: scroll;

      & :is(h1, h2, h3, span) {
        padding: 1.4rem 0 0.4rem 0;

        font-weight: 700;
        font-size: 1.4rem;
        font-family: "Alegreya", serif;

        color: var(--system-color-white);
        text-shadow: 1px 1px 1px var(--system-color-text-shadow);

        text-align: center;
        direction: ltr;
      }

      & h1 {
        width: 100%;

        padding-top: 1.6rem;

        font-weight: 900;
        font-size: 2.6rem;
        font-family: "Bubblegum Sans", sans-serif;

        text-shadow: 1px 1px var(--system-color-h1-shadow),
          2px 2px var(--system-color-h1-shadow),
          3px 3px var(--system-color-h1-shadow),
          4px 4px var(--system-color-h1-shadow),
          5px 5px var(--system-color-h1-shadow),
          6px 6px var(--system-color-h1-shadow),
          7px 7px var(--system-color-h1-shadow),
          8px 8px var(--system-color-h1-shadow),
          9px 9px var(--system-color-h1-shadow),
          10px 10px var(--system-color-h1-shadow),
          11px 11px var(--system-color-h1-shadow),
          12px 12px var(--system-color-h1-shadow),
          13px 13px var(--system-color-h1-shadow),
          14px 14px var(--system-color-h1-shadow),
          15px 15px 1px var(--system-color-h1-shadow);
      }

      & h3 {
        position: relative;

        display: flex;
        justify-content: center;

        text-decoration: line-through;

        &:first-of-type {
          margin-top: 1.9rem;
        }

        &:last-of-type {
          margin-bottom: 2.6rem;
        }

        & span {
          width: 160px;
          position: absolute;

          padding: 0.4rem 0;
          background-color: var(--system-color-white);
          text-align: center;
          border-radius: 6px;

          top: 100%;

          font-weight: 500;
          font-size: 1.2rem;
          font-family: "Lora", serif;

          color: var(--system-color-dark);
          text-shadow: 1px 1px 1px var(--system-color-text-shadow);
          box-shadow: 0px 5px 0px var(--system-color-button-shadow);

          z-index: 1;
          opacity: 0;
          transition: opacity 1s ease-out;

          &::after {
            content: "";
            position: absolute;

            bottom: 100%;
            left: 50%;

            margin-left: -5px;

            border-width: 5px;
            border-style: solid;
            border-color: var(--border-theme);
          }
        }

        &:hover span {
          opacity: 1;
        }
      }

      & button {
        width: 90%;

        margin: 0.4rem 0;
        padding: 0.4rem 0;

        font-weight: 500;
        font-size: 1.2rem;
        font-family: "Lora", serif;

        color: var(--system-color-dark);
        text-shadow: 1px 1px 1px var(--system-color-text-shadow);

        background-color: var(--system-color-banana);
        border: 1px solid var(--system-color-dark);

        border-radius: 6px;
        direction: ltr;
        box-shadow: 0px 5px 0px var(--system-color-button-shadow);
        transition: box-shadow 0.25s;

        /* ☛ ⚠ max size 128px*128px */
        cursor: url("//repo.bfw.wiki/bfwrepo/image/5e56f73fda0cd.png"),
          pointer;

        &:active {
          position: relative;
          top: 5px;
          box-shadow: none;
        }
      }
    }
  }

  & footer {
    width: 75%;
    height: 100%;

    & main {
      width: 100%;
      height: 100%;

      padding: 1rem;
      background-color: var(--system-color-kiwi);
      /* ✑ prevent flex child overflow */
      overflow: hidden;

      display: flex;
      justify-content: space-evenly;
      align-content: center;
      flex-direction: column-reverse;

      /* ☛ ⚠ don't diseable the wrap */
      flex-wrap: wrap;

      & article {
        aspect-ratio: 1;
        color: white;
        text-align: center;
        inline-size: 12%;
        line-height: 50px;
        background-color: var(--color-system-hidden);

        animation: pop 2s ease-in infinite alternate;
        transform: scale(0.8);

        :is(&:nth-of-type(1), &:nth-of-type(5), &:nth-of-type(9)) {
            background: grey;
        }

        :is(&:nth-of-type(2), &:nth-of-type(6), &:nth-of-type(10)) {
           background: green;
        }

        :is(&:nth-of-type(3), &:nth-of-type(7), &:nth-of-type(11)) {
           background: blue;
        }

        :is(&:nth-of-type(4), &:nth-of-type(8), &:nth-of-type(12)) {
          background: red;
           
        }
      }
    }
  }
}

/*
▀▄▀▄▀▄▀▄▀▄▀▄ ANIMATIONS ▀▄▀▄▀▄▀▄▀▄▀▄
*/

@keyframes pop {
  to {
    transform: scale(1);
  }
}

/*** ◰ media queries ***/
/** accessibility **/
@media screen and (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
    /* scroll-behavior: auto !important; */
  }
}
/** orientation **/
@media (orientation: portrait) {
  body {
    & header {
      width: 50%;
    }
    & footer {
      width: 50%;
    }
  }
}
</style>


  
  
</head>


  <body>
  <header>
    <nav>
      <h1>flex layout</h1>
      <h2>flex-direction:</h2>
      <button class="nav__btn__column">row</button>
      <button class="nav__btn__column-reverse">ro.........完整代码请登录后点击上方下载按钮下载查看