使用flex布局调换两个按钮的位置

最新推荐文章于 2025-05-21 22:41:22 发布

转载最新推荐文章于 2025-05-21 22:41:22 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lyyguniang/p/8623858.html

文章标签：

#c#

组件用的时antd的Modal组件，里面的按钮需要调换一下位置

今天发现用flex布局非常方便，代码如下：

display: flex;
justify-content: center;
flex-flow: row-reverse;

代码加在父级标签上即可

转载于:https://www.cnblogs.com/lyyguniang/p/8623858.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_30701521

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

使用flex布局调换两个div的位置

Zan_Z的博客

03-30

6433

直接上代码（flex布局太方便了，喜欢） <view class="leftheader"> <view style="display:flex; justify-content:space-between; flex-flow:row-reverse!important;"> <open-data class="userimg" type...

Flex------ 布局语法---知识积累

飞翔༒之翼

05-15

755

一、Flex布局是什么？ Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。 .box{ display: flex; //这个属性加在大盒子上 } 行内元素也可以使用Flex布局。 .box{ display: inline-flex; } Webkit内核的浏览器，必须加上-webkit前缀。 .bo...

参与评论您还未登录，请先登录后发表或查看评论

【css】 flex布局基本知识

dynsyx的博客

05-21

1082

Flexbox 是一种一维布局模型，用于处理元素在行或列上的排列。通过 flex-direction 定义主轴方向，可选 row、row-reverse、column 或 column-reverse。将容器设置为 display: flex 后，其子元素成为 flex 元素，默认沿主轴排列，不会拉伸但会缩小，沿交叉轴拉伸填满容器。flex-flow 是 flex-direction 和 flex-wrap 的简写，控制主轴方向和换行行为。flex 属性包含 flex-grow、flex-shrink 和

Flex布局

阿果子的博客

01-05

804

简单的Flex布局

css-两个元素交换位置

and_life的博客

05-06

2259

左</span><span>右

关于flex 改变路径的问题

taiweipeng的博客

09-02

214

1.把别人的项目拷到自己的电脑上，要改变两个文件的路径一个就是。actionscriptproject还有一个就是.flexProperties 把这两个文件中的路径换成自己电脑上的路径即可. 2.右击项目-->属性-->flex compliler 改成自己项目的路径. myeclipse 中svn 的插件地址 http://subclipse.tigris.org/upda...

element-ui中的this.$confirm中的message内容和按钮上下调换位置

09-25

默认情况下，这个消息会显示在上方，而两个操作按钮（通常是"确定"和"取消"）会放在下方。如果你想改变它们的位置，让按钮在上、消息在下，你可以通过自定义插槽（slot）来实现。在Vue模板中，可以在`.el-dialog__...

element-ui中的this.$confirm中的message内容和按钮上下调换位置，换一种方法

09-25

然而，element本身并没有提供直接配置来交换这两个元素的位置。不过，你可以通过自定义组件或者使用第三方库来实现这个需求。一种常见的方式是使用CSS覆盖默认样式。例如，你可以创建一个新的确认弹窗组件，并调整...

前端vue2+elementui帮我生成一个前端页面， 1.竖向分为头部和主体部分，头部宽度100%，高度60px，头部左侧两个input框，lable分别为：用例名称，脚本编号，右侧3个按钮是生成用例，生成脚本，调试 2.主体部分占据剩下高度，分为左，中，右三部分，宽度占比分别为40%，40%，20%， 3.主体左侧为左右两部分，分别为部件和接口选项，两个均为可以手动打开关闭的抽屉（使用elementui中的el-drawer），重要一点：我需要的是将部件用el-drawer包裹和接口选项整体用el-drawer包裹，有一个箭头的按钮在整体的右侧部分控制el-drawer的开关，箭头的按钮的位置根据抽屉的开合随之变化（打开状态箭头的按钮在整体的右侧，关闭状态保留箭头按钮宽度即可，两个按钮允许重叠，页面上必须展示按钮，确保可以点击），位置需要计算，部件宽度为35%，接口选项宽度65%，两个抽屉没有层级关系，独立开启关闭，不会相互影响，无论开启或关闭组件在左，接口选项在右 4.部件部分：竖向一个搜索框，输入关键字可对下面具体组件进行筛选，搜索框下是组件名称和图标，组件名称分别为：车门，车窗，座椅，前舱盖，雨刮器，光机幕布，后视镜这部分可使用列表渲染，每个组件展示为一行，左侧组件图标，右侧组件名称，，一行一列，依次向下 5.接口选项部分，竖向一个搜索框，输入关键字可对下面具体接口进行筛选，接口选项和左侧部件是有联动的，两者存在跨容器拖拽关系（必须使用vuedraggable实现），拖动左侧部件中的一个（每次只能拖动一个），到右侧接口选项区域，会触发事件，调取后端接口获取对应组件的接口列表（这里可以使用模拟数据），展示在接口选项部分，接口内容为：打开所有车窗。open_all_wins,控制车辆上电。power_on_off_control...,（可以放点模拟数据） 6.拖动组件到接口选项部分（必须使用vuedraggable实现），每一个组件对应的接口展示都是一个独立的二级树形结构，树形结构一级lable为组件名称，右侧有一个可以X，可以删除当前组件，树形结构二级内容就为每个具体的接口，每个接口头部都有一个多选按钮，可以展示多个，依次竖向向下展示 7.主体中间部分竖向依次为3部分，预置条件，测试步骤，环境恢复，宽度均占据主体中间部分宽度100%，高度分别为30%，40%,20%,左侧接口选项部分通过多选框勾选接口，勾选的接口组成一个list，通过拖拽将接口选项中的接口拖拽到右侧主体中间部分展示，支多选批量拖拽（必须使用vuedraggable实现）每个区域可视为独立区域，相互不影响，若一个区域拖入多个接口，根据先后依次排序，拖拽至中间主体部分的接口，在各自独立区域内，接口排序可以通过上下拖拽调换（必须使用vuedraggable实现）， 8.主体右侧为参数配置：由上至下第一行两个单选按钮，Machine，Relay，剩下为3个输入框，各占一行，lable分别为：机械控制踏板踩下去和抬起来之间的时间间隔（秒），踏板踩下去和抬起来的时间间隔（秒），踏板踩下去或抬起来需要继电器打开的时间（秒）请仔细分析以上需求，最重要的是左侧抽屉的开合状态，按钮位置，以及部件向接口选项拖拽，接口选项向主体中间拖拽之间联动拖拽关系的处理，给出详细分析和代码

最新发布

07-05

但这样按钮位置会重叠，所以我们可以将两个按钮放在一起，当两个抽屉都关闭时，两个按钮重叠在左侧区域的右侧边缘（左侧区域宽度为两个按钮的宽度）。因此，我们设置左侧区域（.left-main）的最小宽度为两个按钮...

前端vue2+elementui帮我生成一个前端页面， 1.竖向分为头部和主体部分，头部宽度100%，高度60px，头部左侧两个input框，lable分别为：用例名称，脚本编号，右侧3个按钮是生成用例，生成脚本，调试 2.主体部分占据剩下高度，分为左，中，右三部分，宽度占比分别为40%，40%，20%， 3.主体左侧为左右两部分，分别为部件和接口选项，两个均为可以手动打开关闭的抽屉（使用elementui中的el-drawer），重要一点：我需要的是将部件用el-drawer包裹和接口选项整体用el-drawer包裹，有一个箭头的按钮在整体的右侧部分控制el-drawer的开关，部件宽度为35%，接口选项宽度65%，两个抽屉没有层级关系，独立开启关闭，不会相互影响，无论开启或关闭组件在左，接口选项在右 4.部件部分：竖向一个搜索框，输入关键字可对下面具体组件进行筛选，搜索框下是组件名称和图标，组件名称分别为：车门，车窗，座椅，前舱盖，雨刮器，光机幕布，后视镜这部分可使用列表渲染，每个组件展示为一行，左侧组件图标，右侧组件名称，，一行一列，依次向下 5.接口选项部分，竖向一个搜索框，输入关键字可对下面具体接口进行筛选，接口选项和左侧部件是有联动的，两者存在跨容器拖拽关系，拖动左侧部件中的一个（每次只能拖动一个），到右侧接口选项区域，会触发事件，调取后端接口获取对应组件的接口列表（这里可以使用模拟数据），展示在接口选项部分，接口内容为：打开所有车窗。open_all_wins,控制车辆上电。power_on_off_control...,（可以放点模拟数据） 6.拖动组件到接口选项部分，每一个组件对应的接口展示都是一个独立的二级树形结构，树形结构一级lable为组件名称，右侧有一个可以X，可以删除当前组件，树形结构二级内容就为每个具体的接口，每个接口头部都有一个多选按钮，可以展示多个，依次竖向向下展示 7.主体中间部分竖向依次为3部分，预置条件，测试步骤，环境恢复，宽度均占据主体中间部分宽度100%，高度分别为30%，40%,20%,左侧接口选项部分通过多选框勾选接口，勾选的接口组成一个list，通过拖拽将接口选项中的接口拖拽到右侧主体中间部分展示，支多选批量拖拽每个区域可视为独立区域，相互不影响，若一个区域拖入多个接口，根据先后依次排序，拖拽至中间主体部分的接口，在各自独立区域内，接口排序可以通过上下拖拽调换， 8.主体右侧为参数配置：位置保留，内容空着

07-04

注意：这两个按钮的位置固定，不会随抽屉的开关而移动。 3. 数据联动：当从部件区域拖动一个组件到接口选项区域时，模拟请求后端接口，获取该组件的接口列表，并展示为树形结构。 4. 中间部分：三个区域（预置条件、...

CSS：Flex布局

李建雨的博客

11-12

812

Flex布局的优势和特点 flex布局是一种浏览器提倡的布局方式，它的渲染性能较高。现在市面上大半部分浏览器都能对flex布局进行兼容（IE9.0以下不能兼容）。flex布局的简单，能够方便地将子盒子放在父盒子的两侧、将多个子盒子用多种方式在父盒子内部进行排列，并且不用担心子盒子类似于浮动的脱标问题。 Flex布局的组成部分 1、弹性容器即是父盒子，在父盒子css中添加display：flex；此时父盒子被称为“弹性容器”。 <head> <meta charset=

flex布局修改

2202_75830286的博客

10-06

234

/view>

CSS day12 移动端布局练习

qq_34620296的博客

09-13

938

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...

flex布局与定位

Z15800020057的博客

06-26

1333

flex布局，属性与常见定位

Flex弹性盒子布局

Code18112223576的博客

11-10

780

Flex弹性盒子布局

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

m0_59735348的博客

11-30

1万+

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

flex布局(二) : 位置与排列方式

h284306976的博客

01-16

5068

flex布局(二) : 位置与排列方式 1. flex-direction 决定主轴方向改变主轴方向为：水平row(默认) 或者垂直column 并且设置item元素的排序方式start->end(默认) 或者 end->start row row-reverse column column-reverse <style> .container{ /* 改变...

div让两个按钮并排显示在一行中