CSS flex布局

wDeveloper
已于 2023-04-12 14:23:33 修改
阅读量253
点赞数
分类专栏： css 文章标签： css html 前端 css3
于 2023-04-12 11:31:26 首次发布
本文链接：https://blog.csdn.net/wDeveloper/article/details/130087951
版权
css 专栏收录该内容
3 篇文章 1 订阅
订阅专栏
CSS背景

flex布局
flex布局

绘制一个web页面，布局很重要，这里总结一下flex布局的使用
布局属性

作用在布局上的属性
排列方向 flex-driection

row(默认)
row-reverse
column
column-reverse
排列对齐 justify-content

如果flex-direction:row,就是水平对齐；如果flex-direction:column,就是纵向对齐
flex-start(默认)
center
flex-end
space-around
space-between
space-evenly
排列对齐 align-items

如果flex-direction:row,就是纵向对齐；如果flex-direction:column,就是水平对齐
stretch(默认)
center
flex-start
flex-end
baseline
包裹方式 flex-wrap

nowrap(默认)
wrap
wrap-reverse
多行(列)内容对齐 align-content

多行(列)才有效果，搭配 flex-wrap:wrap/wrap-reverse使用
stretch(默认)
flex-start
center
flex-end
space-around
space-between
space-evenly
项目属性

控制自身对齐 align-self

stretch(默认)
flex-start
center
flex-end
baseline
控制自身占用空间 flex-grow

空间比例，会覆盖width属性
number默认1
控制自身初始占用空间 flex-basis

在flex布局中，相当于width 但会覆盖width属性，
控制自身压缩比例 flex-shrink

当项目宽（高）度超过容器时，控制项目的压缩比，当值设为0的时候，项目空间不压缩
控制自身排列 order

