推荐最新

这种情况下，子元素多行文字如何垂直居中？

这种情况下，子元素多行文字如何垂直居中？ Document .box1 { width: 100px; height: 300px; border: 1px solid red; word-wrap: break-word; } .box { display: flex; align-items: center; height: 500px; border: 1px solid blue; } 1234aaaaaaaaaaaaaaaaaaaaa https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20240925/fcef9055cae8d4f129ee344ecb5e00cc.png

浏览量162

PX_13

为什么这个flex布局中前2个flex子元素没有分配到剩余空间？

abdfdofewefdfdsdfewfwefdf 务开发时遇到的，为了便于清晰描述，我这里写了一个能复现上述问d题的简化 .container { display: flex; flex-wrap: wrap; width: 420px; border: 1px green solid; } .item { flex: 1; border: 1px blue dotted; } img[src*="nature"] { width: 100px; } "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20240929/00247d58a8806c08dbab8d9eb1833ca1.png) 问题： flex:1 等价于 flex: 1 1 0%, 既然flex-basis是0%，那么flex子元素应该优先使用最小内容宽度吧，第一个子元素的最小内容宽度就是文本 "abdfdofewefdfdsdfewfwefdf"的宽度，第二个flex子元素的最小内容宽度就是图片本身的宽度100px，第三个flex子元素的最小内容宽度应该是单个中文字符的宽度吧？所以剩余空间=flex容器宽度-三个flex子元素的最小内容宽度然后把这个剩余空间等比例分配给每一个子元素，所以我理解中的渲染效果应该是类似下图： "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20240929/bf99637dfd92c00f58310cbe603b1736.png) 每一个绿色框框都是一个flex子元素红色框框部分是该flex子元素分配到的剩余空间。然而实际渲染的结果看起来好像剩余空间都给了第三个flex子元素，请问我的理解错在了哪里？

浏览量171

感觉对了

CSS Flexbox布局中flex-basis属性无法撑开容器的原因是什么？

前端 flex 布局中的项目的flex-basis属性，无法撑开容器 .bottom { display: flex; } .terminals { height: 200px; background: rgba(52, 91, 112, 0.52); display: flex; } .terminals .terminal { background-color: #831818; flex-basis: 200px; border-radius: 10px; } 代码所示我给 terminal 设置了flex-basis: 200px; 期望效果应该是页面上展示五个terminal，而容器 terminals 的宽度为1000px，但实际上页面上展示空白，terminal和terminals的宽度都为0，但是我给 terminal设置 flex-shrink: 0; 属性后页面上能展示五个terminal 但 terminals的宽度依然为0 这是为什么呢？已经咨询过各个GPT模型均没有得到合理的解释，说明这个看似简单的问题应该没那么简单所以求助各位老哥解答，谢谢！！

浏览量171

Fronttend

弹性盒子布局无法居中，问题出在哪里？

弹性盒子无法居中 "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20240918/be4676565080090831c8dbf2f544511c.png)"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20240918/e0298708271403256046e2b877234840.png) 跟着写的代码运行不出来

浏览量155

WhatUpDanger

css 怎么让某个盒子一直处于底部？

css 怎么让盒子一直处于底部如图，这样是正常的，没有问题： "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20240922/145dcb2b72407238c3b3d37518a897ea.png) 但我点“上箭头”后变成了 "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20240922/789b4d08284ef9ed461d909655e4ebc7.png) 视图代码： © 2024 By ailu 样式代码 .outerDiv{ display: flex; flex-direction: column; min-height: 100vh; overflow: hidden; } .footer { width: 100%; background: #42ace8; color: white; text-align: center; margin-top: 400px; padding: 40px 0 40px 0; font-size: 18px; } 点击“上箭头”触发的事件 const setUpDown = () => { if (upDown.value) { // 点击向上的箭头，修改高度为60px setProperty('--header-height','60px'); }else{ // 点击向下的箭头，修改高度为100vh setProperty('--header-height','100vh'); } upDown.value = !upDown.value }

浏览量129

云卿山手

关于这个Flex布局，请大家帮忙分析下?

"演示Demo" (https://codepen.io/ZJRui/pen/vYboEmq) 图中一个flex容器内部有四个div元素， div内部的img的宽度设置为100px。默认情况下flex-wrap=nowrap flex子项会一行显示且不允许换行，因此可能会出现宽度溢出的问题。问题1 “因此可能会出现宽度溢出的问题” ：这个宽度溢出应该也是有条件的吧？虽然flex子项的累计宽度大于flex容器，但是默认情况下 flex子项是允许收缩的。如果收缩以后还是超出flex容器的宽度，那才会出现溢出。我的这个理解对吗？问题2 基于问题1，上面的四个flex 子项div，为什么他们没有收缩适应fle容器的宽度，而是选择了溢出？ flex子项他们有最小宽度限制吗？我看div和img的min-width都是0px，并没有最小宽度限制。问题3 为什么css 中设置了 img { max-width: 100%; } 就能让四个图片收缩到适应flex容器的宽度，而不会出现溢出的情况。 b

浏览量15