display:flex 元素垂直居中，有间距，右对齐，gap属性

已于 2022-04-14 18:21:25 修改
阅读量2.8k 收藏 2
点赞数 1
分类专栏： web前端 文章标签： javascript
于 2021-08-30 12:43:39 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xutongbao/article/details/119994687
版权

 

.m-design-header-action{display: flex;padding: 0 18px 0 0; align-items: center; width: 180px;gap: 8px;text-align: right;justify-content: flex-end;}

徐同保
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
详解CSS中的display:flex||inline-flex属性
09-27
主要给大家介绍了CSS中的display:flex和display:inline-flex属性，文中分别通过两段实例代码给大家介绍了display:flex和display:inline-flex的使用效果，感兴趣的朋友们可以参考借鉴，下面来一起看看吧。
实现div垂直居中的display:table-cell方法示例介绍
09-25
要实现盒模型中的div居中，可以使用display:table-cell方法且兼容多浏览器，下面有个示例，感兴趣的朋友可以练练手
css display 左右对齐 技巧
最新发布
m0_65730686的博客
01-25 748
css display 左右对齐 技巧
display：flex布局语法
11-20
flex 弹性盒子布局语法，关于廖雪峰老师网站学习笔记的分享，
详解CSS中的flex容器与flex属性
09-24
主要介绍了CSS中的flex容器与flex属性,是CSS入门学习中的基础知识,需要的朋友可以参考下
使用display:inline-block居中没有宽度的元素
01-21
在一个元素内居中另一个元素有时候会很困难.对于常规，静态定位的元素，可以让他向左或向右浮动，或者使用text-align属性让他在父元素内居左，居中或居右.还可以利用自动外边距(margin:0 auto;)来居中元素.这些方法的问题在于，要居中的元素必须是有宽度的.像这里用于构成菜单的html列表，他可能是根据数据库信息动态生成的，或者说将来有可能手工编辑，总之你不可能提前设定他的宽度. 在display属性的值中，inline-block具有一些特殊的混合行为.正如他的名字所暗示的，它具有块级元素的特点，也有行内元素的行为.从块级元素角度来说，可以为他设定外边距和内边距，也可以通过它简便
【CSS布局】Flex布局中元素换行设置间距问题
一种简单易食的杂烩????
03-08 2万+
flex布局解决换行问 1. 父元素定高的情况下，直接使用 align-content: space-between; ul{ list-style: none; display: flex; height: 614px; flex-direction: row; flex-wrap: wrap; justify-content: space-bet.
display:flex属性记录
10-28 537
常用： flex-direction row flex容器的主轴被定义为与文本方向相同。 主轴起点和主轴终点与内容方向相同。 row-reverse 表现和row相同，但是置换了主轴起点和主轴终点 column flex容器的主轴和块轴相同。主轴起点与主轴终点和书写模式的前后点相同 column-reverse 表现和column相同，但是置换了主轴起点和主轴终点 flex-wrap ...
css display:flex布局
//Case
01-22 232
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>flex layout</title> <style> .container {
display:flex布局方式
brimen的博客
03-04 2989
2009年，W3C提出了一种新的方案–Flex布局，可以简便、完整、响应式地实现各种页面布局。目前已得到所有现在浏览器的支持。 Flex是Flexible Box的缩写，翻译成中文就是“弹性盒子”，用来为盒装模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。 一、容器属性 1、基本概念 采用Flex布局的元素，被称为Flex容器(flex container)，简称“容器”。其所有子元素...
flex布局如何让flex项之间的间距一样大
热门推荐
u010007013的博客
12-09 5万+
之前在使用flex布局的时候，为了让flex项之间产生间距，设置了如下属性： ul{ display:flex; flex-wrap:wrap; justify-content:space-around; } li{ width:30%; height:100px; } 设置之后发现中间的间距确实一样大,但是左边第一个和右边第一个flex项距离主轴两端的距离却和中间的间距不一...
CSS Grid 布局指南
反正你猜不到我是谁
09-06 1260
说明 在CSS当中，布局一直是一个非常重要的话题，在漫长的发展时间当中，出现了很多种布局方案，但是就整体来说主要分成解决PC端和移动端布局的两大类，在这两大类中包括例如传统的table布局，后期的display+float+position的布局方案，再比如CSS3中新增加的Flex布局和多列布局等等，而在本篇博文中，将会主要讲述一种比较新的布局方案Grid布局。 正是因为Grid布局的年纪较小，所以从兼容性上来说，要逊色于Flex布局，但是从实际的开发效率上来讲，却是比Flex更加强大，这也是本篇博文的出
Css中，display属性值flex（弹性布局）、grid（网格布局）
害。代码嘛，可不就是敲着玩！
10-11 1705
display为flex，用来定义一个容器元素为一个弹性容器（flexcontainer），即其子元素（flexitems）也成为弹性项目（flexitems），从而实现弹性布局。设置display为flex时，还可相应设置子元素的一些样式。
解决flex gap兼容性问题
wz9608的博客
05-05 5362
一个项目写下来，在网页端预览的时候正常，结果到产品经理手上。设计稿样式实际产品手机上样式产品：“你这玩意儿怎么没间距？我：“为什么我的正常？？？呐呐呐你看我手机（来自RedmeK50Utral）”产品：“哦，你看我的手机（来自荣耀20）”我：“。。。至此我看了看我代码中的一堆gap，再看了看她那还不退休的老安卓，陷入了沉思！以上就达到了gap同样的效果，并且保持了良好的兼容性。妈妈再也不怕兼容性不好的手机用不了gap啦！总之不管用的什么打包工具，vite也要webpack也好，原理是一样的。
使用flex+gap实现平均分下面的块布局不使用margin
weixin_65084919的博客
08-30 472
* 此处算法 calc((100% - (n - 1) * 间隔gap) / 3)*/
flex布局中，元素等间距设置，包括第一个元素的左边，最后一个元素的右边，也等间距
m0_73829151的博客
11-16 2220
通过上面代码，可以实现子元素的等间距排放。但是第一个元素和末尾的元素，到左边和右边 不会等间距排放，可以通过伪元素来实现。这样就 可以实现等间距排放了。在做下面的小程序中遇到了这个问题，记录下，希望能给你带来方便。项目中很多地方会用到等间距排放的场景，使用flex 布局可以很方便的实现。
使用display:flex实现多个子标签等分间距排列
monkey_xiaoda的博客
01-03 7017
今天做项目遇到一个问题：ul标签下有若干个li标签（个数不固定），想要实现平均等分的排列；如效果图： 因为li标签的个数是不固定的，所以不想使用给固定的margin来实现，这样的话太生硬了； 于是想到了使用display:flex;justify-content:space-between;align-items:center;（有浏览器兼容问题） 但出现了如下问题： li标...
CSS使用flex换行之后行距变大问题
V_AYA_V的博客
02-01 6353
在css中父元素高度确定，使用flex，设置了换行属性之后，元素自动换行。换行之后每行的间距变大，自动撑满了父元素，见下图： 预想中的效果： 实际效果： 使用flex属性之后，子元素并没有按照预想的排列方式在页面显示，样式代码如下（less） .list{ height: 200px; width: 465px; border: 1px solid #ccc; display: flex; flex-wrap: wrap; box-sizing: .
常用的几种布局方式---Flex 布局(垂直居中展示）
weixin_64310738的博客
02-14 1万+
常用的几种布局方式---Flex 布局(垂直居中展示）
display: flex 上下左右居中
08-20
要使`display: flex`元素上下左右居中，可以使用以下方法： 1. 设置父元素为`display: flex`布局，并使用`justify-content: center`和`align-items: center`属性将子元素水平和垂直居中。 2. 如果要将子元素的上下左右距离自行设置，可以在子元素上使用`margin-top`和`margin-bottom`属性来调整子元素与父元素的距离。 3. 另外，在代码中还可以看到`padding`和`gap`属性的使用。这些属性可以用来设置子元素之间的间距和边距。 下面是一个示例代码，展示如何使用`display: flex`实现上下左右居中的效果： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>居中显示</title> <style> html,body { width: 100%; height: 100%; display: flex; flex-direction: row;/*这里可以不写，flex布局默认方向横向即row*/ justify-content: center; align-items: center; } .div1 { display: flex; justify-content: center; align-items: center; width: 30em; height: 30em; border: 2px solid green; } .div2 { width: 10em; height: 5em; border: 2px solid red; } .div3 { width: 10em; height: 5em; border: 2px solid purple; } </style> </head> <body> <div class="div1"> div1 <div class="div2"> div2 </div> <div class="div3"> div3 </div> </div> </body> </html> ``` 通过上述代码，可以实现将`.div1`元素及其子元素上下左右居中显示的效果。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [display:flex 元素垂直居中，有间距，右对齐，gap属性](https://blog.csdn.net/xutongbao/article/details/119994687)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [css使用flexbox布局容器内多元素水平居中](https://download.csdn.net/download/weixin_38703968/13672753)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [display: flex实现元素居中，以及各种居中方法](https://blog.csdn.net/awjp86316/article/details/101100969)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

徐同保

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值