CSS布局(一）flex一篇搞定

原创已于 2025-02-04 21:55:16 修改 · 933 阅读

11 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#css #css3 #前端

于 2025-02-04 21:54:53 首次发布

2.2.flex-wrap、flex-flow

3.3.flex-grow、flex-shrink

3.4.flex-basis

3.5.flex

四、 flex布局中justify-content最后一行布局问题

一、flex布局

1.1. 认识flex布局

1.2. flex布局重要的概念

flex container
flex item

main axis/cross axios
main start/main end/cross start / cross end

二、flex container中的属性

2.1.flex-direction

  <style>
    .box{
      width: 500px;
      height: 500px;
      background-color: pink;
      display: flex;
      /* 默认是row  row-reverse反个方向*/
      /* 方向改为列 culumn  culumn-reverse反个方向*/
      flex-direction:column-reverse;
    }
    .item{
      width: 50px;
      height: 120px;
    }
  </style>
</head>
<body>
  <div class="box">
    <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>
</body>

2.2.flex-wrap、flex-flow

  <style>
    .box{
      width: 500px;
      height: 500px;
      background-color: pink;
      display: flex;
      /* wrap 默认nowrap 弹性item会压缩 */
      /* wrap换行 上面是第一行如然后第二行 */
      /* wrap-reverse 最下面是第一行 */
      /* flex-wrap: wrap-reverse; */


      /*flex-flow 复合属性 */
      flex-flow: column wrap-reverse;
    }
    .item{
      width: 150px;
      height: 120px;
    }
  </style>
</head>
<body>
  <div class="box">
    <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>

2.3.justify-content

  <style>
    .box{
      width: 500px;
      height: 500px;
      background-color: pink;
      display: flex;
      /* 切换justify-content */
      /* flex-start:让元素和主轴的start方向对齐 */
      /* flex-end：让元素和主轴的end方向对齐 */
      /* center：居中对齐 */
      /* space-between：两端放一个元素，让其余元素一定要空间等分 */
      /* space-evenly：两端也有间距,并且所有空间进行等分 */
      /* space-around：两端也有间距，两端的间距是items中间的间距的一半*/
      justify-content: space-evenly
    }
    .item{
      width: 100px;
      height: 120px;
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="item item1" >1</div>
    <div class="item item2" >2</div>
    <div class="item item3" >3</div>
  </div>

2.4.align-items

  <style>
    .box{
      width: 500px;
      height: 500px;
      background-color: pink;
      display: flex;
      /* align-items: flex-end; */
      align-items: center;
    }
    .item1{
      width: 100px;
      height: 120px;
      background-color: red;
    }
    .item2{
      width: 100px;
      height: 60px;
      background-color:blue;
    }
    .item3{
      width: 100px;
      height: 200px;
      background-color: skyblue;
    }

  </style>
</head>
<body>
  <div class="box">
    <div class="item item1" >1</div>
    <div class="item item2" >2</div>
    <div class="item item3" >3</div>
  </div>
</body>

2.5.align-content

  <style>
    .box{
      width: 500px;
      height: 500px;
      background-color: pink;
      display: flex;
      flex-wrap: wrap;
      /* 多行在交叉轴上怎么排布 和justify-content一样*/
      /* align-content: center; */
      align-content: space-between;
    }
    .item{
      width: 100px;
      height: 120px;
      background-color: red;
    }

  </style>
</head>
<body>
  <div class="box">
    <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>
</body>

三、 flex item中的属性

3.1.order

  <style>
    .box{
      width: 500px;
      height: 500px;
      background-color: pink;
      display: flex;
    }
    .item{
      width: 100px;
      height: 120px;
      background-color: red;
    }
    /* order值越小越排在前面 */
    .item1{
     order:2;
    }
    .item2{
     order:1;
    }
    .item3{
     order:5;
    }

  </style>
</head>
<body>
  <div class="box">
    <div class="item item1" >1</div>
    <div class="item item2" >2</div>
    <div class="item item3" >3</div>
  </div>
</body>

3.2.align-self

  <style>
    .box{
      width: 500px;
      height: 500px;
      background-color: pink;
      display: flex;
      align-items: center;
    }
    .item{
      width: 100px;
      height: 120px;
      background-color: red;
    }
    .item1{
     height: 100px;
     /* 单独设置在交叉轴的对齐方式 */
     align-self: flex-start;
    }
    .item2{
     height: 50px;
    }
    .item3{
      height: 120px;
    }

  </style>
</head>
<body>
  <div class="box">
    <div class="item item1" >1</div>
    <div class="item item2" >2</div>
    <div class="item item3" >3</div>

    
  </div>
</body>

3.3.flex-grow、flex-shrink

  <style>
    .box{
      width: 500px;
      height: 500px;
      background-color: pink;
      display: flex;
      align-items: center;
    }
    .item{
      width: 200px;
      height: 120px;
      /* 默认值是1 都会进行压缩 */
      flex-shrink: 0;
      background-color: red;
    }
    .item1{
      /* 有剩余空间时 分配给这个item1份 */
      /* flex-grow: 1; */

      /*当放不下的时候 默认每个元素会进行平均压缩 */
      /* 设置了两个flex-shrink 就它们两会进行压缩 */
      flex-shrink: 1;
    }
    .item2{
      /* 有剩余空间时 分配给这个item2份 */
      /* flex-grow: 2; */

      flex-shrink: 1;
    }

  </style>
</head>
<body>
  <div class="box">
    <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 item6" >6</div>
  </div>

3.4.flex-basis

  <style>
    .box{
      width: 500px;
      height: 500px;
      background-color: pink;
      display: flex;
    }
    .item{
      /* width: 100px; */
      height: 120px;
      /* 基础尺寸是100 当有一个完整的单词显示不下的时候 会进行拉伸让它显示 */
      flex-basis: 100px;
    }


  </style>
</head>
<body>
  <div class="box">
    <div class="item item1" >1csdfa_fsfadfada_fsfafafaftre</div>
    <div class="item item2" >2</div>
    <div class="item item3" >3</div>

    
  </div>
</body>

3.5.flex

四、 flex布局中justify-content最后一行布局问题

就是在后面加几个span并且宽度要和item宽度一样要的span数量为一行的item数减2

  <style>
    .box{
      width: 500px;
      background-color: pink;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }
    .item{
      width: 110px;
      height: 150px;
      background-color: red;
    }

    .box > span{
      width: 110px;
    }
  </style>
</head>
<body>
  <div class="box">
    <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 item1" >1</div>
    <div class="item item2" >2</div>
    <div class="item item3" >3</div>
    <div class="item item4" >4</div>
    <div class="item item1" >1</div>
    <div class="item item2" >2</div>
    <div class="item item3" >3</div>
    <span></span><span></span>
  </div>
</body>