01-HTML+CSS/10-CSS的浮动和flex布局

CSS的浮动和flex布局

浮动案例

浮动案例三.png
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .content {
        width: 1190px;
        margin: 0 auto;
      }

      .wrapper {
        margin-right: -10px;
      }

      .item {
        width: 290px;
        background-color: purple;
        float: left;
        margin-bottom: 10px;
        margin-right: 10px;
      }

      .item.left {
        height: 370px;
      }

      .item.right {
        height: 180px;
      }
    </style>
  </head>
  <body>
    <div class="content">
      <div class="wrapper">
        <div class="item left"></div>
        <div class="item left"></div>
        <div class="item right"></div>
        <div class="item right"></div>
        <div class="item right"></div>
        <div class="item right"></div>
        <div class="item right"></div>
        <div class="item right"></div>
        <div class="item right"></div>
        <div class="item right"></div>
        <div class="item right"></div>
        <div class="item right"></div>
        <div class="item right"></div>
        <div class="item right"></div>
        <div class="item right"></div>
        <div class="item right"></div>
        <div class="item right"></div>
        <div class="item right"></div>
        <div class="item right"></div>
        <div class="item right"></div>
        <div class="item right"></div>
        <div class="item right"></div>
        <div class="item right"></div>
        <div class="item right"></div>
        <div class="item right"></div>
        <div class="item right"></div>
      </div>
    </div>
  </body>
</html>
浮动案例四.png

