CSS3 伸缩盒模型

peakJun

已于 2023-05-22 23:04:44 修改

阅读量56

点赞数

文章标签： css3 css html

于 2023-05-21 13:11:16 首次发布

本文链接：https://blog.csdn.net/JunGuanDreams/article/details/130790920

版权

1，伸缩容器-伸缩项目

总结

代码演示

  <style>
    .outer{
      width: 800px;
      /* height: 600px; */
      background-color: gray;
      /* 将该元素变为了伸缩容器（开启了flex布局） */
      display: flex;
    }
    .inner{
      width: 200px;
      height: 200px;
      border: 2px solid black;
      background-color: aqua;
      box-sizing: border-box;
      /* float: left; */
    }
    .inner3{
      display: flex;
    }
  </style>
</head>
<body>
  <div class="outer">
    <div class="inner">1</div>
    <div class="inner">2</div>
    <div class="inner inner3">
      <div>A</div>
      <div>B</div>
      <div>C</div>
    </div>
  </div>
</body>

运行结果

2，主轴方向

总结

代码演示

 <style>
    .outer{
      width: 800px;
      height: 600px;
      background-color: gray;
      margin: 0 auto;
      margin-top: 100px;

      /* 将该元素变为了伸缩容器（开启了flex布局） */
      display: flex;

      /* 调整主轴方向，水平从左到右，默认 */
      /* flex-direction: row; */

      /* 调整主轴方向，水平从右到左 */
      /* flex-direction: row-reverse; */

      /* 调整主轴方向,垂直从上到下 */
      flex-direction: column;

      /* 调整主轴方向,垂直从上到下 */
      /* flex-direction: column-reverse; */
    }
    .inner{
      width: 200px;
      height: 200px;
      border: 2px solid black;
      background-color: aqua;
      box-sizing: border-box;
      /* float: left; */
    }
   
  </style>
</head>
<body>
  <div class="outer">
    <div class="inner">1</div>
    <div class="inner">2</div>
    <div class="inner">
      3
    </div>
  </div>
</body>

运行结果

3，主轴换行方式

总结

代码演示

  <style>
    .outer{
      width: 1000px;
      height: 600px;
      background-color: gray;
      margin: 0 auto;
      margin-top: 100px;

      /* 将该元素变为了伸缩容器（开启了flex布局） */
      display: flex;
      
      /* 主轴换行方式，换行 */
      /* flex-wrap: wrap; */

      /* 主轴换行方式，反向换行 */
      flex-wrap: wrap-reverse;
    }
    .inner{
      width: 200px;
      height: 200px;
      border: 2px solid black;
      background-color: aqua;
      box-sizing: border-box;
      /* float: left; */
    }
   
  </style>
</head>
<body>
  <div class="outer">
    <div class="inner">1</div>
    <div class="inner">2</div>
    <div class="inner">3</div>
    <div class="inner">4</div>
    <div class="inner">5</div>
    <div class="inner">6</div>
    <div class="inner">7</div>
    <div class="inner">8</div>
    <div class="inner">9</div>
    <div class="inner">10</div>
    <div class="inner">11</div>

  </div>
</body>

运行结果

4，flex-flow复合写法

总结

代码演示

 <style>
    .outer{
      width: 1000px;
      height: 600px;
      background-color: gray;
      margin: 0 auto;
      margin-top: 100px;

      /* 将该元素变为了伸缩容器（开启了flex布局） */
      display: flex;
      
      /* 主轴换行方式，换行 */
      flex-wrap: wrap;

      flex-flow: row-reverse wrap-reverse;
    }
    .inner{
      width: 200px;
      height: 200px;
      border: 2px solid black;
      background-color: aqua;
      box-sizing: border-box;
      /* float: left; */
    }
   
  </style>
</head>
<body>
  <div class="outer">
    <div class="inner">1</div>
    <div class="inner">2</div>
    <div class="inner">3</div>
    <div class="inner">4</div>
    <div class="inner">5</div>
    <div class="inner">6</div>
    <div class="inner">7</div>
    <div class="inner">8</div>
    <div class="inner">9</div>
    <div class="inner">10</div>
    <div class="inner">11</div>

  </div>
