Web前端线上系统课-01-HTML+CSS/10-CSS的浮动和flex布局

已于 2022-04-14 18:33:07 修改
阅读量725 收藏
点赞数
文章标签： html5 css
于 2022-04-14 18:22:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/coderlb/article/details/124178429
版权

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布局
coderlb
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端基础-HTML—浮动float
xyue_的博客
04-14 431
html—浮动float 一、浮动 1、定义 元素脱离文档流，按照指定方向发生移动，遇到父级边界换行 2、取值 none 不浮动 left 左浮动 right 有浮动 inherit 继承父级 3、作用 解决水平布局问题 4、特性 所有标签同排显示 行标签支持所有css样式 默认内容撑开宽高 元素脱离文档流 二、清除浮动 1、原因 元素使用浮动后脱离文档流，父级元素检测不到子级的存在，高度无法撑开 2、解决方案 在父级使用height（拓展性不太好） 在父级使用overflow：hidd
coderwhy - WEB前端线上系统课全程直播课
yyds543a的博客
03-18 1494
性能优化是把双刃剑，有好的一面也有坏的一面。好的一面就是能提升网站性能，坏的一面就是配置麻烦，或者要遵守的规则太多。并且某些性能优化规则并不适用所有场景，需要谨慎使用，请读者带着批判性的眼光来阅读本文。
html如何消除浮动的影响,Web前端知识点-认识浮动及清除浮动带来影响的简单方法...
weixin_32373123的博客
06-03 1012
本文从一个简单的HTML页面入手，对为什么要有浮动，如何设置浮动，元素设置浮动后自身的变化及对整个布局产生的影响，以及如何消除浮动带来的影响都做了详细的过程解析，理解浮动对页面布局来说很重要，希望本文能有所帮助！一、认识浮动普通标准文档流中，浏览器从HTML文件的最上面开始，从上至下，从左至右，逐个显示每个元素，每个元素在HTML文档中的位置就限制了他在页面中的位置。先看一个简单的HTMLhtml...
Web前端，CSS中的浮动、清除浮动
星辰迷上大海的博客
05-07 1695
持续总结输出中，今天分享的是Web前端，CSS中的浮动、清除浮动。浮动和清除浮动是我们常用的css样式。今天我们就来了解他们。
CoderWhy-Web前端线上系统课学习笔记
qq_43362244的博客
04-24 4123
浏览器的本地存储主要分为Cookie和WebStorage和IndexDB,而WebStorage又可以分为LocalStorage和sessionStorage Cookie Cookie最开始的时候不是用来做本地存储的,而是为弥补HTTP在状态管理上的不足 HTTP协议是一个无状态协议,客户端向服务端发送请求,服务器返回响应,但是如何让服务端记住下次发送请求时客户端是谁?那么久产生了Cookie Cookie本质上是浏览器内部存储的一个很小的文本文件,内部是以键值对的方式在存储.在同一个域名发送
web前端基础（一）——HTML+CSS
热门推荐
广龙宇的博客
08-18 13万+
系列文章目录 web前端基础（一）——HTML+CSS 目录 系列文章目录 前言 HTML HTML的介绍 1. html的定义 2. html的作用 HTML的基本结构 1. 结构代码 2. 浏览网页文件 vscode的下载与使用 1. vscode 的基本介绍 2. vscode 的安装 3. vscode 的插件安装 4. vscode 的插件卸载 5. 设置字体大小 6. 设置颜色主题 7. 设置默认浏览器[可选] 初识常用的HTML标签 1. 常用的 ..
CSS-float浮动布局、float清除浮动与flex布局
weixin_44201223的博客
04-26 1552
float flex 清除浮动
【coderwhy前端笔记 - 阶段一 HTML+CSS】（二） CSS
hippyoo的博客
11-10 1967
css常用知识点
CSS3新特性详解(五)：多列columns column-count和flex布局
chuangxin的专栏
07-15 1万+
简单来说Html Dom元素就2类：行内元素和块级元素，前者在行内显示（span等），后者换行显示（div等）。所谓布局，比如早期的4大布局：块布局、行内布局、表格布局、定位布局，多半解决的是块级元素行内显示问题，从早期的table布局，到后来的div+css布局，再到后来的多列布局、flex布局等。本文详细讲解了table-cell的使用，及多列布局columns、column-count和flex布局的详细使用说明。
Web-前端html+css从入门到精通 164. column分栏布局.zip
05-23
在Web前端开发中，HTML和CSS是构建网页的基础。本知识点主要聚焦于“column分栏布局”，这是一种在网页设计中非常常见的布局方式，用于将内容按照一定的列数进行排列，如两栏、三栏或者更多栏。在描述的文件"Web-...
Web-前端html+css从入门到精通 132. BFC规范（上）.zip
05-23
在Web前端开发中，HTML和CSS是构建网页的基础，它们共同决定了页面的结构与样式。BFC（Block Formatting Context，块级格式化上下文）是CSS布局中的一个重要概念，对于理解和解决网页布局问题有着至关重要的作用。本...
Web-前端html+css从入门到精通 133. BFC规范（下）.zip
05-23
在Web前端开发中，HTML和CSS是构建网页的基石，而BFC（Block Formatting Context，块格式化上下文）则是CSS布局中一个至关重要的概念。本篇将深入探讨BFC规范，帮助初学者从入门到精通，理解并掌握这一关键知识点。 ...
Web-前端教程05 Flex 布局大法.zip
05-24
这个布局模式在HTML5时代被引入，旨在解决传统CSS布局方式（如浮动、定位）在处理复杂网页结构时的局限性，尤其是在移动设备和多屏幕尺寸下。Flex布局能轻松实现元素的对齐、调整大小、分配空间等操作，使得网页设计...
大二网页设计实训-豆瓣首页（html+css）
06-29
CSS是用于定义网页外观和布局的样式表语言。在实训中，学生将学习如何使用CSS来控制字体、颜色、布局、响应式设计等方面。通过使用选择器（如类选择器、ID选择器、标签选择器等）来指定元素的样式，例如`.class{...
HTML5+CSS3-HTML5入门
2302_77230857的博客
08-06 750
,<meta>,<link>,<style>等，都属于头部标签可容纳的子标签。该标签必须在<head>之中，，一个HTML文档只能包含一个<title>标签，<title>开始标签和
软件设计之HTML5
thm19990903的博客
08-04 1926
HTML：Hyper Text Markup Language 超文本标记语言。
CSS的重绘和重排是什么？
最新发布
沐爸的博客
08-12 764
CSS的重绘和重排是什么？它俩有什么区别？如何对重绘和重排进行优化？快来一起看看吧！
css实现水滴效果图
yinge0508的博客
08-12 473
【代码】css实现水滴效果图。
前端面试宝典【CSS篇】【4】
BDawn的专栏
08-06 745
盒子模型是 CSS 中用于描述 HTML 元素布局方式的一个概念。在 CSS 中，每个元素都被视为一个矩形盒子，这个盒子由几个不同的部分组成：内容区（content）、内边距（padding）、边框（border）和外边距（margin）。 box-sizing 属性是 CSS 中的一个重要属性，它用于定义元素的盒模型是如何工作的。 CSS Sprites（也称为 CSS 精灵或 CSS 雪碧图）是一种优化网页性能的技术，它将多个小图像合并成一个单一的大图像文件
HTML+CSS基础要点详解
以上只是HTML+CSS众多知识点的一部分，实际应用中还有更多概念和技巧，如响应式设计、过渡动画、CSS预处理器等，都是前端开发者需要掌握的关键技能。不断学习和实践，才能更好地理解和运用这些知识，构建出美观、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值