位置: IT常识 - 正文
flex布局 多种方法让两个盒子分布在左右两边(flex的几个常用布局)
发布时间：2024-01-07flex布局 多种方法让两个盒子分布在左右两边 
本文链接地址:https://www.jiuchutong.com/zhishi/289003.html
转载请保留说明！
推荐整理分享flex布局 多种方法让两个盒子分布在左右两边(flex的几个常用布局)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:flex布局方法,flex布局使用场景,flex布局方法,flex布局视频教程,flex布局教程实例篇,flex布局方法,flex布局方法,flex的几个常用布局,内容如对您有帮助，希望把文章链接给更多的朋友！
方法一：
一个父盒子里面包含了两个子盒子的，可以用justify-content:space-between属性
<div class='parent'> <div class="left"></div> <div class="right"></div> </div>
.parent { display:flex; flex-direction:row; justify-content:space-between; }
方法二：
先将子盒子靠右对齐
display：flex；justify-content：flex-end；
然后再单独给红色盒子设置flex：1；
原理：利用flex：1，动态填充宽度
方法三：
可以给红色盒子设置margin-right：auto；
原理： 父盒子设定宽度后，设置margin-right：auto的话会自动占据剩余的全部宽度
上一篇：YOLOv8 目标检测 | 自定义数据集(yolov8目标检测测试输出类别个数)
下一篇：GAN评价指标代码(FID、LPIPS、MS-SSIM)(评价指标mae)
