用flex实现两个子元素一左一右分布

已于 2024-01-07 16:44:57 修改
阅读量920 收藏 8
点赞数 8
分类专栏： 前端-html 文章标签： html css vue.js
于 2024-01-04 22:19:07 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_61768030/article/details/135397215
版权

父元素: display:flex;

           justify－content:space－between;

     到这里，两个子元素将靠近左边和右边分布

如图所示:

23e893498ac24d4da1abf865bb1671b4.jpg

 3833485d407c42f6866b1cd428c69556.jpg

 67046924cb964436ba0251bface4a27c.jpg

如果再加上这个

  左子元素:flex:1;

  右子元素:flex:1;    

两个子元素的宽度会平均分配父元素的剩余空间

如图所示:

536158ef1f3c4128bbd70a722873b727.jpg

7ba055313d5443268aa81f14d6ce8f80.jpg

 由于笔者是在做一个小项目的时候做的笔记，效果图并没有非常好看，望海涵～❤️

op冲鸭！
关注
  • 8
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
flex，多种方法做到一个在左，一个在右边的布局。
shaoduo的博客
08-31 1万+
　　在做一个列表的时候，单个Flex容器内有三个内联的靠右对齐的按钮，效果如图： 　　而我想让红色按钮靠左，而另外两个蓝色按钮保持靠右怎么办？ 方法一： 　　为红色按钮单独加上：flex: 1 　　此效果的原理是：利用flex:1，动态填充宽度 方法二： 这个时候我们可以为红色按钮单独加上：margin-right : auto； 　　效果如图： 　　此效果的原理是： 　　margin-right 不设置的话默认是0，父容器width 定宽之后...
flex弹性盒布局最后一行左对齐的实现思路
01-19
使用flex布局，如果是九宫格的话正好可以平分，如图 如果是我们只需要八块，如图 但是我们想让最后一块左对齐，依次排列，需要在元素的父级增加伪元素after，如图 <div class=box> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> ul{ display: flex; flex-wrap: wrap; justify-content: space-between; } ul:afte
自适应三栏式
m0_55041880的博客
07-21 337
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc
Flex布局实现一部分元素左对齐，一部分右对齐
最新发布
金乌的博客
03-13 530
原理：margin-right 不设置的话默认是0，父容器width 定宽之后，margin-right取值为。原理是：利用flex:1，动态填充宽度。，则自动占据了剩余的全部宽度。
详解flex实现左右布局中按钮溢出隐藏效果
09-22
主要介绍了详解flex实现左右布局中按钮溢出隐藏效果的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
flex布局实现左侧文字溢出省略右侧文字自适应
09-22
主要介绍了flex布局实现左侧文字溢出省略右侧文字自适应的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
flex布局 多种方法让两个盒子分布在左右两边
m0_59735348的博客
11-30 1万+
一个父盒子里面包含了两个子盒子的，可以用justify-content:space-between属性。
简单易懂的 flex 布局技巧：前面盒子左对齐，后面盒子右对齐
Shids_的博客
01-23 1万+
简单易懂的 flex 布局技巧：前面盒子左对齐，后面盒子右对齐
Flex布局：实现div一个往左一个往右效果
热门推荐
weixin_43917285的博客
02-21 2万+
Flex布局：具体内容可以参考阮一峰老师的日志 链接http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 先放实现后的效果图： 效果描述：左右div分别靠左靠右展示，其内容垂直居中显示 实现思路：使用 flex 布局中的 justify-content 属性改变两个div在主轴上的对齐方式，在两个div内部可以继续设置flex布局使内容...
flex布局让同一行内元素既有左对齐又有右对齐的分布
凌晨三点
06-04 1073
FLEX布局让同一行元素左右分布
flex布局优化(两端对齐，从左至右)
秋来九月八
03-20 1万+
flex布局是前端常用的布局方式之一，但在使用过程中，我们总是感觉不太方便，因为日常开发中，大多数时候，我们想要的效果是这样的即左右两端对齐并顶满，小盒子左右间距一致，并且从左至右排布。今天主要就来讨论，通过css，有几种方式来实现，以及它们的优缺点。三种方式中，第二种方式最简单，但兼容性有限；第一种方式代码量不少，兼容性适中，而且的问题严重，最后一种方式，最推荐，虽然有一些计算，并且也要合理分配宽度，但其兼容性最好，基本没啥场景不能适用，正所谓一招鲜，吃遍天。
使用ColdFusion和Flex构建您的第一个数据管理应用程序
02-27
火龙果软件工程技术中心  使用AdobeColdFusion8和Flex3构建富Internet应用程序从来没有像现在这么简单。结合使用这些技术，开发人员能够比以前更快地创建具有表现力的应用程序。本文侧重于使用FlexDataGrid创建简单的UI，从而显示跨所有连接客户机同步的结果集。一个用户更新了DataGrid后，所有其他访问该数据的用户可以立即收到这些更新。这意味着您不必再担心竞态条件和数据覆盖问题。对于初级教程来说，这似乎有点复杂，但我认为您一定会对ColdFusion8、FlexBuilder3和LiveCycleDataServicesES如此轻松地完成这个任务感到惊叹不已。可以
Flex中实现对一个text渲染不同的字体颜色示例
10-27
本文为大家详细介绍下Flex中如何实现对一个text渲染不同的字体颜色，具体的实现思路及代码如下，有兴趣的朋友可以参考下哈，希望对大家有所帮助
并排两个div，左边固定div宽度200px，右边div自适应的几种实现
l1013000729的博客
07-26 748
<div class= "container"> <div class="left"></div> <div class="right"></div> </div> <style> /*方法一： BFC(块级格式化上下文)*/ .container{ width:1000px;height:400px;border: 1px solid red; } .l...
flex布局
weixin_51178398的博客
04-11 591
flex布局原理，常见属性
两个div平分左右的布局样式怎么写
weixin_35757531的博客
01-03 3423
在网页布局中，使用 CSS 可以很方便地将两个 div 平分左右。可以使用如下的 CSS 样式： .container { display: flex; justify-content: space-between; } .left { width: 48%; } .right { width: 48%; } 使用这种方式，将容器元素(如 div)的 display 属性设为...
经典布局 （flex和传统两种实现） 左右两栏式
m0_49515138的博客
02-21 2857
right:宽度和父级一样，设定margin-right:left的宽度px,宽度随父级变化而变化（固定+自适应）当主轴方向为 column时，上面设置高度，宽度和父级一直，下边flex:1。也就是说，当主轴方向是row的情况下，左边设置宽度，右边flex:1。right: 定宽高： position: absolute top: 0 right 0。left： 定宽高： position: absolute top: 0 left: 0。left,right:定宽，定高，float:left。
使用flex布局实现三个子元素，前两个靠左，最后一个靠右布局
06-01
可以使用以下的CSS代码来实现该布局： ```css .parent { display: flex; justify-content: space-between; } .parent > *:first-child, .parent > *:nth-child(2) { margin-right: auto; } ``` 其中，`.parent` 是父元素的类名，`>` 表示选择 `.parent` 的直接子元素，`:first-child` 表示第一个子元素，`:nth-child(2)` 表示第二个子元素（`nth-child` 中的数字可以根据实际情况进行调整）。`justify-content: space-between` 表示将子元素沿着主轴均匀分布，并且两端靠边。`margin-right: auto` 表示将前两个子元素的右边距自动调整为最大，从而将它们靠左对齐，而最后一个子元素则会自动靠右对齐。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值