flex布局 多种方法让两个盒子分布在左右两边

• 前端

方法一：

一个父盒子里面包含了两个子盒子的，可以用justify-content:space-between属性

 

 

 

 .parent {

 

display:flex;

 

flex-direction:row;

 

justify-content:space-between;

 

}

方法二：

flex布局 多种方法让两个盒子分布在左右两边

先将子盒子靠右对齐

display：flex；justify-content：flex-end；

然后再单独给红色盒子设置flex：1；

原理：利用flex：1，动态填充宽度

方法三：

可以给红色盒子设置margin-right：auto；

原理： 父盒子设定宽度后，设置margin-right：auto的话会自动占据剩余的全部宽度

 

 

本文来自网络，不代表协通编程立场，如若转载，请注明出处：https://net2asp.com/51becd15ef.html

赞 (0)
« 上一篇 1天前
下一篇 » 1天前

相关推荐