腾讯云
开发者社区
文档
建议反馈
控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
搜索
搜索
关闭
发布
登录/注册
精选内容/技术社群/优惠产品,
尽在小程序
立即前往
文章
问答
视频
沙龙
1
回答
什么时候挠曲-生长转换为弹性收缩,反之亦然?
css
、
flexbox
我不明白是什么让弹性物品从成长转变为收缩行为?一开始我以为它是flex-basis值,但是如果只有一个项有,或者没有呢? 此外,flex-basis上的规范说: 基于flex的CSS属性指定了flex基,它是flex项的初始主尺寸。 那是什么意思?如果我有一个项目,其余的都是默认的,为什么它的起始值通常比值大一点呢?增加的空间从何而来?
浏览 5
提问于2016-10-10
得票数 9
回答已采纳
2
回答
理解柔韧生长
html
、
css
、
flexbox
、
flex-grow
我有3个div,如果我将flex: 0.5给前两个div,如果我给出了flex-wrap: wrap,最后一个div应该移到下一行。如果我错了,请改正。 以下是我的html / css: .parent { display: flex; height: 100px; background-color: red; flex-wrap: wrap; } .child-1 { background-color: green; flex: 0.5; } .child-2 { background-color: yellow; flex: 0.5; } .child-
浏览 3
提问于2016-06-03
得票数 9
回答已采纳
2
回答
使用flex,一个元素集中对齐,另一个元素在中间和右边之间间隔。
html
、
css
、
flexbox
我有一点麻烦,要生产下面的弹性箱。我想要一个中央对齐的“标题”,右边有一些按钮(2,3,4)。 下面的代码使我更加接近,但是当窗口调整大小时,它没有完全对齐,并且丢失了它。 有什么建议吗? .header { display: flex; height: 50px; align-items: center; justify-content: center; } .title { width: 250px; margin-left: auto; margin-right: 15%; } .btn-group { margin-right: 15%
浏览 3
提问于2020-01-31
得票数 1
回答已采纳
2
回答
如何在flex容器中放置flex项?
css
、
flexbox
我有一个flex容器,它沿着主轴上的一行对齐子元素。为了在两个div之间保留一些空格,我给它留出了一个空格来表示它的调整内容。 我也给左边的div增加了3,而右边的div保持不变为1。 我的目标是在左边显示一个特色博客帖子(因此flex增长3),在右边显示侧边栏(因此flex增长1)。我还想在两个div之间留出空格。 我的代码不允许两个div在它们之间共享空间,因为它们彼此接触。 下面是我的代码: <body> <nav role="navigation"> <ul> <li><a href="
浏览 0
提问于2017-02-01
得票数 3
2
回答
CSS -断开网格元素并拉伸到列中的最宽位置
html
、
css
、
sass
我一排有两个按钮,一个比另一个宽。如果视口变得太小,按钮应该“断开”,这意味着它们位于一列中。在这种情况下,较小的按钮应该将其宽度拉伸到较宽的按钮的宽度。 我准备了一个codepen,模拟我现在的立场: .outer { display: flex; justify-content: center; } .inner { display: inline-grid; grid-template-columns: repeat(2, minmax(min-content, max-content)); grid-gap: 16px; } button { border:
浏览 12
提问于2020-11-13
得票数 2
2
回答
固定位置使我的头被推到右边。
html
、
css
、
flexbox
当我没有固定的时候,我的标题就会得到它的容器的全部宽度。 html { font-size: 32px; } body { text-align: center; } header { display: flex; justify-content: center; align-items: center; font-size: 2.25rem; padding: 0.625rem; border-bottom: 3px solid black; font-family: 'Cinzel Decorative
浏览 5
提问于2021-05-08
得票数 1
回答已采纳
1
回答
flex-增长不像预期的那样工作(flex项目没有我所期望的宽度)
css
、
google-chrome
、
internet-explorer-10
、
flexbox
我试图使用flex CSS属性将一组元素放入一个整洁的小框中。 这看起来正是我想要的IE10,但Chrome显示它是非常不同的。我基本上有: 集装箱 复选框(flex:5),应该足够宽,以显示D,但不太宽。 文本输入(flex:10),应占用所包含内容宽度的一半多一点。 确认按钮(flex:6),应该足够宽,以包含其文本,但不多。 它在IE中运行得很好,但在Chrome中,前两个元素占据了每个元素宽度的50%,使得确认按钮从末尾掉下来。 我的Flex逻辑是错的,还是Chrome搞砸了?
浏览 5
提问于2013-04-10
得票数 2
1
回答
如何避免在Firefox中使用滚动条包装长列表中的元素
html
、
css
、
firefox
我有一个长的弹性列表,它应该包装它的项目(按钮),当他们没有足够的空间(弹性包装)。然而,一旦列表得到一个滚动条,即使有足够的空间,项目也会被包装在Firefox中。 Chrome按预期并排显示按钮。 (我在这里使用Vue,以保持HTML简单。它实际上只创建文本/按钮元素30次) new Vue({ el: "#app", }) body, html { margin: 0; } .container { position: absolute; height: 100vh; overflow: auto; } .row { display:
浏览 15
提问于2022-05-23
得票数 0
回答已采纳
3
回答
当你将鼠标悬停在文本上时,如何让文本在不颤动的情况下发生变化?
css
、
hover
、
pseudo-element
、
css-content
据我所知,CSS可以用来以一种基本的方式改变:hover上元素的内容。我正在使用这个代码 HTML: <button><span>3 replies</span></button> CSS: button {width:6em} button:hover span {display:none} button:hover:before {content:"Reply!"} 但是当我将鼠标悬停在按钮上时,它就会剧烈地抽动。 我希望我的能像的音乐播放器一样流畅 当您将鼠标悬停在lease、premium或trackout价格下的某个按钮
浏览 31
提问于2013-03-18
得票数 2
5
回答
同样宽度的弹性容器-增长不起作用
html
、
css
、
flexbox
、
flex-grow
我试图使用flex创建相同宽度的flex项,但它们会根据flex项中子级的数量而不断更改宽度。 正如您所看到的,正确的绿色容器要小得多,尽管两者都有弹性增长:1 我怎么才能解决这个问题?谢谢! span { display: inline-block; width: 10px; height: 30px; border: 1px solid red; } .container { display: flex; display: -webkit-flex; border: 1px solid blue; width: 200px;
浏览 0
提问于2015-02-24
得票数 8
回答已采纳
1
回答
对齐项目:居中覆盖对齐内容:空格环绕
css
、
flexbox
我想要有一个居中的弹性列布局,一些项目在一行中,它们之间有空格。 html: <div class="flex"> <h1>Welcome</h1> <p> Before you start there's a short introduction </p> <p> <b>Do you want to see it?</b> </p&
浏览 16
提问于2020-06-19
得票数 2
4
回答
使挠性物品伸长全高度,垂直集中其内容。
css
、
flexbox
我有一个水平的挠曲盒(即flex-direction: row,即并排)和一些项目。每个项目可以是一行文本,也可以有多行。我想垂直对齐每一个弹性项目的内容。 如果每个项目都有透明的背景,我可以很容易地使用align-items: center。但是,我希望每个项目都垂直拉伸,因为我希望设置一个背景(可能是边框,或者是一个可点击的区域)到整个可用高度。 到目前为止,我知道 拉伸:align-items: stretch 对齐:align-items: center 拉伸和排列:? 提供的演示 ul { display: flex; flex-direct
浏览 4
提问于2015-09-28
得票数 21
回答已采纳
1
回答
创建等宽的挠曲项
html
、
css
、
flexbox
我使用flex进行布局,但浏览器不会在项目之间平均分配宽度。 .parent { display: flex; width: 200px; } .btn1 { flex: 1 1 auto; } <div class="parent"> <div class="btn1"> <button align="left" style="width:100%">Ok</button> </div> <button align="
浏览 2
提问于2017-06-14
得票数 4
回答已采纳
1
回答
如何使用按钮逐个截断/收缩跨度,而不是一次全部截断?
html
、
css
、
sass
有一个问题,需要一个接一个地收缩span中的元素。因此,根据图像,first完全缩小了span - AfterText,而span - BeforeText和button - Click me!则完全可见。当span-AfterText完全省略时,button - Click me!开始省略(其文本),并且span - BeforeText仍然完全可见。当button - Click me!完全省略时,span - BeforeText开始省略。 如何实现这一目标?只有css才有可能吗?问题不在于case,在case中我只有span。这个问题是由按钮引起的,它保持在跨度之间,并且不像跨度那样
浏览 19
提问于2021-07-23
得票数 1
回答已采纳
2
回答
使flex容器获取内容的宽度,而不是宽度100%
html
、
css
、
flexbox
、
frontend
在下面的示例中,我有一个具有以下样式的按钮... .button-flexbox-approach { /* other button styles */ display: flex; justify-content: center; align-items: center; padding: 1.5rem 2rem; } 但它会自动缩放到100%,而不是内容的宽度。你可以设置一个明确的宽度,但是这不会让你的文本自然换行。 如何制作一个内部文本以flexbox居中的按钮,但不能增长到适合容器的大小? .container { width: 10
浏览 0
提问于2017-03-09
得票数 21
回答已采纳
2
回答
等高列- Flexbox &Flexbox包装:包装
html
、
css
、
flexbox
我正在做一个布局,我不知道如何使这些列的高度相等,特别是当文本包装时的绿色区域。你能帮上忙吗? 我的html模板,里面有更多.类别容器. <div class="flex-container"> <div class="category-container"> <a href="#" class="img-gallery-col medium-internal-page-static-image" style="background-image: url('http:
浏览 1
提问于2017-04-04
得票数 1
回答已采纳
2
回答
并排分项目,跳板集装箱大儿子出区
css
我的目标是用三列做一个“行”。布局工作,但当我添加一个特定的类(它没有宽度),它使孙子输入突出。 我的html是: <div class="product-box" > <div class="flex-container"> <div class="flex-child"> <input class="qty-box"> </div> <div class="flex-child"> <bu
浏览 7
提问于2022-09-01
得票数 -1
回答已采纳
2
回答
HTML内联元素换行文本换行(用于图表图例)
html
、
css
我有一个图表图例与下面的HTML。但是,如果文本太长,则会在颜色方块下转到新行。我需要文本的换行符在文本的开头开始,而不是在颜色方块下,例如: [] lorem ipsum lorem ipsum [] lorem 不是这样的: [] lorem ipsum lorem ipsum [] lorem 这是我正在使用的HTML的一个最小示例。我曾尝试使用display: flex;来实现这一点(参见注释掉的css),但它会使颜色方块变得平方。我需要颜色正方形保持10px 10px。 .legend-key { display: inline-block; border-radi
浏览 0
提问于2019-12-18
得票数 0
1
回答
使子容器占用父容器的高度[React Native]
react-native
、
flexbox
我在react原生中创建了一个<View>对象,其中一行包含多个包含text对象的<View>对象。 当文本超过一行时,文本容器不会扩展以填充父组件,因此看起来很滑稽。 截图: ? 这是样式代码: bigContainer: { flex: 1, justifyContent: 'center', // flexDirection: 'row' }, textContainer: { flex: 1, paddingLeft: 0, paddingRight: 0,
浏览 34
提问于2019-01-18
得票数 2
回答已采纳
3
回答
CSS3框-弹性框大小因内部内容而异
css
有人能告诉我我哪里做错了吗?我希望这些框在divA和divB之间具有完全相同的宽度。仅仅因为'p2‘中divB框的文本稍长,不应该改变整个框的宽度。我不想对'p1‘使用硬像素宽度,这样它就可以灵活地处理视口宽度。我只想让p1框的大小总是p2的一半,不管里面的内容是什么。有没有人能帮我解决这个问题或提出一个更好的方法?? <!DOCTYPE HTML> <html> <head> <style type="text/css"> div { display:-moz-box; /* Firefox */ displa
浏览 2
提问于2011-12-07
得票数 14
回答已采纳
扫码
添加站长 进交流群
领取专属
10元无门槛券
手把手带您无忧上云
相关
资讯
数据看板使用技巧让你畅玩数据分析
关于Word表格的小技巧,学会了就能跻身上流
两大办公神器!轻松解决工作多种需求,超高效!
office计算机二级考试Word常考内容(3)
这3个Word排版技巧,学会不求人!
热门
标签
更多标签
活动推荐
运营活动
广告
关闭
领券