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

flex布局各种方式示例代码

代码语言：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;
  }

.........完整代码请登录后点击上方下载按钮下载查看