弹性盒子模型（2）

最新推荐文章于 2024-08-05 22:12:16 发布

THER1881

最新推荐文章于 2024-08-05 22:12:16 发布

阅读量250

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/thwr1881/article/details/124500772

版权

四、项目属性

4.1、order

控制子项目的排列顺序，默认值为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>
</head>
<style>
      .d1{
          width: 500px;
          height: 500px;
          background-color:cyan;
          display: flex;
          flex-flow: row wrap;
          align-content:stretch;
          

      }
      .one{
          width: 100px;
          height: 80px;
          background-color: brown;
          color: black;
          text-align: center;
          line-height: 80px;
          margin: 20px;
          order: 1;
      }
      .two{
          width: 80px;
         height: 100px;
          background-color: blue;
          color: black;
          text-align: center;
          line-height: 100px;
          margin: 20px;
      }
      .three{
          width: 150px;
          height: 100px;
          background-color: darkgoldenrod;
          color: black;
          text-align: center;
          line-height: 100px;
          margin: 20px;
      }
      .four{
          width: 100px;
          height: 150px;
          background-color: green;
          color: black;
          text-align: center;
          line-height: 150px;
          margin: 20px;
      }
</style>
<body>
    <div class="d1">
        <div class="one">1</div>
        <div class="two">2</div>
        <div class="three">3</div>
        <div class="four">4</div>
    </div>
</body>
</html>

在这里插入图片描述

当我把1号元素的order修改成1后，它的排列顺序就在所有元素最后，因为此时其他元素的order取值都为默认值0，这时1号元素的ooder取值最大，所以就排列在了最后。

4.2、flex-grow属性

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

代码展示

<!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>
</head>
<style>
    .container{
        display: flex;
        width: 600px;
        height: 300px;
        background-color: blueviolet;
        flex-direction: row;
        flex-wrap: wrap;
        
    }
    .one,.two,.three,.four,.five,.six{
        background-color: chocolate;
        height: 50px;
        color: white;
        margin: 20px;
        text-align: center;
        line-height: 50px;
        
    }
    .one{
        width: 120px;
        flex-grow: 2;

    }
    .two{
        width: 120px;
    }
    .three{
        width: 120px;
    }
    .four{
      width: 120px;
      flex-grow: 1;
    }
    .five{
        width: 120px;
        flex-grow: 1;
        
    }
    .six{
        width: 120px;
        flex-grow: 1;
        
    }
</style>
<body>
    <div class="container">
        <div class="one">1</div>
        <div class="two">2</div>
        <div class="three">3</div>
        <div class="four">4</div>
        <div class="five">5</div>
        <div class="six">6</div>

    </div>
</body>
</html>

效果展示
在这里插入图片描述

4.3、flex-shrink

flex-shrink属性定义了子项目的缩小比例，默认为1，即空间不足，该项目将按比例缩小。如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

代码展示

<!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>
</head>
<style>
    .container{
        display: flex;
        width: 600px;
        height: 300px;
        background-color: blueviolet;
        flex-direction: row;
        
    }
    .one,.two,.three,.four,.five,.six{
        background-color: chocolate;
        height: 50px;
        color: white;
        margin: 20px;
        text-align: center;
        line-height: 50px;
        
    }
    .one{
        width: 180px;
        

    }
    .two{
        width: 180px;
        flex-shrink: 1;
    }
    .three{
        width: 180px;
    }
    .four{
      width: 120px;
      
    }
    .five{
        width: 120px;
        
        
    }
    .six{
        width: 120px;
        
        
    }
</style>
<body>
    <div class="container">
        <div class="one">1</div>
        <div class="two">2</div>
        <div class="three">3</div>
        <div class="four">4</div>
        <div class="five">5</div>
        <div class="six">6</div>

    </div>
</body>
</html>

在这里插入图片描述

4.4、align-self

允许单个项目与其他项目有不一样的对齐方式，取值与justify-content属性几乎一样，只是多了一个默认值auto，表示继承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>
</head>
<style>
    .container{
        display: flex;
        width: 600px;
        height: 300px;
        background-color: blueviolet;
        flex-direction: row;
        flex-wrap: wrap;
        
    }
    .one,.two,.three,.four,.five,.six{
        background-color: chocolate;
        height: 50px;
        color: white;
        margin: 20px;
        text-align: center;
        line-height: 50px;
        
    }
    .one{
        width: 120px;
        

    }
    .two{
        width: 120px;
        
    }
    .three{
        width: 120px;
    }
    .four{
      width: 120px;
      
    }
    .five{
        width: 120px;
        align-self: flex-end;
        
    }
    .six{
        width: 120px;
        
        
    }
</style>
<body>
    <div class="container">
        <div class="one">1</div>
        <div class="two">2</div>
        <div class="three">3</div>
        <div class="four">4</div>
        <div class="five">5</div>
        <div class="six">6</div>

    </div>
</body>
</html>

效果展示

在这里插入图片描述

4.5、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>
</head>
<style>
    .container{
        display: flex;
        width: 600px;
        height: 300px;
        background-color: blueviolet;
        flex-direction: row;
        flex-wrap: wrap;
        
    }
    .one,.two,.three,.four,.five,.six{
        background-color: chocolate;
        height: 50px;
        color: white;
        margin: 20px;
        text-align: center;
        line-height: 50px;
        
    }
    .one{
        width: 120px;
        

    }
    .two{
        width: 120px;
        
    }
    .three{
        width: 120px;
    }
    .four{
      width: 120px;
      
    }
    .five{
        flex-basis: 180px;
        
    }
    .six{
        width: 120px;
        
        
    }
</style>
<body>
    <div class="container">
        <div class="one">1</div>
        <div class="two">2</div>
        <div class="three">3</div>
        <div class="four">4</div>
        <div class="five">5</div>
        <div class="six">6</div>

    </div>
</body>
</html>

效果演示
在这里插入图片描述

注意：如果元素不是弹性盒对象的元素，则 flex-basis 属性不起作用。

4.6、flex属性

flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。例如：flex：1；等价于：flex-grow：1；flex-shrink：1；flex-basis：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>
</head>
  <style>
      .Holy-Grail{
        display: flex;
        flex-direction: column;
        min-height: 100vh;
      }
      .header,.footer{
          min-height: 10vh;
          background-color: brown;
          text-align: center;
          line-height: 10vh;
      }
      .d1{
          display: flex;
          flex: 1;
      }
      .Holygrail-content{
          background-color: cyan;
          line-height: 75vh;
          flex: 1;
          text-align: center;
      }
      .Holygrail-nav,.Holygrail-ads{
          background-color: darkcyan;
          width: 15%;
          line-height: 75vh;
          text-align: center;
      }
      .Holygrail-nav{
          order: -1;
      }
  </style>
<body class="Holy-Grail">
    <header class="header">头部</header>
    <div class="d1">
        <main class="Holygrail-content">内容</main>
        <nav class="Holygrail-nav">1</nav>
        <aside class="Holygrail-ads">2</aside>
      
    </div>
    <footer class="footer">尾部</footer>
</body>
</html>