</body>

运行结果

5，主轴对齐方式

总结

代码演示

 <style>
    .outer{
      width: 1000px;
      height: 600px;
      background-color: gray;
      margin: 0 auto;
      margin-top: 100px;

      /* 将该元素变为了伸缩容器（开启了flex布局） */
      display: flex;
      
      /* 主轴换行方式，换行 */
      flex-wrap: wrap;

      /* 主轴的对齐方式，主轴的起始位置 */
      /* justify-content: flex-start; */

      /* 主轴的对齐方式，主轴的结束位置 */
      /* justify-content: flex-end; */

      /* 主轴的对齐方式，中间对齐 */
      /* justify-content: center; */

      /* 主轴的对齐方式，项目均匀的分布在一行中，项目与项目之间的距离，是项目距边缘的二倍 */
      /* justify-content: space-around; */

      /* 主轴的对齐方式，项目均匀的分布在一行中，项目与项目之间的距离是相等的，是项目距边缘没有距离 */
      /* justify-content: space-between; */

      /* 主轴的对齐方式，项目均匀的分布在一行中 */
      justify-content: space-evenly;
    }
    .inner{
      width: 200px;
      height: 200px;
      border: 2px solid black;
      background-color: aqua;
      box-sizing: border-box;
      /* float: left; */
    }
   
  </style>
</head>
<body>
  <div class="outer">
    <div class="inner">1</div>
    <div class="inner">2</div>
    <div class="inner">3</div>

  </div>
</body>

运行结果

6，侧轴对齐方式-一行

总结

代码演示

<style>
    .outer{
      width: 1000px;
      height: 600px;
      background-color: gray;
      margin: 0 auto;
      margin-top: 100px;

      /* 将该元素变为了伸缩容器（开启了flex布局） */
      display: flex;
      
      /* 主轴换行方式，换行 */
      flex-wrap: wrap;

      /* 主轴的对齐方式，主轴的起始位置 */
      justify-content: flex-start;
      
      /* 侧轴的对齐方式，侧轴的起始位置对齐 */
      align-items: flex-start;

      /* 侧轴的对齐方式，侧轴的结束位置对齐 */
      /* align-items: flex-end; */

      /* 侧轴的对齐方式，侧轴的中间对齐 */
      /* align-items: center; */

      /* 侧轴的对齐方式，侧轴的基线对齐 */
      /* align-items: baseline; */

      /* 侧轴的对齐方式，拉伸到整个父容器（前提：伸缩项目不能给高度），默认的状态 */
      /* align-items: stretch; */
    }
    .inner{
      width: 200px;
      height: 200px;
      border: 2px solid black;
      background-color: aqua;
      box-sizing: border-box;
    }
    .inner2{
      height: 300px;
      font-size: 100px;
    }
    .inner3{
      height: 100px;
    }
  </style>
</head>
<body>
  <div class="outer">
    <div class="inner">1x</div>
    <div class="inner inner2">2x</div>
    <div class="inner inner3">3x</div>

  </div>

运行结果

7，侧轴对齐方式（多行）

总结

代码演示

  <style>
    .outer{
      width: 1000px;
      height: 900px;
      background-color: gray;
      margin: 0 auto;
      margin-top: 10px;

      /* 将该元素变为了伸缩容器（开启了flex布局） */
      display: flex;
      
      /* 主轴换行方式，换行 */
      flex-wrap: wrap;

      /* 主轴的对齐方式，主轴的起始位置 */
      justify-content: flex-start;

      /* 侧轴的对齐方式（多行）侧轴的起始位置对齐 */
      /* align-content: flex-start; */

      /* 侧轴的对齐方式（多行）侧轴的结束位置对齐 */
      /* align-content: flex-end; */

      /* 侧轴的对齐方式（多行）侧轴的中间位置对齐 */
      /* align-content: center; */

      /* 侧轴的对齐方式（多行）伸缩项目之间的距离是相等的，且是边缘距离的2倍 */
      /* align-content: space-around; */

      /* 侧轴的对齐方式（多行）伸缩项目之间的距离是相等的，且边缘没有距离 */
      align-content: space-between;

      /* 侧轴的对齐方式（多行）伸缩项目之间的距离是相等的 */
      /* align-content: space-evently; */

      align-content: stretch;
    }
    .inner{
      width: 200px;
      height: 200px;
      border: 2px solid black;
      background-color: aqua;
      box-sizing: border-box;
    }
    .inner2{
      height: 300px;
    }
    .inner3{
      height: 100px;
    }
  </style>
