display flex 左右_js实现可调节左右栏

最新推荐文章于 2024-04-27 09:43:02 发布
最新推荐文章于 2024-04-27 09:43:02 发布
阅读量224 收藏
点赞数
文章标签： display flex 左右
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39712455/article/details/111683931
版权

我们通常看到的左右栏调节是怎么实现的呢？

49d919590d385b684be72e99c361aa85.png

先来一张简单的最终效果图~

大体思路：通过mousedown事件触发mousemove事件并计算左边宽度，当mouseup事件触发时移除掉对mousedown与mousemove事件的监听。

来实时操作一下~

构建页面

首先将页面画出来

html部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js调节宽度</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="left"></div>
        <div class="line">
最低0.47元/天 解锁文章
weixin_39712455
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用flex布局调换两个div的位置
Zan_Z的博客
03-30 6028
直接上代码（flex布局太方便了，喜欢） <view class="leftheader"> <view style="display:flex; justify-content:space-between; flex-flow:row-reverse!important;"> <open-data class="userimg" type...
flex布局 js基础
haisyn的博客
08-16 1555
js基础 flex布局
JS之弹性盒模型详解
qq_41260655的博客
10-13 2057
弹性盒模型 作用 :用于页面的布局 对于布局之前知道哪些？ 1、display:inline:缺点：文本极限对齐，解析空格 2、浮动：flow（本质：图文混排）：缺点：高度塌陷 3、定位：相对，绝对 弹性布局是父元素控制子元素的布局方案，不需要计算，自动分配 父元素：display:flex //开启弹性盒模型（默认子元素，从左向右排列，（无论块级还是行内元素）） 我们平时： display：block；块级元素本身本质是display:block-block(对外，对内都是表现块级元素) display
css3 flex笔记整理
weixin_34092370的博客
06-02 166
flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。 一、容器的属性 flex-direction flex-direction: row | row-r...
display:flex的用法
virus111222的博客
06-28 886
子元素会自动填充容器，并根据容器的宽度进行调整。如果容器中的子元素数量增加，它们的宽度会自动缩小以适应容器。子元素会自动填充容器，并根据容器的宽度进行调整。如果容器中的子元素数量增加，它们的宽度会自动缩小以适应容器。将图片自动变小了，放在一行里面（ 将元素容器设置为弹性布局时，元素以弹性布局方式显示，可以通过设置父元素的。如果没有设定display:flex是什么效果。常用于实现响应式布局和灵活的元素排列。将元素容器设置为弹性布局时，会自动换行，但图片大小不会变。我们放多一点图片看看。
详解flex实现左右布局中按钮溢出隐藏效果
09-22
在网页布局设计中，我们经常遇到需要实现左右布局的情况，其中按钮或文本可能会因为内容过多而溢出。本文将深入探讨如何使用Flex布局来解决这个问题，特别是如何在左右布局中实现按钮溢出隐藏的效果。 首先，让我们...
flex_style.rar_flex_flex style_style flex
09-23
在"flex_style.rar_flex_flex style_style flex"这个压缩包中，我们可能找到了关于使用Flex样式的实例，这对于初学者理解和掌握Flex布局非常有帮助。 1. **Flex容器与Flex项目**： - Flex容器：任何具有`display: ...
jQuery实现点击左右按钮两行列表滚动效果.zip_jQuery 实现点击左右按钮_js 滚动列表_juqery 点击滑动_两
09-23
display: inline-block; } ``` 3. **jQuery实现**：接下来，我们将编写jQuery代码来处理按钮点击事件。当用户点击“左”或“右”按钮时，我们改变列表的位置，模拟滚动效果。 ```javascript $(document).ready...
Display_Port_1.2.zip_Display 1.2_DisplayPort1.2_display port_dis
09-24
DisplayPort 1.2是显示接口技术的一种...通过阅读“Display_Port_1.2.pdf”文档，你将深入理解DisplayPort 1.2的详细规范、功能实现和实际应用，对于从事显示开发的专业人士来说，这份资料无疑是不可或缺的参考资料。
Smg_display.rar_SMG_Display_smg display
09-19
标题中的"Smg_display.rar_SMG_Display_smg display"指的是一个关于STC89C52单片机的项目，该项目使用LCD显示屏进行学号的滚动显示。"SMG Display"可能是指项目的名称或者特定的显示模式。描述进一步解释了项目内容...
弹性布局（display:flex；）属性详解
m0_61044901的博客
12-30 1092
弹性布局（display:flex;）属性详解
display:flex详解
Anony_me的博客
06-29 1万+
1. 属性指定了弹性子元素在父容器中的位置。2. 内容对齐（）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐3. 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。4. 属性用于指定弹性盒子的子元素换行方式。5. 属性用于修改 flex-wrap 属性的行为。类似于 align-items, 但它不是设置弹性子元素的对齐，而是设置各个行的对齐。6. 属性用于设置弹性元素自身在侧轴（纵轴）方向上的对齐方式。（1）flex-direction的值有: ：横向从左到右排
display属性_JS 之display
weixin_39727706的博客
11-29 5859
阅读本文约需要6分钟大家好，我是你们的导师，我每天都会在这里给大家分享一些干货内容(当然了，周末也要允许老师休息一下哈)。上次老师跟大家分享了CSS 之选择器的知识，今天跟大家分享下JS 之display的知识。1JS 之display你知道『回』字有四种写法，但你知道display有32种写法吗？今天我们一一道来，让你一次性完全掌握display，从此再也不用对它发愁。从大的分类来讲...
弹性盒子（display: flex）布局超全讲解|Flex 布局教程
热门推荐
肥晨开发的学习之路
06-16 12万+
弹性布局（Flex布局）是一种现代的CSS布局方式，通过使用display: flex属性来创建一个弹性容器，并在其中使用灵活的盒子模型来进行元素的排列和定位。
弹性布局(flex)从认识到使用让你一看就懂
最新发布
Lan_0316的博客
04-27 942
什么是弹性布局？弹性布局（Flex布局）是一种CSS布局方式，通过使用display: flex属性来创建一个弹性容器，并在其中使用灵活的盒子模型来进行元素的排列和定位。
css中的常用关键属性
weixin_44198018的博客
07-15 273
牢记Html\Css\js才是前端的三大基石。多重视基础然后才去研究上层建筑（Vue、React、webpack） //css弹性布局 display:flex; //父级元素设置flex可以调节子元素的位置 *align-items:flex-start | flex-end | center | baseline（项目的第一行文字的基线对齐） | stretch（默认：如果项目未设置高度或设为auto，将占满整个容器的高度） //项目在交叉轴的对齐方式 *justify-content:fl
什么是弹性（display: flex）布局 ？
weixin_41044151的博客
02-25 11万+
display:flex 意思是弹性布局，它能够扩展和收缩 flex 容器内的元素，以最大限度地填充可用空间。Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为Flex布局。 .box{ display: flex; } 注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。 它可以用于以下四个方面： 1、在不同方向排列元素 2、重新排列元素的显示顺序 3、更改元素的对齐方式 4、动态地将
JS(1)--flex布局
tansy_big_rabbit的博客
02-09 1067
弹性盒布局(flex-box)运用及其广泛，现在说一说常用的属性 1.使用flex布局 display:flex 2.flex常用的5大属性 flex-direction决定主轴的方向 row 主轴在水平方向，起点在左端（常用，默认值） row-reverse主轴在水平方向，起点在右端 column 主轴在垂直方向，起点在上端（常用） column-reverse 主轴在...
display:flex 布局详解（1）
weixin_38606332的博客
06-30 2万+
布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。一、Flex布局是什么？Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。.box1{ display: flex;}.box2{ display: i...
Flex_AS3与Java实现Socket通信教程
"Flex_AS3与Java的Socket通信技术实现" 在Web开发中，有时我们需要在客户端（如浏览器中的Flash）和服务器端（通常由Java等后端语言提供服务）之间建立实时、低延迟的数据通信。Flex AS3（ActionScript 3）是Adobe ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值