CSS布局(一）flex一篇搞定

一颗大白菜呀

已于 2025-02-04 21:55:16 修改

阅读量814

点赞数 5

CC 4.0 BY-SA版权

文章标签： css css3 前端

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

本文链接：https://blog.youkuaiyun.com/internet__/article/details/145444934

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&g