练习（弹性盒子）

最新推荐文章于 2024-06-18 14:20:35 发布

WhiteStruggle

最新推荐文章于 2024-06-18 14:20:35 发布

阅读量964

点赞数 2

分类专栏： HTML与CSS 文章标签：弹性盒子

本文链接：https://blog.csdn.net/qq_45127998/article/details/102135801

版权

HTML与CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文章目录

代码

<!--HTML代码：-->
    <div class="main">
        <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>
<!--CSS样式：-->
    <style>
          .main{
              height: 300px;
              width: 600px;
              background-color: lightblue;
          }
          .main .item{
              height: 200px;
              width: 200px;
              background: lightgoldenrodyellow;
              border: 5px solid black;
              margin: 5px;
              font-size: 100px;
              line-height: 200px;
              box-sizing: border-box;
              padding-left: 60px;
          }
    </style>

样式为:

原样式

把main设置为弹性盒子
    .main{
        display: flex;
    }

样式为：

设置为弹性盒子

flex-flow

flex-direction

默认的flex-direction值为row，效果如上图

其他值

    .main{
        display: flex;
        <!--1.取值为 row-reverse-->
        flex-direction: row-reverse;
        <!--2.取值为column-->
        flex-direction:column;
        <!--3.取值为column-reverse-->
        flex-direction:column-reverse;
    }

1.row-reverse的效果：

row-reverse

2.column效果：

column

3.column-reverse效果：

修改了main的高度为1100px，否则无法显示全

column-reverse

flex-wrap

弹性盒的项目默认都是排列在一个轴上
如果项目多的话，会“弹性”压缩在一行

增加item的数量到8个

          .main{
              display: flex;
              <!--1.默认值no-wrap-->
              flex-wrap: no-wrap;
              <!--2.取值为wrap-->
              flex-wrap: wrap;
              <!--3.取值为wrap-reverse-->
              flex-wrap: wrap-reverse;
          }

no-wrap效果为：

no-wrap

wrap效果为：

wrap

wrap-reverse效果为：
修改main行高500px，否则不能完全显示

wrap-reverse

justify-content

      .main{   
         <!--1.center-->
          /*justify-content:center;*/
          <!--2.flex-end-->
          /* justify-content:flex-end; */
          <!--3.flex-start-->
          /* justify-content: flex-start; */
          <!--4.space-around-->
          /* justify-content: space-around; */
          <!--5.space-between-->
          /* justify-content: space-between; */
          <!--6.sapce-evently-->
          /* justify-content: space-evenly; */
      }

center：居中

justify-content_center

flex-end：右对齐

justify-content_flex-end

flex-start：左对齐（默认）

justify-content_flex-start

space-around:两端间隔对齐（项目间间隔是项目与边框间隔的2倍）

justify-content_space-around

space-evently:平分空白对齐

space-evenly

增加一个item就更清晰了

space-evenly

space-between：两端对齐（项目间间隔相同）

justify-content_space-between

align-items

      .main{
          <!--1.baseline-->
          align-items: baseline;
          <!--2.stretch-->
          align-items: stretch;
          <!--3.center-->
          align-items: center;
          <!--4.fex-end-->
          align-items: flex-end;
          <!--5.flex-start-->
          align-items: flex-start;
      }

1.baseline

项目第一行文字的基线对齐

2.stretch

未设置高度时（或height：auto）把项目整个容器的高度占满

3.center效果：

center

4.flex-end效果：

flex-end

5.flex-start效果：

flex-start

align-content

      .main{
          display: flex;
          flex-wrap:wrap;
          <!--1.center-->
          align-content: center;
          <!--2.flex-end-->
          align-content: flex-end;
          <!--3.flex-start-->
          align-content: flex-start;
          <!--4.space-around-->
          align-content: space-around;
          <!--5.sapce-between-->
          align-content: space-between;
          /* align-content: unset; */
      }

默认情况下

1.center

center

2.flex-end

flex-end

3.flex-start

flex-stert

4.space-around

space-around

5.space-between

space-between

order

增加CSS代码
          .item:nth-child(1){
              order: 2;
          }
          .item:nth-child(2){
              order: 1;
          }
          .item:nth-child(3){
              order: 2;
          }
          .item:nth-child(4){
              order: 1;
          }
          .item:nth-child(5){
              order: 2;
          }
          .item:nth-child(6){
              order: 4;
          }
          .item:nth-child(7){
              order: 3;
          }
          .item:nth-child(8){
              order: -5;
          }

效果：

order