</head>
<body>
  <div class="outer">
    <div class="inner">1</div>
    <div class="inner inner2">2</div>
    <div class="inner inner3">3</div>
    <div class="inner">4</div>
    <div class="inner">5</div>
    <div class="inner">6</div>
    <div class="inner">7</div>
    <div class="inner">8</div>
    <div class="inner">9</div>
    <div class="inner">10</div>
    <div class="inner">11</div>
  </div>
</body>

运行结果

8，元素水平垂直居中

代码演示

<style>
    .outer{
      width: 400px;
      height: 400px;
      background-color: #888;
      display: flex;

      /* 方案一 */
      /* justify-content: center; */
      /* align-items: center; */
    }
    .inner{
      width: 100px;
      height: 100px;
      background-color: orange;
      /* 方案二 */
      margin: auto;
    }
  </style>
</head>
<body>
  <div class="outer">
    <div class="inner"></div>
  </div>
</body>

运行结果

9，项目在主轴的基准长度

总结

代码演示

<style>
    .outer{
      width: 1000px;
      height: 900px;
      background-color: gray;
      margin: 0 auto;
      margin-top: 10px;

      /* 将该元素变为了伸缩容器（开启了flex布局） */
      display: flex;
      
      /* 主轴换行方式，换行 */
      flex-wrap: wrap;

      flex-direction: column;

      /* 主轴的对齐方式，主轴的起始位置 */
      justify-content: flex-start;

      /* 侧轴的对齐方式（多行）伸缩项目之间的距离是相等的，且边缘没有距离 */
      align-content: space-between;
    }
    .inner{
      width: 200px;
      height: 200px;
      border: 2px solid black;
      background-color: aqua;
      box-sizing: border-box;
    }
    .inner2{
      /* 设置伸缩项目在主轴上的基准长度，若主轴是横向的宽失效，若主轴是纵向的高失效 */
      flex-basis: 300px;
    }
  </style>
</head>
<body>
  <div class="outer">
    <div class="inner">1</div>
    <div class="inner inner2">2</div>
    <div class="inner">3</div>
  </div>
</body>

运行结果

10，伸缩项目-伸

总结

代码演示

 <style>
    .outer{
      width: 1000px;
      height: 900px;
      background-color: gray;
      margin: 0 auto;
      margin-top: 10px;

      /* 将该元素变为了伸缩容器（开启了flex布局） */
      display: flex;
      
      /* 主轴换行方式，换行 */
      flex-wrap: wrap;

      flex-direction: row;

      /* 主轴的对齐方式，主轴的起始位置 */
      justify-content: flex-start;

      /* 侧轴的对齐方式（多行）伸缩项目之间的距离是相等的，且边缘没有距离 */
      align-content: space-between;
    }
    .inner{
      width: 200px;
      height: 200px;
      border: 2px solid black;
      background-color: aqua;
      box-sizing: border-box;
    }
    .inner1{
      flex-grow: 1;
    }
    .inner2{
      flex-grow: 2;
      width: 300px;
    }
    .inner3{
      flex-grow: 3;
    }
  </style>
</head>
<body>
  <div class="outer">
    <div class="inner inner1">1</div>
    <div class="inner inner2">2</div>
    <div class="inner inner3">3</div>
  </div>
</body>

运行结果

11，伸缩项目-缩

总结