该思路有点问题,突出边框

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .content {
        width: 1100px;
        margin: 0 auto;
        height: 800px;
        background-color: orange;
      }

      .box {
        border: 1px solid #000;
        margin-right: -1px;
        height: 168px;
        border-right: none;
      }

      .item {
        width: 220px;
        height: 168px;
        float: left;
        border-right: 1px solid #000;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <div class="content">
      <div class="box">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
      </div>
    </div>
  </body>
</html>

小插曲 margin-left重叠

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      span,
      strong {
        float: left;
      }

      span {
        background-color: #f00;
      }

      strong {
        background-color: #0f0;
        margin-left: -10px;
      }
    </style>
  </head>
  <body>
    <span>我是span元素</span>
    <strong>我是strong元素</strong>
  </body>
</html>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .content {
        width: 1100px;
        margin: 0 auto;
        height: 800px;
        background-color: orange;
      }

      .item {
        width: 221px;
        height: 168px;
        float: left;
        background-color: purple;
        border: 1px solid #000;
        margin-left: -1px;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <div class="content">
      <div class="box">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
      </div>
    </div>
  </body>
</html>

正规思路一

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .content {
        width: 1100px;
        margin: 0 auto;
        height: 800px;
        background-color: orange;
      }

      .box {
        margin-left: 1px;
      }

      .item {
        width: 221px;
        height: 168px;
        float: left;
        background-color: purple;
        border: 1px solid #000;
        margin-left: -1px;
        box-sizing: border-box;
      }

      .item.first {
        width: 220px;
      }
    </style>
  </head>
  <body>
    <div class="content">
      <div class="box">
        <div class="item first">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
      </div>
    </div>
  </body>
</html>

正规思路二

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .content {
        width: 1100px;
        margin: 0 auto;
        height: 800px;
        background-color: orange;
      }

      /* .box {
        margin-left: 1px;
      } */

      .item {
        width: 221px;
        height: 168px;
        float: left;
        background-color: purple;
        border: 1px solid #000;
        margin-right: -1px;
        box-sizing: border-box;
      }

      .item.first {
        width: 220px;
      }
    </style>
  </head>
  <body>
    <div class="content">
      <div class="box">
        <div class="item first">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
      </div>
    </div>
  </body>
</html>

清除浮动

高度塌陷

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .content {
        width: 1190px;
        margin: 0 auto;
        background-color: #f00;
      }

      .wrapper {
        margin-right: -10px;
      }

      .item {
        width: 290px;
        background-color: purple;
        float: left;
        margin-bottom: 10px;
        margin-right: 10px;
      }

      .item.left {
        height: 370px;
      }

      .item.right {
        height: 180px;
      }

      .other {
        height: 100px;
        background-color: #0f0;
      }
    </style>
  </head>
  <body>
    <div class="content">
      <div class="wrapper">
        <div class="item left"></div>
        <div class="item left"></div>
        <div class="item right"></div>
        <div class="item right"></div>
        <div class="item right"></div>
        <div class="item right"></div>
      </div>
    </div>
    <div class="other"></div>
  </body>
</html>

高度塌陷解决方案

  • 清楚浮动的目的是
    • 让父元素计算总高度的时候,把浮动子元素的高度算进去

清楚浮动的方案

给父元素设置固定高度

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .content {
        width: 1190px;
        margin: 0 auto;
        background-color: #f00;
        height: 560px;
      }

      .wrapper {
        margin-right: -10px;
      }

      .item {
        width: 290px;
        background-color: purple;
        float: left;
        margin-bottom: 10px;
        margin-right: 10px;
      }

      .item.left {
        height: 370px;
      }

      .item.right {
        height: 180px;
      }

      .other {
        height: 100px;
        background-color: #0f0;
      }
    </style>
  </head>
  <body>
    <div class="content">
      <div class="wrapper">
        <div class="item left"></div>
        <div class="item left"></div>
        <div class="item right"></div>
        <div class="item right"></div>
        <div class="item right"></div>
        <div class="item right"></div>
        <div class="item right"></div>
        <div class="item right"></div>
      </div>
    </div>
    <div class="other"></div>
  </body>
</html>

添加一个空块级元素

  • 给父元素最后添加一个空的块级子元素,并且设置clear: both;
    • clear属性可以指定一个元素是否必须移动(清除浮动)到在他之前的浮动元素的下面
    • 取值
      • left
      • right
      • both
      • none
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .content {
        width: 1190px;
        margin: 0 auto;
        background-color: #f00;
      }

      .wrapper {
        margin-right: -10px;
      }

      .item {
        width: 290px;
        background-color: purple;
        float: left;
        margin-bottom: 10px;
        margin-right: 10px;
      }

      .item.left {
        height: 370px;
      }

      .item.right {
        height: 180px;
      }

      .other {
        height: 100px;
        background-color: #0f0;
      }

      .line {
        height: 0;
        clear: both;
      }
    </style>
  </head>
  <body>
    <div class="content">
      <div class="wrapper">
        <div class="item left"></div>
        <div class="item left"></div>
        <div class="item right"></div>
        <div class="item right"></div>
        <div class="item right"></div>
        <div class="item right"></div>
        <div class="item right"></div>
        <div class="item right"></div>
        <div class="line"></div>
      </div>
    </div>
    <div class="other"></div>
  </body>
</html>

父元素设置::after

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .content {
        width: 1190px;
        margin: 0 auto;
        background-color: #f00;
      }

      .wrapper {
        margin-right: -10px;
      }

      .item {
        width: 290px;
        background-color: purple;
        float: left;
        margin-bottom: 10px;
        margin-right: 10px;
      }

      .item.left {
        height: 370px;
      }

      .item.right {
        height: 180px;
      }

      .other {
        height: 100px;
        background-color: #0f0;
      }

      .bin::after {
        content: "";
        display: block;
        clear: both;
      }
    </style>
  </head>
  <body>
    <div class="content">
      <div class="wrapper bin">
        <div class="item left"></div>
        <div class="item left"></div>
        <div class="item right"></div>
        <div class="item right"></div>
        <div class="item right"></div>
        <div class="item right"></div>
        <div class="item right"></div>
        <div class="item right"></div>
      </div>
    </div>
    <div class="other"></div>
  </body>
</html>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .content {
        width: 1190px;
        margin: 0 auto;
        background-color: #f00;
      }

      .wrapper {
        margin-right: -10px;
      }

      .item {
        width: 290px;
        background-color: purple;
        float: left;
        margin-bottom: 10px;
        margin-right: 10px;
      }

      .item.left {
        height: 370px;
      }

      .item.right {
        height: 180px;
      }

      .other {
        height: 100px;
        background-color: #0f0;
      }

      .clearFix::after {
        content: "";
        display: block;
        clear: both;
      }
    </style>
  </head>
  <body>
    <div class="content">
      <div class="wrapper clearFix">
        <div class="item left"></div>
        <div class="item left"></div>
        <div class="item right"></div>
        <div class="item right"></div>
        <div class="item right"></div>
        <div class="item right"></div>
        <div class="item right"></div>
        <div class="item right"></div>
      </div>
    </div>
    <div class="other"></div>
  </body>
</html>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .content {
        width: 1190px;
        margin: 0 auto;
        background-color: #f00;
      }

      .wrapper {
        margin-right: -10px;
      }

      .item {
        width: 290px;
        background-color: purple;
        float: left;
        margin-bottom: 10px;
        margin-right: 10px;
      }

      .item.left {
        height: 370px;
      }

      .item.right {
        height: 180px;
      }

      .other {
        height: 100px;
        background-color: #0f0;
      }

      .clearFix::after {
        content: "";
        display: block;
        clear: both;
        /* 浏览器兼容 */
        visibility: hidden;
        height: 01;
      }

      /* 兼容IE6/7 */
      .clearFix {
        *zoom: 1;
      }
    </style>
  </head>
  <body>
    <div class="content">
      <div class="wrapper clearFix">
        <div class="item left"></div>
        <div class="item left"></div>
        <div class="item right"></div>
        <div class="item right"></div>
        <div class="item right"></div>
        <div class="item right"></div>
        <div class="item right"></div>
        <div class="item right"></div>
      </div>
    </div>
    <div class="other"></div>
  </body>
</html>

flex布局

  • flexbox
    • 弹性盒子是一种用于按行或按列布局元素的一维布局方案
    • 元素可以膨胀以填充额外的空间,收缩以适应更小的空间
    • 通常我们使用flexbox来进行布局的方案称之为flex布局

display: flex;

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        display: flex;
        background-color: #f00;
      }
    </style>
  </head>
  <body>
    aaaa
    <div class="box">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
    </div>
    bbb
  </body>
</html>

display: inline-flex;

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        display: inline-flex;
        background-color: #f00;
      }
    </style>
  </head>
  <body>
    aaaa
    <div class="box">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
    </div>
    bbb
  </body>
</html>

