具有% width的CSS Flexbox包装项目

文章/答案/技术大牛

发布

1回答

html、css、flexbox、width

我有2个元素的flexbox。第一个元素的宽度是flexbox的40%，第二个元素的宽度是60%。当第二个元素的宽度小于600px时，我想要包装第二个元素，但如果第二个元素被包装，我希望两个元素的宽度都达到100% <div style="display: flex; flex-wrap: wrap0 40%"> <div id="text1" cla

浏览 13提问于2020-07-23得票数 0

回答已采纳

1回答

围绕更高的元素

javascript、html、css、flexbox

如果任何物品具有相同的高度，则所有物品都正确包装。但是，如果单个项目比其他项目具有更大的高，则项目将包装在较高元素的底部。在这里您可以看到我的示例：<div id="flexbox-container"> <div class="small-container">&

浏览 0提问于2016-04-19得票数 2

1回答

包装时，Flexbox更改项目样式

html、css、flexbox

项目包装后可以应用样式吗？// Not relevant for the question - toggle container width未包装的： <e

浏览 10提问于2022-11-29得票数 1

2回答

添加新项目时隐藏第一个flexbox项目

css、flexbox

我有一个flexbox，里面有三件东西： ? 当添加第四个项目时，我希望红色项目消失： ? 当黑色去掉的时候，我想要红色的回来。关键是，我希望这是纯CSS，没有JS。当我设置一个高度，然后隐藏溢出和弹性包裹:包装黑盒包装和消失，和包装-反转做同样的事情。></div></

浏览 23提问于2021-09-02得票数 1

回答已采纳

2回答

如何将图标和文本居中对齐？

javascript、html、css、frontend

如何将图标垂直堆叠并与其各自的文本对齐，以及水平对齐？并使其全部移动响应式？ ? 我的尝试 li { display: inline; margin: 0 150px;} <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-

浏览 34提问于2021-07-26得票数 2

回答已采纳

5回答

flexbox可以检测到flex项目何时包装吗？

html、css、flexbox、media-queries

我希望摆脱媒体的质疑，只使用flexbox来解决我的问题，但我不确定这是否可能。随着窗口变小，我希望列缩小，直到它们达到最小宽度。一旦他们命中了，中间的一列就会跳到下面去包装。我想我的问题可以归结为-- flexbox可以检测到它何时包装吗？如果是这样，我是否可以提示它更改项目在严格使用CSS包装上的顺序？margin: 5p

浏览 0提问于2017-04-15得票数 25

1回答

从cms动态加载flexbox javascript

javascript、flexbox

我正试图在Javascript中创建一个flexbox，以从我的CMS中加载一些项目。应该有3个图像表示每一行的项目，因此我定义了一个具有行包装属性的柔性盒。容器元素有固定的宽度和高度，因此我希望循环运行4次，创建4项被堆叠在一行中，最后一项从下一行开始。我在代码片段中得到的是4条全屏幕宽度的项目。我在屏幕上看到的是一张真实的照片，就是这样..&

浏览 1提问于2019-09-25得票数 1

回答已采纳

2回答

删除带有包围子对象的flexbox上的额外间距？

css、flexbox

每当flexbox中的项目包装时，它们往往会拉伸flexbox，从而在一侧留下额外的空间。只有当项目换行时才会发生这种情况。我如何去掉多余的空格？问题的屏幕截图我想要它做什么代码<div> <div></div>

浏览 4提问于2016-06-18得票数 14

1回答

为什么flexbox在包装元素后不能收缩到合适的位置？

html、css、flexbox

我想要一个最大宽度的flex-box，它的最大宽度可以超过这个宽度，但它也适合flex box中任何给定“行”的最大大小。我现在面临的问题是，任何超出最大宽度的元素都会导致flexbox仍然占据最大宽度。这是一个演示这个问题的代码的链接： <div class="holder"> <div class="f

浏览 0提问于2020-01-01得票数 6

2回答

为什么我的flexbox项目不能彼此包装在一起？

javascript、flexbox