flex

      .item:nth-child(1){
          /* order: 2; */
          /* flex-grow: 3; */
          /* flex-basis: 300px; */
          align-self: flex-end;
      }
      .item:nth-child(2){
          /* order: 1; */
          /* flex-grow: 2; */
          /* flex-shrink: 2; */
          /* flex-basis: 275px; */
          align-self: center;
      }
      .item:nth-child(3){
          /* order: 2; */
          /* flex-grow: 1; */
          /* flex-shrink: 3; */
          /* flex-basis: 250px; */
      }
      .item:nth-child(4){
          /* order: 1; */
          /* flex-grow: 0; */
          /* flex-shrink: 2; */
          /* flex-basis: 225px; */
          align-self: center;
      }
      .item:nth-child(5){
          /* order: 2; */
          /* flex-grow: 2; */
          /* flex-shrink: 1; */
          /* flex-basis: 150px; */
          align-self: flex-end;
      }
      .item:nth-child(6){
          /* order: 4; */
          /* flex-grow: 8; */
          /* flex-shrink: 3; */
          /* flex-basis: 175px; */
          align-self: flex-end;
      }
      .item:nth-child(7){
          /* order: 3; */
          /* flex-grow: 3; */
          /* flex-shrink: 2; */
          align-self: center;
      }
      .item:nth-child(8){
          /* order: -5; */
          /* flex-grow: 2; */
          /* flex-shrink: 1; */
          /* flex-basis: 225px; */
          align-self: flex-end;
      }

fles-grow

在使用时，设置flea-wrap为wrap

效果：
flex-grow

flex-shrink

不设置flew-wrap为wrap

效果：

flex-shrink

flex-basis

设置设置flea-wrap为wrap，可以看到，明显的变化

效果：

flex-basis

flex-self

设置某个项目在主轴上的对齐方式

效果：

flex-self

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>练习</title>
    <style>
          .main{
              height: 600px;
              width: 1200px;
              background-color: lightblue;
          }
          .main .item,.item0{
              height: 200px;
              width: 200px;
              background: lightgoldenrodyellow;
              border: 5px solid black;
              margin: 5px;
              font-size: 100px;
              line-height: 200px;
              box-sizing: border-box;
              text-align: center;
          }
          /* .item0{
              height: auto;
          } */
          .main{
              display: flex;
              /* flex-direction: row-reverse; */
              /* flex-direction: column; */
              /* flex-direction: column-reverse; */
              /* flex-wrap: no-wrap; */
              flex-wrap: wrap;
              /* flex-wrap: wrap-reverse; */
              /* justify-content:center; */
              /* justify-content:flex-end; */
              /* justify-content: flex-start; */
              /* justify-content: space-around; */
              /* justify-content: space-between; */
              /* justify-content: space-evenly; */
              /* align-items: baseline; */
              /* align-items: stretch; */
              /* align-items: center; */
              /* align-items: flex-end; */
              /* align-items: flex-start; */
              /* align-content: center; */
              /* align-content: flex-end; */
              /* align-content: flex-start; */
              /* align-content: space-around; */
              /* align-content: space-between; */
          }
          .item:nth-child(1){
              /* order: 2; */
              /* flex-grow: 3; */
              /* flex-basis: 300px; */
              align-self: flex-end;
          }
          .item:nth-child(2){
              /* order: 1; */
              /* flex-grow: 2; */
              /* flex-shrink: 2; */
              /* flex-basis: 275px; */
              align-self: center;
          }
          .item:nth-child(3){
              /* order: 2; */
              /* flex-grow: 1; */
              /* flex-shrink: 3; */
              /* flex-basis: 250px; */
          }
          .item:nth-child(4){
              /* order: 1; */
              /* flex-grow: 0; */
              /* flex-shrink: 2; */
              /* flex-basis: 225px; */
              align-self: center;
          }
          .item:nth-child(5){
              /* order: 2; */
              /* flex-grow: 2; */
              /* flex-shrink: 1; */
              /* flex-basis: 150px; */
              align-self: flex-end;
          }
          .item:nth-child(6){
              /* order: 4; */
              /* flex-grow: 8; */
              /* flex-shrink: 3; */
              /* flex-basis: 175px; */
              align-self: flex-end;
          }
          .item:nth-child(7){
              /* order: 3; */
              /* flex-grow: 3; */
              /* flex-shrink: 2; */
              align-self: center;
          }
          .item:nth-child(8){
              /* order: -5; */
              /* flex-grow: 2; */
              /* flex-shrink: 1; */
              /* flex-basis: 225px; */
              align-self: flex-end;
          }
    </style>
</head>
<body>
    <div class="main">
        <!-- 这个0是用来调试align-item：baseline; -->
        <!-- <div class="item0">0</div> -->
        <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">6</div>
        <div class="item">7</div>
        <div class="item">8</div>
    </div>
</body>
</html>