flex

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        display: flex;
        background-color: #f00;
        width: 200px;
        height: 200px;
        flex-wrap: wrap;
      }

      .item {
        width: 60px;
        height: 60px;
        background-color: orange;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
      <div class="item">4</div>
      <div class="item">5</div>
      <div class="item">4</div>
      <div class="item">5</div>
    </div>
  </body>
</html>

flex container

  • flex-flow
  • flex-direction
  • flex-wrap
  • justify-content
  • align-items
  • align-content

flex items

  • flex-grow
  • flex-basis
  • flex-shrink
  • order
  • align-self
  • flex

flex-direction

  • 修改主轴的方向
    • 属性值
      • row
      • row-reverse
      • column
      • column-reverse
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .container {
        display: flex;
        width: 500px;
        height: 500px;
        background-color: orange;
        /* 默认值 */
        /* flex-direction: row; */
        flex-direction: column;
      }

      .item {
        width: 120px;
        height: 120px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item item1">1</div>
      <div class="item item2">2</div>
      <div class="item item3">3</div>
      <div class="item item4">4</div>
      <div class="item item5">5</div>
    </div>
    <!-- <script src="./itemRandomColor.js"></script> -->
    <script>
      function getRandomColor() {
        return `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${
          Math.random() * 255
        })`;
      }

      const itemEls = document.querySelectorAll(".item");
      for (const item of itemEls) {
        item.style.backgroundColor = getRandomColor();
      }
    </script>
  </body>
</html>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .container {
        display: flex;
        width: 500px;
        height: 500px;
        background-color: orange;
        /* 默认值 */
        /* flex-direction: row; */
        /* flex-direction: column; */
        flex-direction: row-reverse;
      }

      .item {
        width: 120px;
        height: 120px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item item1">1</div>
      <div class="item item2">2</div>
      <div class="item item3">3</div>
      <div class="item item4">4</div>
      <div class="item item5">5</div>
    </div>
    <!-- <script src="./itemRandomColor.js"></script> -->
    <script>
      function getRandomColor() {
        return `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${
          Math.random() * 255
        })`;
      }

      const itemEls = document.querySelectorAll(".item");
      for (const item of itemEls) {
        item.style.backgroundColor = getRandomColor();
      }
    </script>
  </body>
</html>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .container {
        display: flex;
        width: 500px;
        height: 500px;
        background-color: orange;
        /* 默认值 */
        /* flex-direction: row; */
        /* flex-direction: column; */
        /* flex-direction: row-reverse; */
        flex-direction: column-reverse;
      }

      .item {
        width: 120px;
        height: 120px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item item1">1</div>
      <div class="item item2">2</div>
      <div class="item item3">3</div>
      <div class="item item4">4</div>
      <div class="item item5">5</div>
    </div>
    <script>
      function getRandomColor() {
        return `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${
          Math.random() * 255
        })`;
      }

      const itemEls = document.querySelectorAll(".item");
      for (const item of itemEls) {
        item.style.backgroundColor = getRandomColor();
      }
    </script>
  </body>
</html>

flex-wrap

  • 是单行还是多行
    • nowrap 不换行 (默认值)
    • wrap
    • wrap-reverse
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .container {
        display: flex;
        width: 500px;
        height: 500px;
        background-color: orange;
        /* 默认值 */
        flex-wrap: nowrap;
        /* flex-wrap: wrap; */
      }

      .item {
        width: 120px;
        height: 120px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item item1">1</div>
      <div class="item item2">2</div>
      <div class="item item3">3</div>
      <div class="item item4">4</div>
      <div class="item item5">5</div>
      <div class="item item5">6</div>
    </div>
    <script>
      function getRandomColor() {
        return `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${
          Math.random() * 255
        })`;
      }

      const itemEls = document.querySelectorAll(".item");
      for (const item of itemEls) {
        item.style.backgroundColor = getRandomColor();
      }
    </script>
  </body>
</html>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .container {
        display: flex;
        width: 500px;
        height: 500px;
        background-color: orange;
        /* 默认值 */
        /* flex-wrap: nowrap; */
        flex-wrap: wrap;
      }

      .item {
        width: 120px;
        height: 120px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item item1">1</div>
      <div class="item item2">2</div>
      <div class="item item3">3</div>
      <div class="item item4">4</div>
      <div class="item item5">5</div>
      <div class="item item5">6</div>
    </div>
    <script>
      function getRandomColor() {
        return `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${
          Math.random() * 255
        })`;
      }

      const itemEls = document.querySelectorAll(".item");
      for (const item of itemEls) {
        item.style.backgroundColor = getRandomColor();
      }
    </script>
  </body>
</html>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .container {
        display: flex;
        width: 500px;
        height: 500px;
        background-color: orange;
        /* 默认值 */
        /* flex-wrap: nowrap; */
        /* flex-wrap: wrap; */
        flex-wrap: wrap-reverse;
      }

      .item {
        width: 120px;
        height: 120px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item item1">1</div>
      <div class="item item2">2</div>
      <div class="item item3">3</div>
      <div class="item item4">4</div>
      <div class="item item5">5</div>
      <div class="item item5">6</div>
    </div>
    <script>
      function getRandomColor() {
        return `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${
          Math.random() * 255
        })`;
      }

      const itemEls = document.querySelectorAll(".item");
      for (const item of itemEls) {
        item.style.backgroundColor = getRandomColor();
      }
    </script>
  </body>
</html>

flex-flow

  • flex-direction和flex-wrap的简写属性
    • 任意顺序,并且都可以省略
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .container {
        display: flex;
        width: 500px;
        height: 500px;
        background-color: orange;
        /* 默认值 */
        /* flex-wrap: nowrap; */
        /* flex-wrap: wrap; */
        /* flex-wrap: wrap-reverse; */
        flex-flow: wrap;
      }

      .item {
        width: 120px;
        height: 120px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item item1">1</div>
      <div class="item item2">2</div>
      <div class="item item3">3</div>
      <div class="item item4">4</div>
      <div class="item item5">5</div>
      <div class="item item5">6</div>
    </div>
    <script>
      function getRandomColor() {
        return `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${
          Math.random() * 255
        })`;
      }

      const itemEls = document.querySelectorAll(".item");
      for (const item of itemEls) {
        item.style.backgroundColor = getRandomColor();
      }
    </script>
  </body>
</html>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .container {
        display: flex;
        width: 500px;
        height: 500px;
        background-color: orange;
        /* 默认值 */
        /* flex-wrap: nowrap; */
        /* flex-wrap: wrap; */
        /* flex-wrap: wrap-reverse; */
        flex-flow: row-reverse wrap;
      }

      .item {
        width: 120px;
        height: 120px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item item1">1</div>
      <div class="item item2">2</div>
      <div class="item item3">3</div>
      <div class="item item4">4</div>
      <div class="item item5">5</div>
      <div class="item item5">6</div>
    </div>
    <script>
      function getRandomColor() {
        return `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${
          Math.random() * 255
        })`;
      }

      const itemEls = document.querySelectorAll(".item");
      for (const item of itemEls) {
        item.style.backgroundColor = getRandomColor();
      }
    </script>
  </body>
</html>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .container {
        display: flex;
        width: 500px;
        height: 500px;
        background-color: orange;
        /* flex-direction: row-reverse;
        flex-wrap: wrap-reverse; */
        flex-flow: row-reverse wrap-reverse;
      }

      .item {
        width: 120px;
        height: 120px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item item1">1</div>
      <div class="item item2">2</div>
      <div class="item item3">3</div>
    </div>
    <script>
      function getRandomColor() {
        return `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${
          Math.random() * 255
        })`;
      }

      const itemEls = document.querySelectorAll(".item");
      for (const item of itemEls) {
        item.style.backgroundColor = getRandomColor();
      }
    </script>
  </body>
</html>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .container {
        display: flex;
        width: 500px;
        height: 500px;
        background-color: orange;
        /* flex-direction: row-reverse;
        flex-wrap: wrap-reverse; */
        /* flex-flow: row-reverse wrap-reverse; */
        flex-flow: column-reverse wrap-reverse;
      }

      .item {
        width: 120px;
        height: 120px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item item1">1</div>
      <div class="item item2">2</div>
      <div class="item item3">3</div>
    </div>
    <script>
      function getRandomColor() {
        return `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${
          Math.random() * 255
        })`;
      }

      const itemEls = document.querySelectorAll(".item");
      for (const item of itemEls) {
        item.style.backgroundColor = getRandomColor();
      }
    </script>
  </body>
</html>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .container {
        display: flex;
        width: 500px;
        height: 500px;
        background-color: orange;
        /* flex-direction: row-reverse;
        flex-wrap: wrap-reverse; */
        /* flex-flow: row-reverse wrap-reverse; */
        flex-flow: column wrap-reverse;
      }

      .item {
        width: 120px;
        height: 120px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item item1">1</div>
      <div class="item item2">2</div>
      <div class="item item3">3</div>
    </div>
    <script>
      function getRandomColor() {
        return `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${
          Math.random() * 255
        })`;
      }

      const itemEls = document.querySelectorAll(".item");
      for (const item of itemEls) {
        item.style.backgroundColor = getRandomColor();
      }
    </script>
  </body>
</html>

justify-content

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .container {
        display: flex;
        width: 500px;
        height: 500px;
        background-color: orange;
        /* justify-content: flex-start; */
        /* justify-content: flex-end; */
        /* justify-content: center; */
        justify-content: space-around;
        /* justify-content: space-between; */
        /* justify-content: space-evenly; */
      }

      .item {
        width: 120px;
        height: 120px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item item1">1</div>
      <div class="item item2">2</div>
      <div class="item item3">3</div>
    </div>
    <script>
      function getRandomColor() {
        return `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${
          Math.random() * 255
        })`;
      }

      const itemEls = document.querySelectorAll(".item");
      for (const item of itemEls) {
        item.style.backgroundColor = getRandomColor();
      }
    </script>
  </body>
</html>

align-items

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .container {
        display: flex;
        width: 500px;
        height: 500px;
        background-color: orange;
        /* align-items: flex-start; */
        /* align-items: center; */
        /* align-items: flex-end; */
        /* align-items: baseline; */
        align-items: stretch;
      }

      .item {
        width: 120px;
        height: 120px;
      }

      .item1 {
        height: 80px;
        /* baseline属性值专用 */
        font-size: 30px;
      }

      .item2 {
        height: 150px;
        /* baseline属性值专用 */
        font-size: 40px;
      }

      .item3 {
        height: 60px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item item1">1</div>
      <div class="item item2">2</div>
      <div class="item item3">3</div>
      <div class="item item4">4</div>
    </div>
    <script>
      function getRandomColor() {
        return `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${
          Math.random() * 255
        })`;
      }

      const itemEls = document.querySelectorAll(".item");
      for (const item of itemEls) {
        item.style.backgroundColor = getRandomColor();
      }
    </script>
  </body>
</html>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .container {
        display: flex;
        width: 500px;
        height: 500px;
        background-color: orange;
        /* align-items: flex-start; */
        /* align-items: center; */
        /* align-items: flex-end; */
        /* align-items: baseline; */
        align-items: stretch;
      }

      .item {
        width: 120px;
        /* height默认为auto,可以不写 */
        height: auto;
      }

      /* .item1 {
        height: 80px;
      }

      .item2 {
        height: 150px;
      }

      .item3 {
        height: 60px;
      } */
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item item1">1</div>
      <div class="item item2">2</div>
      <div class="item item3">3</div>
      <div class="item item4">4</div>
    </div>
    <script>
      function getRandomColor() {
        return `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${
          Math.random() * 255
        })`;
      }

      const itemEls = document.querySelectorAll(".item");
      for (const item of itemEls) {
        item.style.backgroundColor = getRandomColor();
      }
    </script>
  </body>
</html>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .container {
        display: flex;
        width: 500px;
        height: 500px;
        background-color: orange;
        /* align-items: flex-start; */
        /* align-items: center; */
        /* align-items: flex-end; */
        /* align-items: baseline; */
        /* align-items: stretch; */
        align-items: normal;
      }

      .item {
        width: 120px;
      }

      /* .item1 {
        height: 80px;
      }

      .item2 {
        height: 150px;
      }

      .item3 {
        height: 60px;
      } */
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item item1">1</div>
      <div class="item item2">2</div>
      <div class="item item3">3</div>
      <div class="item item4">4</div>
    </div>
    <script>
      function getRandomColor() {
        return `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${
          Math.random() * 255
        })`;
      }

      const itemEls = document.querySelectorAll(".item");
      for (const item of itemEls) {
        item.style.backgroundColor = getRandomColor();
      }
    </script>
  </body>
</html>

align-content

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .container {
        display: flex;
        width: 500px;
        height: 500px;
        background-color: orange;
        flex-wrap: wrap;
        /* align-content: flex-start; */
        /* align-content: flex-end; */
        /* align-content: center; */
        /* align-content: space-between; */
        /* align-content: space-around; */
        align-content: space-evenly;
      }

      .item {
        width: 120px;
        height: 120px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item item1">1</div>
      <div class="item item2">2</div>
      <div class="item item3">3</div>
      <div class="item item4">4</div>
      <div class="item item2">2</div>
      <div class="item item3">3</div>
      <div class="item item4">4</div>
      <div class="item item2">2</div>
      <div class="item item3">3</div>
      <div class="item item4">4</div>
    </div>
    <script>
      function getRandomColor() {
        return `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${
          Math.random() * 255
        })`;
      }

      const itemEls = document.querySelectorAll(".item");
      for (const item of itemEls) {
        item.style.backgroundColor = getRandomColor();
      }
    </script>
  </body>
</html>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .container {
        display: flex;
        width: 500px;
        height: 500px;
        background-color: orange;
        flex-wrap: wrap;
        justify-content: space-between;
        align-content: flex-start;
        /* align-content: flex-end; */
        /* align-content: center; */
        /* align-content: space-between; */
        /* align-content: space-around; */
        /* align-content: space-evenly; */
      }

      .item {
        width: 120px;
        height: 120px;
        margin-bottom: 10px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item item1">1</div>
      <div class="item item2">2</div>
      <div class="item item3">3</div>
      <div class="item item4">4</div>
      <div class="item item2">2</div>
      <div class="item item3">3</div>
      <div class="item item4">4</div>
      <div class="item item2">2</div>
      <div class="item item3">3</div>
      <div class="item item4">4</div>
    </div>
    <script>
      function getRandomColor() {
        return `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${
          Math.random() * 255
        })`;
      }

      const itemEls = document.querySelectorAll(".item");
      for (const item of itemEls) {
        item.style.backgroundColor = getRandomColor();
      }
    </script>
  </body>
</html>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .container {
        display: flex;
        width: 500px;
        height: 500px;
        background-color: orange;
        flex-wrap: wrap;
        justify-content: space-between;
        /* align-content: stretch;
        align-content: normal; */
        /* 拉伸 */
        /* align-content: stretch; */
        /* 拉伸 */
        align-content: normal;
      }

      .item {
        width: 120px;
        /* height: 120px; */
        margin-bottom: 10px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item item1">1</div>
      <div class="item item2">2</div>
      <div class="item item3">3</div>
      <div class="item item4">4</div>
      <div class="item item2">2</div>
      <div class="item item3">3</div>
      <div class="item item4">4</div>
      <div class="item item2">2</div>
      <div class="item item3">3</div>
      <div class="item item4">4</div>
    </div>
    <script>
      function getRandomColor() {
        return `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${
          Math.random() * 255
        })`;
      }

      const itemEls = document.querySelectorAll(".item");
      for (const item of itemEls) {
        item.style.backgroundColor = getRandomColor();
      }
    </script>
  </body>
</html>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .container {
        display: flex;
        width: 500px;
        height: 500px;
        background-color: orange;
        flex-wrap: wrap;
        justify-content: space-between;
        align-content: center;
      }

      .item {
        width: 120px;
        height: 120px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item item1">1</div>
      <div class="item item2">2</div>
      <div class="item item3">3</div>
      <div class="item item4">4</div>
      <div class="item item2">2</div>
      <div class="item item3">3</div>
      <div class="item item4">4</div>
      <div class="item item2">2</div>
      <div class="item item3">3</div>
      <div class="item item4">4</div>
    </div>
    <script>
      function getRandomColor() {
        return `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${
          Math.random() * 255
        })`;
      }

      const itemEls = document.querySelectorAll(".item");
      for (const item of itemEls) {
        item.style.backgroundColor = getRandomColor();
      }
    </script>
  </body>
</html>

order

  • item的排列顺序
    • 默认值 0
    • 整数
      • 数值越大,越靠后
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .container {
        display: flex;
        width: 500px;
        height: 500px;
        background-color: orange;
      }

      .item {
        width: 120px;
        height: 120px;
      }

      .item1 {
        order: 5;
      }

      .item2 {
        order: 3;
      }

      .item3 {
        order: 9;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item item1">1</div>
      <div class="item item2">2</div>
      <div class="item item3">3</div>
    </div>
    <script>
      function getRandomColor() {
        return `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${
          Math.random() * 255
        })`;
      }

      const itemEls = document.querySelectorAll(".item");
      for (const item of itemEls) {
        item.style.backgroundColor = getRandomColor();
      }
    </script>
  </body>
</html>

align-self

  • 可以覆盖container设置的align-items
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .container {
        display: flex;
        width: 500px;
        height: 500px;
        background-color: orange;
        align-items: center;
      }

      .item {
        width: 120px;
        height: 120px;
      }

      .item1 {
        height: 90px;
      }

      .item2 {
        height: 150px;
        align-self: flex-start;
      }

      .item3 {
        height: 120px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item item1">1</div>
      <div class="item item2">2</div>
      <div class="item item3">3</div>
    </div>
    <script>
      function getRandomColor() {
        return `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${
          Math.random() * 255
        })`;
      }

      const itemEls = document.querySelectorAll(".item");
      for (const item of itemEls) {
        item.style.backgroundColor = getRandomColor();
      }
    </script>
  </body>
</html>

flex-grow

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .container {
        display: flex;
        width: 500px;
        height: 500px;
        background-color: orange;
      }

      .item {
        width: 120px;
        height: 120px;
        flex-grow: 1;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item item1">1</div>
      <div class="item item2">2</div>
      <div class="item item3">3</div>
    </div>
    <script>
      function getRandomColor() {
        return `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${
          Math.random() * 255
        })`;
      }

      const itemEls = document.querySelectorAll(".item");
      for (const item of itemEls) {
        item.style.backgroundColor = getRandomColor();
      }
    </script>
  </body>
</html>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .container {
        display: flex;
        width: 500px;
        height: 500px;
        background-color: orange;
      }

      .item {
        width: 120px;
        height: 120px;
        /* 默认值 */
        /* flex-grow: 0; */
        flex-grow: 1;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item item1">1</div>
      <div class="item item2">2</div>
      <div class="item item3">3</div>
    </div>
    <script>
      function getRandomColor() {
        return `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${
          Math.random() * 255
        })`;
      }

      const itemEls = document.querySelectorAll(".item");
      for (const item of itemEls) {
        item.style.backgroundColor = getRandomColor();
      }
    </script>
  </body>
</html>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .container {
        display: flex;
        width: 500px;
        height: 500px;
        background-color: orange;
      }

      .item {
        width: 120px;
        height: 120px;
        /* flex-grow: 1; */
      }

      .item1 {
        flex-grow: 1;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item item1">1</div>
      <div class="item item2">2</div>
      <div class="item item3">3</div>
    </div>
    <script>
      function getRandomColor() {
        return `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${
          Math.random() * 255
        })`;
      }

      const itemEls = document.querySelectorAll(".item");
      for (const item of itemEls) {
        item.style.backgroundColor = getRandomColor();
      }
    </script>
  </body>
</html>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .container {
        display: flex;
        width: 500px;
        height: 500px;
        background-color: orange;
      }

      .item {
        width: 120px;
        height: 120px;
        flex-grow: 1;
      }

      /* .item1 {
        flex-grow: 1;
      } */
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item item1">1</div>
      <div class="item item2">2</div>
      <div class="item item3">3</div>
    </div>
    <script>
      function getRandomColor() {
        return `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${
          Math.random() * 255
        })`;
      }

      const itemEls = document.querySelectorAll(".item");
      for (const item of itemEls) {
        item.style.backgroundColor = getRandomColor();
      }
    </script>
  </body>
</html>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .container {
        display: flex;
        width: 500px;
        height: 500px;
        background-color: orange;
      }

      .item {
        width: 120px;
        height: 120px;
        flex-grow: 1;
      }

      .item1 {
        flex-grow: 2;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item item1">1</div>
      <div class="item item2">2</div>
      <div class="item item3">3</div>
    </div>
    <script>
      function getRandomColor() {
        return `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${
          Math.random() * 255
        })`;
      }

      const itemEls = document.querySelectorAll(".item");
      for (const item of itemEls) {
        item.style.backgroundColor = getRandomColor();
      }
    </script>
  </body>
</html>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .container {
        display: flex;
        width: 500px;
        height: 500px;
        background-color: orange;
      }

      .item {
        width: 120px;
        height: 120px;
        flex-grow: 0;
      }

      .item1 {
        /* flex-grow: 1; */
        flex-grow: 10000;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item item1">1</div>
      <div class="item item2">2</div>
      <div class="item item3">3</div>
    </div>
    <script>
      function getRandomColor() {
        return `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${
          Math.random() * 255
        })`;
      }

      const itemEls = document.querySelectorAll(".item");
      for (const item of itemEls) {
        item.style.backgroundColor = getRandomColor();
      }
    </script>
  </body>
</html>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .container {
        display: flex;
        width: 500px;
        height: 500px;
        background-color: orange;
      }

      .item {
        width: 120px;
        height: 120px;
        flex-grow: 0;
      }

      .item1 {
        flex-grow: 1;
        max-width: 150px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item item1">1</div>
      <div class="item item2">2</div>
      <div class="item item3">3</div>
    </div>
    <script>
      function getRandomColor() {
        return `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${
          Math.random() * 255
        })`;
      }

      const itemEls = document.querySelectorAll(".item");
      for (const item of itemEls) {
        item.style.backgroundColor = getRandomColor();
      }
    </script>
  </body>
</html>

flex-shrink

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .container {
        display: flex;
        width: 500px;
        height: 500px;
        background-color: orange;
      }

      .item {
        width: 120px;
        height: 120px;
        /* 默认值 */
        /* flex-shrink: 1; */
        /* 不收缩 */
        flex-shrink: 0;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item item1">1</div>
      <div class="item item2">2</div>
      <div class="item item3">3</div>
      <div class="item item1">1</div>
      <div class="item item2">2</div>
      <div class="item item3">3</div>
      <div class="item item1">1</div>
      <div class="item item2">2</div>
      <div class="item item3">3</div>
      <div class="item item1">1</div>
      <div class="item item2">2</div>
      <div class="item item3">3</div>
    </div>
    <script>
      function getRandomColor() {
        return `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${
          Math.random() * 255
        })`;
      }

      const itemEls = document.querySelectorAll(".item");
      for (const item of itemEls) {
        item.style.backgroundColor = getRandomColor();
      }
    </script>
  </body>
</html>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .container {
        display: flex;
        width: 500px;
        height: 500px;
        background-color: orange;
      }

      .item {
        width: 120px;
        height: 120px;
        /* 默认值 */
        /* flex-shrink: 1; */
        /* 不收缩 */
        flex-shrink: 0;
      }

      .item1,
      .item2 {
        flex-shrink: 1;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item item1">1</div>
      <div class="item item2">2</div>
      <div class="item item3">3</div>
      <div class="item item4">1</div>
      <div class="item item5">2</div>
    </div>
    <script>
      function getRandomColor() {
        return `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${
          Math.random() * 255
        })`;
      }

      const itemEls = document.querySelectorAll(".item");
      for (const item of itemEls) {
        item.style.backgroundColor = getRandomColor();
      }
    </script>
  </body>
</html>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .container {
        display: flex;
        width: 500px;
        height: 500px;
        background-color: orange;
      }

      .item {
        width: 120px;
        height: 120px;
        /* 默认值 */
        /* flex-shrink: 1; */
        /* 不收缩 */
        flex-shrink: 0;
      }

      .item1,
      .item2 {
        flex-shrink: 1;
      }

      .item1 {
        min-width: 100px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item item1">1</div>
      <div class="item item2">2</div>
      <div class="item item3">3</div>
      <div class="item item4">1</div>
      <div class="item item5">2</div>
    </div>
    <script>
      function getRandomColor() {
        return `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${
          Math.random() * 255
        })`;
      }

      const itemEls = document.querySelectorAll(".item");
      for (const item of itemEls) {
        item.style.backgroundColor = getRandomColor();
      }
    </script>
  </body>
</html>

flex-basis

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .container {
        display: flex;
        width: 500px;
        height: 500px;
        background-color: orange;
      }

      .item {
        /* width: 120px; */
        flex-basis: 120px;
        height: 120px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item item1">1</div>
      <div class="item item2">2</div>
      <div class="item item3">3</div>
    </div>
    <script>
      function getRandomColor() {
        return `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${
          Math.random() * 255
        })`;
      }

      const itemEls = document.querySelectorAll(".item");
      for (const item of itemEls) {
        item.style.backgroundColor = getRandomColor();
      }
    </script>
  </body>
</html>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .container {
        display: flex;
        width: 500px;
        height: 500px;
        background-color: orange;
      }

      .item {
        /* width: 120px; */
        flex-basis: 120px;
        height: 120px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item item1">1</div>
      <div class="item item2">2我是why,哈哈哈,呵呵呵</div>
      <div class="item item3">3</div>
    </div>
    <script>
      function getRandomColor() {
        return `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${
          Math.random() * 255
        })`;
      }

      const itemEls = document.querySelectorAll(".item");
      for (const item of itemEls) {
        item.style.backgroundColor = getRandomColor();
      }
    </script>
  </body>
</html>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .container {
        display: flex;
        width: 500px;
        height: 500px;
        background-color: orange;
      }

      .item {
        /* width: 120px; */
        flex-basis: 120px;
        height: 120px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item item1">1</div>
      <div class="item item2">2我是coderwhy_why_hahahaha</div>
      <div class="item item3">3</div>
    </div>
    <script>
      function getRandomColor() {
        return `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${
          Math.random() * 255
        })`;
      }

      const itemEls = document.querySelectorAll(".item");
      for (const item of itemEls) {
        item.style.backgroundColor = getRandomColor();
      }
    </script>
  </body>
</html>

flex

单值语法: 值必须为以下其中之一:

  • 一个无单位数(<number>): 它会被当作flex:<number> 1 0; <flex-shrink>的值被假定为1,然后<flex-basis> 的值被假定为0。
  • 一个有效的宽度(width)值: 它会被当作 <flex-basis>的值。
  • 关键字none,auto或initial.

双值语法: 第一个值必须为一个无单位数,并且它会被当作 <flex-grow>的值。第二个值必须为以下之一:

  • 一个无单位数:它会被当作 <flex-shrink> 的值。
  • 一个有效的宽度值: 它会被当作 <flex-basis>的值。

三值语法:

  • 第一个值必须为一个无单位数,并且它会被当作 <flex-grow>的值。
  • 第二个值必须为一个无单位数,并且它会被当作 <flex-shrink>的值。
  • 第三个值必须为一个有效的宽度值, 并且它会被当作 <flex-basis> 的值。

取值

  • initial

元素会根据自身宽高设置尺寸。它会缩短自身以适应 flex 容器,但不会伸长并吸收 flex 容器中的额外自由空间来适应 flex 容器 。相当于将属性设置为flex: 0 1 auto。

  • auto

元素会根据自身的宽度与高度来确定尺寸,但是会伸长并吸收 flex 容器中额外的自由空间,也会缩短自身来适应 flex 容器。这相当于将属性设置为 flex: 1 1 auto.

none

元素会根据自身宽高来设置尺寸。它是完全非弹性的:既不会缩短,也不会伸长来适应 flex 容器。相当于将属性设置为flex: 0 0 auto。

<flex-grow>

定义 flex 项目的 flex-grow。负值无效。省略时默认值为 1。 (初始值为 0)

<flex-shrink>

定义 flex 元素的 flex-shrink 。负值无效。省略时默认值为1。 (初始值为 1)

  • <flex-basis>

定义 flex 元素的 flex-basis属性。若值为0,则必须加上单位,以免被视作伸缩性。省略时默认值为 0。(初始值为 auto)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .container {
        display: flex;
        width: 500px;
        height: 500px;
        background-color: orange;
      }

      .item {
        width: 120px;
        height: 120px;
        /* flex: flex-grow flex-shrink flex-basis */
        /* none: 0 0 auto */
        /* auto: 1 1 auto */
        /* flex: 1 1; */
        flex: 1 auto;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item item1">1</div>
      <div class="item item2">2我是coderwhy_why_hahahaha</div>
      <div class="item item3">3</div>
    </div>
    <script>
      function getRandomColor() {
        return `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${
          Math.random() * 255
        })`;
      }

      const itemEls = document.querySelectorAll(".item");
      for (const item of itemEls) {
        item.style.backgroundColor = getRandomColor();
      }
    </script>
  </body>
</html>

修复justify-content

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .container {
        display: flex;
        flex-wrap: wrap;
        width: 500px;
        background-color: orange;
      }

      .item {
        width: 110px;
        height: 140px;
        margin-right: 20px;
      }

      .item:nth-child(4n) {
        margin-right: 0;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item item1">1</div>
      <div class="item item2">2</div>
      <div class="item item3">3</div>
      <div class="item item1">1</div>
      <div class="item item2">2</div>
      <div class="item item3">3</div>
      <div class="item item1">1</div>
      <div class="item item2">2</div>
      <div class="item item3">3</div>
      <div class="item item1">1</div>
      <div class="item item2">2</div>
      <div class="item item3">3</div>
      <div class="item item1">1</div>
      <div class="item item3">3</div>
      <div class="item item1">1</div>
    </div>
    <script>
      function getRandomColor() {
        return `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${
          Math.random() * 255
        })`;
      }

      const itemEls = document.querySelectorAll(".item");
      for (const item of itemEls) {
        item.style.backgroundColor = getRandomColor();
      }
    </script>
  </body>
</html>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .container {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        width: 500px;
        background-color: orange;
      }

      .item {
        width: 110px;
        height: 140px;
      }

      .container > span {
        width: 110px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item item1">1</div>
      <div class="item item2">2</div>
      <div class="item item3">3</div>
      <div class="item item1">1</div>
      <div class="item item2">2</div>
      <div class="item item3">3</div>
      <div class="item item1">1</div>
      <div class="item item2">2</div>
      <div class="item item3">3</div>
      <!-- 列数 - 2 -->
      <span></span>
      <span></span>
    </div>
    <script>
      function getRandomColor() {
        return `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${
          Math.random() * 255
        })`;
      }

      const itemEls = document.querySelectorAll(".item");
      for (const item of itemEls) {
        item.style.backgroundColor = getRandomColor();
      }
    </script>
  </body>
</html>

内容回顾

一、浮动float

1.1.两个案例

  • 自己做一下
  • 第二个边框不要立马掌握

1.2.清楚浮动

  • after伪元素

1.3.多种布局对比

  • 标准流
  • 定位
  • 浮动

二、flex布局

2.1.认识flex布局

2.2.flex布局重要的概念

  • flex container
  • flex item
  • main axis/cross axis
  • main start/main end /cross start/cross end

2.4.flex container中的属性

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content

2.4.flex item中的属性

  • order
  • align-self
  • flex-grow
  • flex-shrinnk
  • flex-basis
  • flex

2.5.fle布局中justify-content最后一行布局问题

课后作业

一. 完成课堂所有的代码

  • 边框可以不做

二. 说出为什么需要清除浮动以及如何清除浮动

三. 利用浮动完成如下布局结构(完成结构即可)(选做)

浮动知识完成结构.jpg

四. 总结flex布局container和item的属性以及作用(重要)

五. 自己找3个案例练习

  • 案例一:其中用到元素定位
  • 案例二:其中用到浮动布局
  • 案例三:其中用到flex布局
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,602评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,442评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,878评论 0 344
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,306评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,330评论 5 373
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,071评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,382评论 3 400
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,006评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,512评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,965评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,094评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,732评论 4 323
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,283评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,286评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,512评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,536评论 2 354
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,828评论 2 345

推荐阅读更多精彩内容