css的弹性盒子flex的属性

最新推荐文章于 2024-05-27 15:28:58 发布

我拿青春赌未来~

最新推荐文章于 2024-05-27 15:28:58 发布

阅读量177

点赞数 3

文章标签： html css html5

本文链接：https://blog.csdn.net/helongzhi/article/details/124848782

版权

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 纵向排列方式

我拿青春赌未来~

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css的弹性盒子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&gt
复制链接

扫一扫