css的弹性盒子flex的属性

最新推荐文章于 2025-09-03 21:48:01 发布

原创最新推荐文章于 2025-09-03 21:48:01 发布 · 275 阅读

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

本文详细介绍了CSS中的Flex布局，包括其基本概念、如何启用flex布局，以及主轴和侧轴的设置。通过调整`flex-direction`属性可以实现不同方向的排列，而`justify-content`和`align-items`则分别用于控制主轴和侧轴上的元素对齐方式。实例展示了各种排列和对齐方式的效果，帮助读者理解并掌握Flex布局。

Flex是“Fexible Box”意为“弹性盒子”是一种布局方式

display：flex；属性是放在父容器身上，下面的子容器会自动变成flex的项目

  #fu{
        width: 800px;
        height: 800px;
        border:5px solid black;
    }

.zi{
    width: 200px;
    height: 100px;
    border:1px dashed gray;
}

<body>

<div id="fu">

<div class="zi">1</div>

<div class="zi">2</div>

<div class="zi">3</div>

<div class="zi">4</div>

<div class="zi">5</div>

<div class="zi">6</div>


</div>



    
</body>

正常排列，不加display：flex；属性

#fu{
        width: 800px;
        height: 800px;
        border:5px solid black;
        display: flex;
    }

.zi{
    width: 200px;
    height: 100px;
    border:1px dashed gray;
}

在父容器加display：flex；属性后

盒子会横向排成一列，而且盒子多的话，宽度会发生变化

采用flex布局的容器，存在两个轴，主轴和侧轴，默认的主轴就是x轴

改变主轴的属性是flex-direction：；

默认值是 row 就是横向排列

column 纵向排列

 #fu{
        width: 800px;
        height: 800px;
        border:5px solid black;
        display: flex;
        flex-direction: column;
    }

row-reverse 反横向排列

 #fu{
        width: 800px;
        height: 800px;
        border:5px solid black;
        display: flex;
        flex-direction: row-reverse;
    }

column-reverse 反纵向排列

 #fu{
        width: 800px;
        height: 800px;
        border:5px solid black;
        display: flex;
        flex-direction: column-reverse;
    }

记住哪个方向排列，哪个方向就是主轴

调整主轴对齐方式 justify-content：；，以x轴为例

flex-start 默认值左对齐

 #fu{
        width: 800px;
        height: 800px;
        border:5px solid black;
        display: flex;
          justify-content: flex-start;
      
    }
.zi{
    width: 200px;
    height: 100px;
    border:1px dashed gray;
}

<body>

<div id="fu">

<div class="zi">1</div>

<div class="zi">2</div>

<div class="zi">3</div>



</div>



    
</body>

flex-end 右对齐

 #fu{
        width: 800px;
        height: 800px;
        border:5px solid black;
        display: flex;
      justify-content:flex-end;
    }

center 水平居中

 #fu{
        width: 800px;
        height: 800px;
        border:5px solid black;
        display: flex;
        justify-content:center;
      
    }

space-between 两端对齐方式

 #fu{
        width: 800px;
        height: 800px;
        border:5px solid black;
        display: flex;
        justify-content:space-between;
      
    }

space-around 距离环绕

 #fu{
        width: 800px;
        height: 800px;
        border:5px solid black;
        display: flex;
        justify-content:space-around;
      
    }

调整侧轴的对齐方式

align-items 调整侧轴的对齐方式

flex-start 默认值上对齐

  #fu{
        width: 800px;
        height: 800px;
        border:5px solid black;
        display: flex;
       align-items: flex-start;
      
    }

.zi{
    width: 200px;
    height: 100px;
    border:1px dashed gray;
}

<body>

<div id="fu">

<div class="zi">1</div>

<div class="zi">2</div>

<div class="zi">3</div>



</div>



    
</body>

flex-end 下对齐

   #fu{
        width: 800px;
        height: 800px;
        border:5px solid black;
        display: flex;
       align-items: flex-end;
      
    }

center 垂直居中

 #fu{
        width: 800px;
        height: 800px;
        border:5px solid black;
        display: flex;
       align-items: center;
      
    }

注意：

行内元素在弹性盒子中会变成块元素

justify-center 横向排列方式

align-center 纵向排列方式

标签

#html #css #html5