css--flex布局一些简单的使用

最新推荐文章于 2025-01-06 08:46:52 发布

GA_118

最新推荐文章于 2025-01-06 08:46:52 发布

阅读量109

点赞数

文章标签：前端

本文链接：https://blog.youkuaiyun.com/GA_118/article/details/128650393

版权

文章介绍了Flex布局，也称为弹性盒布局，主要用于快速创建动态布局。主要内容包括在CSS或LESS中设置`display:flex`来启用flex布局，使用`justify-content`属性调整元素的水平分布，如`center`居中，`space-between`平均分布等。还提到了`flex-direction`属性用于改变布局方向，例如`column`实现竖向布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

页面布局里面有一种为了快速达到布局效果，从而出现了叫 flex布局，又叫弹性盒布局

因为是弹性盒布局，所以大多数情况是使用在div盒子里面

 <div className='box1'>
       <div className="box-li1"></div>
       <div className="box-li2"></div>
       <div className="box-li3"></div>
 </div>

主要是在css或者less里面，这里主要展示less

.box1{
    border: 5px black solid;//边框
    display: flex;//设置盒子为弹性盒
    justify-content: space-around;//弹性盒的默认值
    height: 80px;
    .box-li1{
        border: 5px blue solid;
        width: 50px;
        height: 50px;
    }
    .box-li2{
        border: 5px yellow solid;
        width: 50px;
        height: 50px;
    }
    .box-li3{
        border: 5px red solid;
        width: 50px;
        height: 50px;
    }
}

出现的效果

而这就是flex布局，简单的使用了其中的justify-content 属性

注意：要想使用flex布局，一定要在父级盒子里面加 display: flex; 否则弹性盒的效果不会显示

也可以让里面的盒子达到上下居中，在父级盒子里面添加

  align-items: center;//让盒子 在y轴上居中

效果就会变成

在加了上面这两条属性的基础上，我们把 justify-content 属性值更换一下

justify-content: center;//布局居中

也可以实现平均分布的布局

justify-content: space-evenly;//让里面的盒子平均分布

还有让盒子左右居中

justify-content: space-between;//让里面的盒子左右平均分布

也可以改变 flex布局的方向，当你父级盒子设置高度的时候，里面的盒子就会压缩

flex-direction: column;//让盒子竖着布局

这些都是一些基础的使用方法，还有很多的flex属性和属性值，比如：

 justify-content:flex-end；//右对齐
 flex-direction: row;//左对齐 ，也是默认值
 flex-direction: row-reverse;//让元素沿着行的方向显示，但是起始线和终止线位置会交换
flex-direction: column-reverse;//