在这里插入图片描述
代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>布局</title>
  <style type="text/css">
    * {
      box-sizing: border-box;
    }

    html,
    body {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }

    .container {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
    }

    .title {
      height: 50px;
      line-height: 50px;
      text-align: center;
      font-weight: bold;
      border-width: 1px 0 0 0;
      border-color: #ccc;
      border-style: solid;
    }

    .content {
      height: 250px;
      width: 100%;
      display: flex;
      flex-direction: row;
      justify-content: space-evenly;
    }

    .content2 {
      height: 500px;
      width: 100%;
      display: flex;
      flex-direction: row;
      justify-content: space-evenly;
    }



    .card {
      display: flex;
      flex-direction: column;
      width: 100%;
      box-shadow: 0px 0px 5px #888888;
      min-height: 100px;
    }

    .item {
      display: inline-block;
      width: 40px;
      height: 40px;
      text-align: center;
      line-height: 40px;
    }

    .item:nth-child(1) {
      background-color: rgb(201, 255, 120);
    }

    .item:nth-child(2) {
      background-color: greenyellow;
    }

    .item:nth-child(3) {
      background-color: yellowgreen;
    }

    .item:nth-child(4) {
      background-color: rgb(131, 196, 0);
    }

    .item2 {
      display: inline-block;
      width: 40px;
      text-align: center;
      line-height: 40px;
    }

    .item2:nth-child(1) {
      background-color: rgb(201, 255, 120);
    }

    .item2:nth-child(2) {
      background-color: greenyellow;
    }

    .item2:nth-child(3) {
      background-color: yellowgreen;
    }

    .item2:nth-child(4) {
      background-color: rgb(131, 196, 0);
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="title">flex-direction</div>
    <div class="content">
      <div class="card" style="width:calc(25% - 16px)">
        <div style="display: flex;flex-direction: row;height:200px">
          <span class="item">A</span>
          <span class="item">B</span>
          <span class="item">C</span>
          <span class="item">D</span>
        </div>
        <div class="title">row</div>
      </div>
      <div class="card" style="width:calc(25% - 16px)">
        <div style="display: flex;flex-direction: row-reverse;height:200px">
          <span class="item">A</span>
          <span class="item">B</span>
          <span class="item">C</span>
          <span class="item">D</span>
        </div>
        <div class="title">row-reverse</div>
      </div>
      <div class="card" style="width:calc(25% - 16px)">
        <div style="display: flex;flex-direction: column;height:200px">
          <span class="item">A</span>
          <span class="item">B</span>
          <span class="item">C</span>
          <span class="item">D</span>
        </div>
        <div class="title">column</div>
      </div>
      <div class="card" style="width:calc(25% - 16px)">
        <div style="display: flex;flex-direction: column-reverse;height:200px">
          <span class="item">A</span>
          <span class="item">B</span>
          <span class="item">C</span>
          <span class="item">D</span>
        </div>
        <div class="title">column-reverse</div>
      </div>
    </div>

    <div class="title">justify-content</div>
    <div class="content">
      <div class="card" style="width:calc(16.6% - 16px)">
        <div style="display: flex;flex-direction: row;justify-content: flex-start; height:200px">
          <span class="item">A</span>
          <span class="item">B</span>
          <span class="item">C</span>
          <span class="item">D</span>
        </div>
        <div class="title">flex-start</div>
      </div>

      <div class="card" style="width:calc(16.6% - 16px)">
        <div style="display: flex;flex-direction: row;justify-content: center; height:200px">
          <span class="item">A</span>
          <span class="item">B</span>
          <span class="item">C</span>
          <span class="item">D</span>
        </div>
        <div class="title">center</div>
      </div>
      <div class="card" style="width:calc(16.6% - 16px)">
        <div style="display: flex;flex-direction: row;justify-content: flex-end; height:200px">
          <span class="item">A</span>
          <span class="item">B</span>
          <span class="item">C</span>
          <span class="item">D</span>
        </div>
        <div class="title">flex-end</div>
      </div>
      <div class="card" style="width:calc(16.6% - 16px)">
        <div style="display: flex;flex-direction: row;justify-content:space-around; height:200px">
          <span class="item">A</span>
          <span class="item">B</span>
          <span class="item">C</span>
          <span class="item">D</span>
        </div>
        <div class="title">space-around</div>
      </div>
      <div class="card" style="width:calc(16.6% - 16px)">
        <div style="display: flex;flex-direction: row;justify-content:space-between; height:200px">
          <span class="item">A</span>
          <span class="item">B</span>
          <span class="item">C</span>
          <span class="item">D</span>
        </div>
        <div class="title">space-between</div>
      </div>
      <div class="card" style="width:calc(16.6% - 16px)">
        <div style="display: flex;flex-direction: row;justify-content:space-evenly; height:200px">
          <span class="item">A</span>
          <span class="item">B</span>
          <span class="item">C</span>
          <span class="item">D</span>
        </div>
        <div class="title">space-evenly</div>
      </div>

    </div>

    <div class="title">align-items</div>
    <div class="content">
      <div class="card" style="width:calc(20% - 16px)">
        <div style="display: flex;flex-direction: row;align-items: stretch; height:200px">
          <span class="item2">A</span>
          <span class="item2">B</span>
          <span class="item2">C</span>
          <span class="item2">D</span>
        </div>
        <div class="title">stretch</div>
      </div>

      <div class="card" style="width:calc(20% - 16px)">
        <div style="display: flex;flex-direction: row;align-items: center; height:200px">
          <span class="item2">A</span>
          <span class="item2">B</span>
          <span class="item2">C</span>
          <span class="item2">D</span>
        </div>
        <div class="title">center</div>
      </div>

      <div class="card" style="width:calc(20% - 16px)">
        <div style="display: flex;flex-direction: row;align-items: flex-start; height:200px">
          <span class="item2">A</span>
          <span class="item2">B</span>
          <span class="item2">C</span>
          <span class="item2">D</span>
        </div>
        <div class="title">flex-start</div>
      </div>

      <div class="card" style="width:calc(20% - 16px)">
        <div style="display: flex;flex-direction: row;align-items: flex-end; height:200px">
          <span class="item2">A</span>
          <span class="item2">B</span>
          <span class="item2">C</span>
          <span class="item2">D</span>
        </div>
        <div class="title">flex-end</div>
      </div>

      <div class="card" style="width:calc(20% - 16px)">
        <div style="display: flex;flex-direction: row;align-items: baseline; height:200px">
          <span
            style="display: inline-block;height:80px;width:40px;text-align:center;line-height: 80px;background-color: rgb(201, 255, 120);">A</span>
          <span
            style="display: inline-block;height:50px;width:40px;text-align:center;line-height: 50px;background-color: greenyellow;">B</span>
          <span
            style="display: inline-block;height:90px;width:40px;text-align:center;line-height: 90px;background-color: yellowgreen;">C</span>
          <span
            style="display: inline-block;height:70px;width:40px;text-align:center;line-height: 70px;background-color: rgb(131, 196, 0);">D</span>
        </div>
        <div class="title">baseline</div>
      </div>
    </div>

    <div class="title">flex-wrap</div>
    <div class="content">
      <div class="card" style="width:calc(33.3% - 16px)">
        <div style="display: flex;flex-direction: row;flex-wrap:nowrap; height:200px">
          <span style="background-color: #00ff00;" class="item">A</span>
          <span style="background-color: #11ffaa;" class="item">B</span>
          <span style="background-color: #11ffbb;" class="item">C</span>
          <span style="background-color: #aaffcc;" class="item">D</span>
          <span style="background-color: #ccffdd;" class="item">E</span>
          <span style="background-color: #555555;" class="item">F</span>
          <span style="background-color: #666666;" class="item">G</span>
          <span style="background-color: #777777;" class="item">H</span>
          <span style="background-color: #888888;" class="item">I</span>
          <span style="background-color: #999999;" class="item">J</span>
          <span style="background-color: #ffaaaa;" class="item">K</span>
          <span style="background-color: #ffbbbb;" class="item">L</span>
          <span style="background-color: #ffcccc;" class="item">M</span>
          <span style="background-color: #ffdddd;" class="item">N</span>
          <span style="background-color: #ffeeee;" class="item">O</span>
          <span style="background-color: #ffffff;" class="item">P</span>
          <span style="background-color: #ffffaa;" class="item">Q</span>
          <span style="background-color: #ffffbb;" class="item">R</span>
          <span style="background-color: #ffffcc;" class="item">S</span>
          <span style="background-color: #00ffaa;" class="item">T</span>
          <span style="background-color: #00ffbb;" class="item">U</span>
          <span style="background-color: #00ffcc;" class="item">V</span>
          <span style="background-color: #00ffee;" class="item">W</span>
          <span style="background-color: #00ffff;" class="item">X</span>
          <span style="background-color: #00ddaa;" class="item">Y</span>
          <span style="background-color: #00ddff;" class="item">Z</span>
        </div>
        <div class="title">nowrap</div>
      </div>

      <div class="card" style="width:calc(33.3% - 16px)">
        <div style="display: flex;flex-direction: row;flex-wrap:wrap; height:200px">
          <span style="background-color: #00ff00;" class="item">A</span>
          <span style="background-color: #11ffaa;" class="item">B</span>
          <span style="background-color: #11ffbb;" class="item">C</span>
          <span style="background-color: #aaffcc;" class="item">D</span>
          <span style="background-color: #ccffdd;" class="item">E</span>
          <span style="background-color: #555555;" class="item">F</span>
          <span style="background-color: #666666;" class="item">G</span>
          <span style="background-color: #777777;" class="item">H</span>
          <span style="background-color: #888888;" class="item">I</span>
          <span style="background-color: #999999;" class="item">J</span>
          <span style="background-color: #ffaaaa;" class="item">K</span>
          <span style="background-color: #ffbbbb;" class="item">L</span>
          <span style="background-color: #ffcccc;" class="item">M</span>
          <span style="background-color: #ffdddd;" class="item">N</span>
          <span style="background-color: #ffeeee;" class="item">O</span>
          <span style="background-color: #ffffff;" class="item">P</span>
          <span style="background-color: #ffffaa;" class="item">Q</span>
          <span style="background-color: #ffffbb;" class="item">R</span>
          <span style="background-color: #ffffcc;" class="item">S</span>
          <span style="background-color: #00ffaa;" class="item">T</span>
          <span style="background-color: #00ffbb;" class="item">U</span>
          <span style="background-color: #00ffcc;" class="item">V</span>
          <span style="background-color: #00ffee;" class="item">W</span>
          <span style="background-color: #00ffff;" class="item">X</span>
          <span style="background-color: #00ddaa;" class="item">Y</span>
          <span style="background-color: #00ddff;" class="item">Z</span>
        </div>
        <div class="title">wrap</div>
      </div>

      <div class="card" style="width:calc(33.3% - 16px)">
        <div style="display: flex;flex-direction: row;flex-wrap:wrap-reverse; height:200px">
          <span style="background-color: #00ff00;" class="item">A</span>
          <span style="background-color: #11ffaa;" class="item">B</span>
          <span style="background-color: #11ffbb;" class="item">C</span>
          <span style="background-color: #aaffcc;" class="item">D</span>
          <span style="background-color: #ccffdd;" class="item">E</span>
          <span style="background-color: #555555;" class="item">F</span>
          <span style="background-color: #666666;" class="item">G</span>
          <span style="background-color: #777777;" class="item">H</span>
          <span style="background-color: #888888;" class="item">I</span>
          <span style="background-color: #999999;" class="item">J</span>
          <span style="background-color: #ffaaaa;" class="item">K</span>
          <span style="background-color: #ffbbbb;" class="item">L</span>
          <span style="background-color: #ffcccc;" class="item">M</span>
          <span style="background-color: #ffdddd;" class="item">N</span>
          <span style="background-color: #ffeeee;" class="item">O</span>
          <span style="background-color: #ffffff;" class="item">P</span>
          <span style="background-color: #ffffaa;" class="item">Q</span>
          <span style="background-color: #ffffbb;" class="item">R</span>
          <span style="background-color: #ffffcc;" class="item">S</span>
          <span style="background-color: #00ffaa;" class="item">T</span>
          <span style="background-color: #00ffbb;" class="item">U</span>
          <span style="background-color: #00ffcc;" class="item">V</span>
          <span style="background-color: #00ffee;" class="item">W</span>
          <span style="background-color: #00ffff;" class="item">X</span>
          <span style="background-color: #00ddaa;" class="item">Y</span>
          <span style="background-color: #00ddff;" class="item">Z</span>
        </div>
        <div class="title">wrap-reverse</div>
      </div>

    </div>

    <div class="title">align-content</div>
    <div class="content2">
      <div class="card" style="width:calc(14.3% - 16px)">
        <div style="display: flex;flex-direction: row;flex-wrap: wrap; align-content:stretch; height:450px">
          <span style="background-color: #00ff00;" class="item2">A</span>
          <span style="background-color: #11ffaa;" class="item2">B</span>
          <span style="background-color: #11ffbb;" class="item2">C</span>
          <span style="background-color: #aaffcc;" class="item2">D</span>
          <span style="background-color: #ccffdd;" class="item2">E</span>
          <span style="background-color: #555555;" class="item2">F</span>
          <span style="background-color: #666666;" class="item2">G</span>
          <span style="background-color: #777777;" class="item2">H</span>
          <span style="background-color: #888888;" class="item2">I</span>
          <span style="background-color: #999999;" class="item2">J</span>
          <span style="background-color: #ffaaaa;" class="item2">K</span>
          <span style="background-color: #ffbbbb;" class="item2">L</span>
          <span style="background-color: #ffcccc;" class="item2">M</span>
          <span style="background-color: #ffdddd;" class="item2">N</span>
          <span style="background-color: #ffeeee;" class="item2">O</span>
          <span style="background-color: #ffffff;" class="item2">P</span>
          <span style="background-color: #ffffaa;" class="item2">Q</span>
          <span style="background-color: #ffffbb;" class="item2">R</span>
          <span style="background-color: #ffffcc;" class="item2">S</span>
          <span style="background-color: #00ffaa;" class="item2">T</span>
          <span style="background-color: #00ffbb;" class="item2">U</span>
          <span style="background-color: #00ffcc;" class="item2">V</span>
          <span style="background-color: #00ffee;" class="item2">W</span>
          <span style="background-color: #00ffff;" class="item2">X</span>
          <span style="background-color: #00ddaa;" class="item2">Y</span>
          <span style="background-color: #00ddff;" class="item2">Z</span>
        </div>
        <div class="title">stretch</div>
      </div>

      <div class="card" style="width:calc(14.3% - 16px)">
        <div style="display: flex;flex-direction: row;flex-wrap: wrap; align-content:flex-start;  height:450px">
          <span style="background-color: #00ff00;" class="item">A</span>
          <span style="background-color: #11ffaa;" class="item">B</span>
          <span style="background-color: #11ffbb;" class="item">C</span>
          <span style="background-color: #aaffcc;" class="item">D</span>
          <span style="background-color: #ccffdd;" class="item">E</span>
          <span style="background-color: #555555;" class="item">F</span>
          <span style="background-color: #666666;" class="item">G</span>
          <span style="background-color: #777777;" class="item">H</span>
          <span style="background-color: #888888;" class="item">I</span>
          <span style="background-color: #999999;" class="item">J</span>
          <span style="background-color: #ffaaaa;" class="item">K</span>
          <span style="background-color: #ffbbbb;" class="item">L</span>
          <span style="background-color: #ffcccc;" class="item">M</span>
          <span style="background-color: #ffdddd;" class="item">N</span>
          <span style="background-color: #ffeeee;" class="item">O</span>
          <span style="background-color: #ffffff;" class="item">P</span>
          <span style="background-color: #ffffaa;" class="item">Q</span>
          <span style="background-color: #ffffbb;" class="item">R</span>
          <span style="background-color: #ffffcc;" class="item">S</span>
          <span style="background-color: #00ffaa;" class="item">T</span>
          <span style="background-color: #00ffbb;" class="item">U</span>
          <span style="background-color: #00ffcc;" class="item">V</span>
          <span style="background-color: #00ffee;" class="item">W</span>
          <span style="background-color: #00ffff;" class="item">X</span>
          <span style="background-color: #00ddaa;" class="item">Y</span>
          <span style="background-color: #00ddff;" class="item">Z</span>
        </div>
        <div class="title">flex-start</div>
      </div>

      <div class="card" style="width:calc(14.3% - 16px)">
        <div style="display: flex;flex-direction: row;flex-wrap: wrap; align-content:center; height:450px">
          <span style="background-color: #00ff00;" class="item">A</span>
          <span style="background-color: #11ffaa;" class="item">B</span>
          <span style="background-color: #11ffbb;" class="item">C</span>
          <span style="background-color: #aaffcc;" class="item">D</span>
          <span style="background-color: #ccffdd;" class="item">E</span>
          <span style="background-color: #555555;" class="item">F</span>
          <span style="background-color: #666666;" class="item">G</span>
          <span style="background-color: #777777;" class="item">H</span>
          <span style="background-color: #888888;" class="item">I</span>
          <span style="background-color: #999999;" class="item">J</span>
          <span style="background-color: #ffaaaa;" class="item">K</span>
          <span
            style="background-color: #ffbbbb;display: inline-block;width:40px;height: 40px;line-height: 40px;text-align: center;">L</span>
          <span style="background-color: #ffcccc;" class="item">M</span>
          <span style="background-color: #ffdddd;" class="item">N</span>
          <span style="background-color: #ffeeee;" class="item">O</span>
          <span style="background-color: #ffffff;" class="item">P</span>
          <span style="background-color: #ffffaa;" class="item">Q</span>
          <span style="background-color: #ffffbb;" class="item">R</span>
          <span style="background-color: #ffffcc;" class="item">S</span>
          <span style="background-color: #00ffaa;" class="item">T</span>
          <span style="background-color: #00ffbb;" class="item">U</span>
          <span style="background-color: #00ffcc;" class="item">V</span>
          <span style="background-color: #00ffee;" class="item">W</span>
          <span style="background-color: #00ffff;" class="item">X</span>
          <span style="background-color: #00ddaa;" class="item">Y</span>
          <span style="background-color: #00ddff;" class="item">Z</span>
        </div>
        <div class="title">center</div>
      </div>

      <div class="card" style="width:calc(14.3% - 16px)">
        <div style="display: flex;flex-direction: row;flex-wrap: wrap; align-content:flex-end; height:450px">
          <span style="background-color: #00ff00;" class="item">A</span>
          <span style="background-color: #11ffaa;" class="item">B</span>
          <span style="background-color: #11ffbb;" class="item">C</span>
          <span style="background-color: #aaffcc;" class="item">D</span>
          <span style="background-color: #ccffdd;" class="item">E</span>
          <span style="background-color: #555555;" class="item">F</span>
          <span style="background-color: #666666;" class="item">G</span>
          <span style="background-color: #777777;" class="item">H</span>
          <span style="background-color: #888888;" class="item">I</span>
          <span style="background-color: #999999;" class="item">J</span>
          <span style="background-color: #ffaaaa;" class="item">K</span>
          <span style="background-color: #ffbbbb;" class="item">L</span>
          <span style="background-color: #ffcccc;" class="item">M</span>
          <span style="background-color: #ffdddd;" class="item">N</span>
          <span style="background-color: #ffeeee;" class="item">O</span>
          <span style="background-color: #ffffff;" class="item">P</span>
          <span style="background-color: #ffffaa;" class="item">Q</span>
          <span style="background-color: #ffffbb;" class="item">R</span>
          <span style="background-color: #ffffcc;" class="item">S</span>
          <span style="background-color: #00ffaa;" class="item">T</span>
          <span style="background-color: #00ffbb;" class="item">U</span>
          <span style="background-color: #00ffcc;" class="item">V</span>
          <span style="background-color: #00ffee;" class="item">W</span>
          <span style="background-color: #00ffff;" class="item">X</span>
          <span style="background-color: #00ddaa;" class="item">Y</span>
          <span style="background-color: #00ddff;" class="item">Z</span>
        </div>
        <div class="title">flex-end</div>
      </div>

      <div class="card" style="width:calc(14.3% - 16px)">
        <div style="display: flex;flex-direction: row;flex-wrap: wrap; align-content:space-around; height:450px">
          <span style="background-color: #00ff00;" class="item">A</span>
          <span style="background-color: #11ffaa;" class="item">B</span>
          <span style="background-color: #11ffbb;" class="item">C</span>
          <span style="background-color: #aaffcc;" class="item">D</span>
          <span style="background-color: #ccffdd;" class="item">E</span>
          <span style="background-color: #555555;" class="item">F</span>
          <span style="background-color: #666666;" class="item">G</span>
          <span style="background-color: #777777;" class="item">H</span>
          <span style="background-color: #888888;" class="item">I</span>
          <span style="background-color: #999999;" class="item">J</span>
          <span style="background-color: #ffaaaa;" class="item">K</span>
          <span style="background-color: #ffbbbb;" class="item">L</span>
          <span style="background-color: #ffcccc;" class="item">M</span>
          <span style="background-color: #ffdddd;" class="item">N</span>
          <span style="background-color: #ffeeee;" class="item">O</span>
          <span style="background-color: #ffffff;" class="item">P</span>
          <span style="background-color: #ffffaa;" class="item">Q</span>
          <span style="background-color: #ffffbb;" class="item">R</span>
          <span style="background-color: #ffffcc;" class="item">S</span>
          <span style="background-color: #00ffaa;" class="item">T</span>
          <span style="background-color: #00ffbb;" class="item">U</span>
          <span style="background-color: #00ffcc;" class="item">V</span>
          <span style="background-color: #00ffee;" class="item">W</span>
          <span style="background-color: #00ffff;" class="item">X</span>
          <span style="background-color: #00ddaa;" class="item">Y</span>
          <span style="background-color: #00ddff;" class="item">Z</span>
        </div>
        <div class="title">space-around</div>
      </div>

      <div class="card" style="width:calc(14.3% - 16px)">
        <div style="display: flex;flex-direction: row;flex-wrap: wrap; align-content:space-between; height:450px">
          <span style="background-color: #00ff00;" class="item">A</span>
          <span style="background-color: #11ffaa;" class="item">B</span>
          <span style="background-color: #11ffbb;" class="item">C</span>
          <span style="background-color: #aaffcc;" class="item">D</span>
          <span style="background-color: #ccffdd;" class="item">E</span>
          <span style="background-color: #555555;" class="item">F</span>
          <span style="background-color: #666666;" class="item">G</span>
          <span style="background-color: #777777;" class="item">H</span>
          <span style="background-color: #888888;" class="item">I</span>
          <span style="background-color: #999999;" class="item">J</span>
          <span style="background-color: #ffaaaa;" class="item">K</span>
          <span style="background-color: #ffbbbb;" class="item">L</span>
          <span style="background-color: #ffcccc;" class="item">M</span>
          <span style="background-color: #ffdddd;" class="item">N</span>
          <span style="background-color: #ffeeee;" class="item">O</span>
          <span style="background-color: #ffffff;" class="item">P</span>
          <span style="background-color: #ffffaa;" class="item">Q</span>
          <span style="background-color: #ffffbb;" class="item">R</span>
          <span style="background-color: #ffffcc;" class="item">S</span>
          <span style="background-color: #00ffaa;" class="item">T</span>
          <span style="background-color: #00ffbb;" class="item">U</span>
          <span style="background-color: #00ffcc;" class="item">V</span>
          <span style="background-color: #00ffee;" class="item">W</span>
          <span style="background-color: #00ffff;" class="item">X</span>
          <span style="background-color: #00ddaa;" class="item">Y</span>
          <span style="background-color: #00ddff;" class="item">Z</span>
        </div>
        <div class="title">space-between</div>
      </div>

      <div class="card" style="width:calc(14.3% - 16px)">
        <div style="display: flex;flex-direction: row;flex-wrap: wrap; align-content:space-evenly; height:450px">
          <span style="background-color: #00ff00;" class="item">A</span>
          <span style="background-color: #11ffaa;" class="item">B</span>
          <span style="background-color: #11ffbb;" class="item">C</span>
          <span style="background-color: #aaffcc;" class="item">D</span>
          <span style="background-color: #ccffdd;" class="item">E</span>
          <span style="background-color: #555555;" class="item">F</span>
          <span style="background-color: #666666;" class="item">G</span>
          <span style="background-color: #777777;" class="item">H</span>
          <span style="background-color: #888888;" class="item">I</span>
          <span style="background-color: #999999;" class="item">J</span>
          <span style="background-color: #ffaaaa;" class="item">K</span>
          <span style="background-color: #ffbbbb;" class="item">L</span>
          <span style="background-color: #ffcccc;" class="item">M</span>
          <span style="background-color: #ffdddd;" class="item">N</span>
          <span style="background-color: #ffeeee;" class="item">O</span>
          <span style="background-color: #ffffff;" class="item">P</span>
          <span style="background-color: #ffffaa;" class="item">Q</span>
          <span style="background-color: #ffffbb;" class="item">R</span>
          <span style="background-color: #ffffcc;" class="item">S</span>
          <span style="background-color: #00ffaa;" class="item">T</span>
          <span style="background-color: #00ffbb;" class="item">U</span>
          <span style="background-color: #00ffcc;" class="item">V</span>
          <span style="background-color: #00ffee;" class="item">W</span>
          <span style="background-color: #00ffff;" class="item">X</span>
          <span style="background-color: #00ddaa;" class="item">Y</span>
          <span style="background-color: #00ddff;" class="item">Z</span>
        </div>
        <div class="title">space-evenly</div>
      </div>
    </div>

    <hr />

    <div class="title">align-self</div>
    <div class="content">
      <div class="card" style="width:calc(20% - 16px)">
        <div style="display: flex;flex-direction: row;height:200px">
          <span class="item">A</span>
          <span class="item2" style="align-self: stretch;">B</span>
          <span class="item">C</span>
          <span class="item">D</span>
        </div>
        <div class="title">stretch</div>
      </div>
      <div class="card" style="width:calc(20% - 16px)">
        <div style="display: flex;flex-direction: row;height:200px">
          <span class="item">A</span>
          <span class="item2" style="align-self: flex-start;">B</span>
          <span class="item">C</span>
          <span class="item">D</span>
        </div>
        <div class="title">flex-start</div>
      </div>
      <div class="card" style="width:calc(20% - 16px)">
        <div style="display: flex;flex-direction: row;height:200px">
          <span class="item">A</span>
          <span class="item2" style="align-self: center;">B</span>
          <span class="item">C</span>
          <span class="item">D</span>
        </div>
        <div class="title">center</div>
      </div>
      <div class="card" style="width:calc(20% - 16px)">
        <div style="display: flex;flex-direction: row;height:200px">
          <span class="item">A</span>
          <span class="item" style="align-self:flex-end;">B</span>
          <span class="item">C</span>
          <span class="item">D</span>
        </div>
        <div class="title">flex-end</div>
      </div>
      <div class="card" style="width:calc(20% - 16px)">
        <div style="display: flex;flex-direction: row;height:200px;">
          <span
            style="display: inline-block;align-self: baseline; height:80px;width:40px;text-align:center;line-height: 80px;background-color: rgb(201, 255, 120);">A</span>
          <span
            style="display: inline-block;align-self: baseline;height:50px;width:40px;text-align:center;line-height: 50px;background-color: greenyellow;">B</span>
          <span
            style="display: inline-block;align-self: baseline;height:90px;width:40px;text-align:center;line-height: 90px;background-color: yellowgreen;">C</span>
          <span
            style="display: inline-block;align-self: baseline;height:70px;width:40px;text-align:center;line-height: 70px;background-color: rgb(131, 196, 0);">D</span>
        </div>
        <div class="title">baseline</div>
      </div>
    </div>

    <div class="title">flex-grow</div>
    <div class="content">
      <div class="card" style="width:calc(50% - 16px)">
        <div style="display: flex;flex-direction: row;height:100%">
          <span style="flex-grow:1;background-color: #00ddaa;">A</span>
          <span style="flex-grow:2;background-color: #00ddff;">B</span>
          <span style="flex-grow:3;background-color: #00ff00;">C</span>
          <span style="flex-grow:1;background-color: #11ffaa;">D</span>
        </div>
      </div>
      <div class="card" style="width:calc(50% - 16px)">
        <div style="display: flex;flex-direction: row;height:100%">
          <span style="background-color: #00ddaa;width: 50px;">A</span>
          <span style="background-color: #00ddff;flex-grow: 1;">B</span>
          <span style="background-color: #00ff00;width: 50px;">C</span>
          <span style="background-color: #11ffaa;width: 50px;">D</span>
        </div>
      </div>
    </div>

    <div class="title">flex-basis</div>
    <div class="content">
      <div class="card" style="width:calc(50% - 16px)">
        <div style="display: flex;flex-direction: row;height:100%">
          <span style="flex-basis:200px;width: 50px;background-color: #00ddaa;">A</span>
          <span style="flex-grow:2;background-color: #00ddff;">B</span>
          <span style="flex-grow:3;background-color: #00ff00;">C</span>
          <span style="flex-grow:1;background-color: #11ffaa;">D</span>
        </div>
      </div>
      <div class="card" style="width:calc(50% - 16px)">
        <div style="display: flex;flex-direction: row;height:100%">
          <span style="background-color: #00ddaa;width: 50px;">A</span>
          <span style="background-color: #00ddff;flex-grow: 0;flex-basis: 150px;">B</span>
          <span style="background-color: #00ff00;width: 50px;flex-grow: 1;">C</span>
          <span style="background-color: #11ffaa;width: 50px;">D</span>
        </div>
      </div>
    </div>

    <div class="title">flex-shrink</div>
    <div class="content">
      <div class="card" style="width:calc(100% - 24px)">
        <div style="display: flex;flex-direction: row;height:100%">
          <span style="flex-basis:1000px;flex-shrink:1;background-color: #00ddaa;">A</span>
          <span style="flex-basis:300px;flex-shrink:2;background-color: #00ddff;">B</span>
          <span style="flex-basis:300px;flex-shrink:0;background-color: #00ff00;">C</span>
          <span style="flex-basis:300px;flex-shrink:3;background-color: #11ffaa;">D</span>
        </div>
      </div>
    </div>

    <div class="title">order</div>
    <div class="content">
      <div class="card" style="width:calc(100% - 24px)">
        <div style="display: flex;flex-direction: row;height:100%">
          <span style="flex-basis:1000px;flex-shrink:1;order:2;background-color: #00ddaa;">A</span>
          <span style="flex-basis:300px;flex-shrink:2;order:1;background-color: #00ddff;">B</span>
          <span style="flex-basis:300px;flex-shrink:0;order:3;background-color: #00ff00;">C</span>
          <span style="flex-basis:300px;flex-shrink:3;order:4;background-color: #11ffaa;">D</span>
        </div>
      </div>
    </div>

  </div>
</body>

</html>