代码演示

 <style>
    .outer{
      width: 400px;
      height: 900px;
      background-color: gray;
      margin: 0 auto;
      margin-top: 10px;

      /* 将该元素变为了伸缩容器（开启了flex布局） */
      display: flex;
      
      /* 主轴换行方式，换行 */
      /* flex-wrap: wrap; */

      flex-direction: row;

      /* 主轴的对齐方式，主轴的起始位置 */
      justify-content: flex-start;

      /* 侧轴的对齐方式（多行）伸缩项目之间的距离是相等的，且边缘没有距离 */
      align-content: flex-start;
    }
    .inner{
      width: 200px;
      height: 200px;
      border: 2px solid black;
      background-color: aqua;
      box-sizing: border-box;
      flex-grow: 1;
    }
    .inner1{
      flex-shrink: 1;
    }
    .inner2{
      width: 300px;
      flex-shrink: 2;
    }
    .inner3{
      flex-shrink: 3;
    }
  </style>
</head>
<body>
  <div class="outer">
    <div class="inner inner1">1</div>
    <div class="inner inner2">2</div>
    <div class="inner inner3">3</div>
  </div>
</body>

运行结果

12，复合属性

总结

代码演示

 <style>
    .outer{
      width: 600px;
      height: 900px;
      background-color: gray;
      margin: 0 auto;
      margin-top: 10px;

      /* 将该元素变为了伸缩容器（开启了flex布局） */
      display: flex;
      
      /* 主轴换行方式，换行 */
      /* flex-wrap: wrap; */

      flex-direction: row;

      /* 主轴的对齐方式，主轴的起始位置 */
      justify-content: flex-start;

      /* 侧轴的对齐方式（多行）伸缩项目之间的距离是相等的，且边缘没有距离 */
      align-content: flex-start;
    }
    .inner{
      width: 200px;
      height: 200px;
      border: 2px solid black;
      background-color: aqua;
      box-sizing: border-box;
      /* 可以拉伸 */
      /* flex-grow: 1; */

      /* 可以压缩 */
      /* flex-shrink: 1; */

      /* 基准长度 */
      /* flex-basis: 100px; */

      /* 可以拉伸 可以压缩 不设置基准长度 可简写为flex:auto */
      /* flex: 1 1 auto; */

      /* 可以拉伸 可以压缩 设置基准长度 可简写为flex:1 */
      /* flex: 1 1 0; */

      /* 不可以拉伸 不可以压缩 不设置基准长度 可简写为flex:none */
      /* flex: 0 0 auto; */

      /* 不可以拉伸 可以压缩 不设置基准长度 可简写为flex:0 auto */
      flex: 0 1 auto;
    }
    .inner2{
      width: 300px;
      flex-shrink: 2;
    }
  </style>
</head>
<body>
  <div class="outer">
    <div class="inner inner1">1</div>
    <div class="inner inner2">2</div>
    <div class="inner inner3">3</div>
  </div>
</body>

13，项目排序与单独对齐

总结

代码演示

 <style>
    .outer{
      width: 600px;
      height: 900px;
      background-color: gray;
      margin: 0 auto;
      margin-top: 10px;

      /* 将该元素变为了伸缩容器（开启了flex布局） */
      display: flex;
      
      /* 主轴换行方式，换行 */
      /* flex-wrap: wrap; */

      flex-direction: row;

      /* 主轴的对齐方式，主轴的起始位置 */
      justify-content: flex-start;

      /* 侧轴的对齐方式（多行）伸缩项目之间的距离是相等的，且边缘没有距离 */
      align-content: flex-start;
    }
    .inner{
      width: 200px;
      height: 200px;
      border: 2px solid black;
      background-color: aqua;
      box-sizing: border-box;

      /* 可以拉伸 可以压缩 设置基准长度 可简写为flex:1 */
      flex: 1 1 0;
    }
    .inner1{
      order: 3;
    }
    .inner2{
      order: 2;
      align-self: center;
    }
    .inner3{
      order: 1;
    }
  </style>
</head>
<body>
  <div class="outer">
    <div class="inner inner1">1</div>
    <div class="inner inner2">2</div>
    <div class="inner inner3">3</div>
  </div>
</body>

运行结果