01-HTML+CSS/10-CSS的浮動(dòng)和flex布局

CSS的浮動(dòng)和flex布局

浮動(dòng)案例

浮動(dòng)案例三.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>
浮動(dòng)案例四.png

該思路有點(diǎn)問題，突出邊框

<!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>

正規(guī)思路一

<!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>

正規(guī)思路二

<!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>

清除浮動(dòng)

高度塌陷

<!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>

高度塌陷解決方案

  • 清楚浮動(dòng)的目的是
    • 讓父元素計(jì)算總高度的時(shí)候羔巢，把浮動(dòng)子元素的高度算進(jìn)去

清楚浮動(dòng)的方案

給父元素設(shè)置固定高度

<!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>

添加一個(gè)空塊級(jí)元素

  • 給父元素最后添加一個(gè)空的塊級(jí)子元素，并且設(shè)置clear: both;
    • clear屬性可以指定一個(gè)元素是否必須移動(dòng)(清除浮動(dòng))到在他之前的浮動(dòng)元素的下面
    • 取值
      • 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>

父元素設(shè)置::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
    • 彈性盒子是一種用于按行或按列布局元素的一維布局方案
    • 元素可以膨脹以填充額外的空間，收縮以適應(yīng)更小的空間
    • 通常我們使用flexbox來進(jìn)行布局的方案稱之為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;
        /* 默認(rèn)值 */
        /* 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;
        /* 默認(rèn)值 */
        /* 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;
        /* 默認(rèn)值 */
        /* 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 不換行 (默認(rèn)值)
    • 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;
        /* 默認(rèn)值 */
        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;
        /* 默認(rèn)值 */
        /* 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;
        /* 默認(rèn)值 */
        /* 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的簡(jiǎn)寫屬性
    • 任意順序贷币，并且都可以省略
<!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;
        /* 默認(rèn)值 */
        /* 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;
        /* 默認(rèn)值 */
        /* 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默認(rèn)為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的排列順序
    • 默認(rèn)值 0
    • 整數(shù)
      • 數(shù)值越大苛萎，越靠后
<!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設(shè)置的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;
        /* 默認(rèn)值 */
        /* 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;
        /* 默認(rèn)值 */
        /* 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;
        /* 默認(rèn)值 */
        /* 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;
        /* 默認(rèn)值 */
        /* 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

單值語法: 值必須為以下其中之一:

  • 一個(gè)無單位數(shù)(<number>): 它會(huì)被當(dāng)作flex:<number> 1 0; <flex-shrink>的值被假定為1焰望，然后<flex-basis> 的值被假定為0骚亿。
  • 一個(gè)有效的寬度(width)值: 它會(huì)被當(dāng)作 <flex-basis>的值。
  • 關(guān)鍵字none熊赖，auto或initial.

雙值語法: 第一個(gè)值必須為一個(gè)無單位數(shù)来屠，并且它會(huì)被當(dāng)作 <flex-grow>的值。第二個(gè)值必須為以下之一：

  • 一個(gè)無單位數(shù)：它會(huì)被當(dāng)作 <flex-shrink> 的值震鹉。
  • 一個(gè)有效的寬度值: 它會(huì)被當(dāng)作 <flex-basis>的值俱笛。

三值語法:

  • 第一個(gè)值必須為一個(gè)無單位數(shù)，并且它會(huì)被當(dāng)作 <flex-grow>的值传趾。
  • 第二個(gè)值必須為一個(gè)無單位數(shù)嫂粟，并且它會(huì)被當(dāng)作 <flex-shrink>的值。
  • 第三個(gè)值必須為一個(gè)有效的寬度值墨缘， 并且它會(huì)被當(dāng)作 <flex-basis> 的值星虹。

取值

  • initial

元素會(huì)根據(jù)自身寬高設(shè)置尺寸。它會(huì)縮短自身以適應(yīng) flex 容器镊讼，但不會(huì)伸長(zhǎng)并吸收 flex 容器中的額外自由空間來適應(yīng) flex 容器 宽涌。相當(dāng)于將屬性設(shè)置為flex: 0 1 auto。

  • auto

元素會(huì)根據(jù)自身的寬度與高度來確定尺寸蝶棋，但是會(huì)伸長(zhǎng)并吸收 flex 容器中額外的自由空間卸亮，也會(huì)縮短自身來適應(yīng) flex 容器。這相當(dāng)于將屬性設(shè)置為 flex: 1 1 auto.

none

元素會(huì)根據(jù)自身寬高來設(shè)置尺寸玩裙。它是完全非彈性的：既不會(huì)縮短兼贸，也不會(huì)伸長(zhǎng)來適應(yīng) flex 容器。相當(dāng)于將屬性設(shè)置為flex: 0 0 auto吃溅。

<flex-grow>

定義 flex 項(xiàng)目的 flex-grow溶诞。負(fù)值無效。省略時(shí)默認(rèn)值為 1决侈。 (初始值為 0)

<flex-shrink>

定義 flex 元素的 flex-shrink 螺垢。負(fù)值無效。省略時(shí)默認(rèn)值為1。 (初始值為 1)

  • <flex-basis>

定義 flex 元素的 flex-basis屬性枉圃。若值為0功茴，則必須加上單位，以免被視作伸縮性孽亲。省略時(shí)默認(rèn)值為 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>

修復(fù)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>
      <!-- 列數(shù) - 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>

內(nèi)容回顧

一、浮動(dòng)float

1.1.兩個(gè)案例

  • 自己做一下
  • 第二個(gè)邊框不要立馬掌握

1.2.清楚浮動(dòng)

  • after偽元素

1.3.多種布局對(duì)比

  • 標(biāo)準(zhǔn)流
  • 定位
  • 浮動(dòng)

二返劲、flex布局

2.1.認(rèn)識(shí)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最后一行布局問題

課后作業(yè)

一. 完成課堂所有的代碼

  • 邊框可以不做

二. 說出為什么需要清除浮動(dòng)以及如何清除浮動(dòng)

三. 利用浮動(dòng)完成如下布局結(jié)構(gòu)（完成結(jié)構(gòu)即可）(選做)

浮動(dòng)知識(shí)完成結(jié)構(gòu).jpg

四. 總結(jié)flex布局container和item的屬性以及作用（重要）

五. 自己找3個(gè)案例練習(xí)

  • 案例一：其中用到元素定位
  • 案例二：其中用到浮動(dòng)布局
  • 案例三：其中用到flex布局
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 人面猴
    序言：七十年代末玲昧，一起剝皮案震驚了整個(gè)濱河市，隨后出現(xiàn)的幾起案子旭等，更是在濱河造成了極大的恐慌酌呆，老刑警劉巖，帶你破解...
    沈念sama閱讀 218,941評(píng)論 6贊 508
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件搔耕，死亡現(xiàn)場(chǎng)離奇詭異隙袁，居然都是意外死亡，警方通過查閱死者的電腦和手機(jī)弃榨，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,397評(píng)論 3贊 395
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門菩收，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人鲸睛，你說我怎么就攤上這事娜饵。” “怎么了官辈？”我有些...
    開封第一講書人閱讀 165,345評(píng)論 0贊 356
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵箱舞，是天一觀的道長(zhǎng)。 經(jīng)常有香客問我拳亿，道長(zhǎng)晴股，這世上最難降的妖魔是什么？ 我笑而不...
    開封第一講書人閱讀 58,851評(píng)論 1贊 295
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任肺魁，我火速辦了婚禮电湘，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘鹅经。我一直安慰自己寂呛，他們只是感情好，可當(dāng)我...
    茶點(diǎn)故事閱讀 67,868評(píng)論 6贊 392
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布瘾晃。 她就那樣靜靜地躺著贷痪，像睡著了一般。 火紅的嫁衣襯著肌膚如雪酗捌。 梳的紋絲不亂的頭發(fā)上呢诬，一...
    開封第一講書人閱讀 51,688評(píng)論 1贊 305
  • 城市分裂傳說
    那天涌哲，我揣著相機(jī)與錄音胖缤，去河邊找鬼尚镰。 笑死，一個(gè)胖子當(dāng)著我的面吹牛哪廓，可吹牛的內(nèi)容都是我干的狗唉。 我是一名探鬼主播，決...
    沈念sama閱讀 40,414評(píng)論 3贊 418
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼涡真，長(zhǎng)吁一口氣：“原來是場(chǎng)噩夢(mèng)啊……” “哼分俯！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起哆料，我...
    開封第一講書人閱讀 39,319評(píng)論 0贊 276
  • 萬榮殺人案實(shí)錄
    序言：老撾萬榮一對(duì)情侶失蹤缸剪，失蹤者是張志新（化名）和其女友劉穎，沒想到半個(gè)月后东亦，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體杏节，經(jīng)...
    沈念sama閱讀 45,775評(píng)論 1贊 315
  • ?護(hù)林員之死
    正文 獨(dú)居荒郊野嶺守林人離奇死亡，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,945評(píng)論 3贊 336
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年典阵，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了奋渔。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,096評(píng)論 1贊 350
  • 活死人
    序言：一個(gè)原本活蹦亂跳的男人離奇死亡壮啊，死狀恐怖嫉鲸，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情歹啼，我是刑警寧澤玄渗，帶...
    沈念sama閱讀 35,789評(píng)論 5贊 346
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布，位于F島的核電站狸眼，受9級(jí)特大地震影響藤树，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜份企，卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,437評(píng)論 3贊 331
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一也榄、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧司志，春花似錦甜紫、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,993評(píng)論 0贊 22
  • 一樁弒父案囚霸，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至激才，卻和暖如春拓型，著一層夾襖步出監(jiān)牢的瞬間额嘿，已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,107評(píng)論 1贊 271
  • 情欲美人皮
    我被黑心中介騙來泰國(guó)打工劣挫， 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留册养，地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,308評(píng)論 3贊 372
  • 代替公主和親
    正文 我出身青樓压固，卻偏偏與公主長(zhǎng)得像球拦，于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子帐我，可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,037評(píng)論 2贊 355

推薦閱讀更多精彩內(nèi)容

  • CSS 浮動(dòng)布局放棄float拦键，擁抱flex（詳解） 博客說明 文章所涉及的資料來自互聯(lián)網(wǎng)整理和個(gè)人總結(jié)谣光，意在于個(gè)...
    歸子莫閱讀 585評(píng)論 0贊 2
  • 一、Flex 布局是什么芬为？ CSS3引入了一種新的布局模式——Flexbox布局萄金，即伸縮盒模型布局（Flexibl...
    俠客有情劍無情QAQ閱讀 5,748評(píng)論 7贊 94
  • 前言（也可以說是廢話）：最近一直在做小程序相關(guān)項(xiàng)目，所以單對(duì)布局方面做一下記錄碳柱。最早做的時(shí)候捡絮，使用的是傳統(tǒng)布局方式...
    love_p閱讀 3,831評(píng)論 2贊 7
  • 文章目錄0. 前言1. 基礎(chǔ)概念2. 容器屬性（父屬性：Properties for the Parent）2.1...
    游云deb閱讀 1,621評(píng)論 0贊 1
  • 文章序 作為一名合格的前端開發(fā)者，一定要熟練掌握各種頁(yè)面的布局方法莲镣，熟練掌握各種與布局相關(guān)的屬性福稳，從事前端開發(fā)以來...
    郝同學(xué)1208閱讀 464評(píng)論 0贊 1