我有一个带有以下SCSS的Flexbox容器： .picker { width: 100%; flex-flow: columnwrap; height: 25px; flex-shrink: 0; align-items: center; margi

浏览 27提问于2020-12-11得票数 1

回答已采纳

2回答

用CSS更改节的顺序

html、css

我正在做一个具有响应性的布局和浮动的练习。在我的布局中，我有四个使用浮点数并排显示的部分。一个小的，然后一个大的，再多两个小的。对于较小的屏幕大小，我希望“大”部分向上移动，并首先显示，采取全宽度。我不知道如何改变各节的顺序，所以第一个小部分可以和另外两个部分连在一起。如何用CSS将大的部分向上移动(或向下移动第一个小部分)？ height: 350px;

浏览 3提问于2022-07-01得票数 0

1回答

Nativescript角度模式视图边界半径不起作用

modal-dialog、nativescript、angular2-nativescript、nativescript-angular、angular-nativescript

模式包装器： <FlexboxLayout flexDirection="column" alignItems="flex-start" justifyContent="space-around" class="wil-modal"> height: 310; border-radius: 30;ba

浏览 14提问于2020-04-16得票数 1

1回答

如何从两个单独的类中固定伸缩间距

html、css

我在我的图库盒子容器中有两个独立的类。我将其设置为使用flex显示，但是列中没有空格。另外，它不能像显示文本一样显示所有的图片。 </div></body>

浏览 1提问于2019-06-17得票数 0

2回答

在safari中无法正确查看图像的flexbox

html、css、safari、flexbox

我在Safari中使用flexbox时遇到了问题，我在这些页面上找不到适合我的解决方案。.flexbox { -webkit-align-items: center; /* safarioverflow: hidden;}

浏览 1提问于2015-10-05得票数 2

1回答

HTML - Flexbox* align-self not applying*

html、css、flexbox

我正在学习html/css，似乎item-2类的align-self没有应用，但在讲师视频中它是有效的。我只想知道代码中出了什么问题？这里是完整的代码，也可以在https://jsfiddle.net/nk0sp2ev/上分享 <!DOCTYPE html><head> <meta name=

浏览 15提问于2020-05-03得票数 0

回答已采纳

2回答

css柔性盒包装:模拟伪类来选择主轴/交叉轴上的开始/结束项目？

html、css、flexbox、pseudo-class

Flexbox是一件很棒的事。但为了获得更多的功能，当使用弹性包装时:它需要伪类，类似于第一个孩子或最后一个孩子或第九个孩子。它将非常舒适地知道，如果项目在结束的主轴，或它被包装，现在它是在主轴的开始。例如，我想要这样：{ flex-flow:row wrap;{ /*sel

浏览 2提问于2016-07-19得票数 11

1回答

简单的CSS帮助

css、flexbox

我需要我的元素在一行中，居中的高度，并有右水平对齐在有界块。我试着使用flexbox来解决这个问题，所有的东西都只适用于一行项目，否则溢出的元素会占用所有可用的空间，并且它看起来不会正确对齐。 width:80px; align-items: center; } span {

浏览 8提问于2016-08-15得票数 0

1回答

试图同时显示缩略图img的css显示:内联块

javascript、css、image

下面是JS的一部分，它将根据搜索结果在html中显示缩略图img。一旦点击缩略图，它将打开一个相关的youtube视频，但我的问题是如何将这些img并排排列？。<img src="${meal.strMealThumb}" class="meal-thumbnail-image"> </div>`我已经设置CSS对齐图像并排.这是我最近发现的，让他们站在一起。meal-th

浏览 0提问于2018-11-29得票数 0

回答已采纳

2回答

我正在通过Odin项目学习web开发，目前我被困在了登录页项目中。我觉得所有的东西看起来都和我使用的模板一样，但是我注意到上面的“占位符”图片( pug)和底部的“Sign Up”按钮有重叠的地方。这也是我从头开始的第一个项目，所以我知道我的HTML和CSS非常混乱。请善待我:)我已经为此工作了一个多星期，但我不知道我做错了什么！我怀疑这可能与我的负利润有关，但我不确定。这是我的超文本标记语言和<e

浏览 26提问于2021-11-17得票数 0

1回答

如果子程序具有最小宽度，则Flexbox列包装在最新的Safari中不起作用。

html、css、macos、safari、flexbox

在将safari ( 10.1.1)和mac os (塞拉利昂)升级之后，列包装不再适用于具有最小宽度设置的项目列表。它在我需要支持的其他浏览器中工作，并且在10.0.1版本的safari中工作。: -ms-flexbox; -webkit-box-orient: vertical; -ms-flex-flowwrap; flex-flow: column w

浏览 1提问于2017-05-23得票数 1

回答已采纳

点击加载更多