Flexbox项目在最新的Safari和Chrome中不能包装(在flex-container上使用max-width，在flex-item上使用flex-basis )
Flexbox是一种用于网页布局的CSS模块，它提供了一种灵活的方式来排列和对齐网页元素。然而，在最新的Safari和Chrome浏览器中，使用max-width属性在flex-container上以及使用flex-basis属性在flex-item上时，可能会导致Flexbox项目无法正确包装。
Flexbox项目的包装是指当项目的总宽度超过容器的宽度时，项目会自动换行或者压缩以适应容器。然而，由于最新的Safari和Chrome浏览器在处理max-width和flex-basis属性时存在一些问题，可能会导致项目无法正确包装。
为了解决这个问题，可以尝试以下方法：
- 使用其他布局方式：如果Flexbox在最新的Safari和Chrome浏览器中无法正常工作，可以考虑使用其他布局方式，例如Grid布局或传统的float布局。
- 使用媒体查询：可以通过媒体查询来针对不同的浏览器或屏幕尺寸应用不同的样式。可以检测到使用最新的Safari和Chrome浏览器时，禁用max-width和flex-basis属性，以避免包装问题。
- 更新浏览器版本：最新的Safari和Chrome浏览器版本可能已经修复了这个问题。建议将浏览器更新到最新版本，以确保获得最佳的兼容性和功能支持。
总结起来，Flexbox项目在最新的Safari和Chrome浏览器中可能存在包装问题，可以尝试使用其他布局方式、使用媒体查询或更新浏览器版本来解决这个问题。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云弹性容器实例（Elastic Container Instance）：https://cloud.tencent.com/product/eci
- 腾讯云弹性伸缩（Auto Scaling）：https://cloud.tencent.com/product/as
- 腾讯云负载均衡（Load Balancer）：https://cloud.tencent.com/product/clb
- 腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
相关·内容
我想要一个图像来填充窗口大小/视口的宽度或高度。
为了更好地理解我正在做的事情的， -请查看并调整预览的大小。在safari上运行良好，但是chrome和firefox似乎有问题。图像忽略“最大高度”属性，并溢出弹性项维度。
有什么建议可以在chrome和firefox中完成吗？
html,
body {
height: 100%;
}
.flex-container {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
backgrou
浏览 9提问于2015-05-05得票数 5
回答已采纳
我在position: absolute上遇到了一个问题，我在任何地方都找不到解释为什么会发生这种情况的答案。
我在包装器中有一个柔性盒容器，其中有两个子容器，每个子容器都设置为flex-basis: 50%。当我在包装器div上设置position: absolute时，包装器会以一种不可预知的方式收缩。
见下面的代码：
.outer-wrapper {
position: relative;
width: 100%;
}
.outer-wrapper .wrapper {
position: absolute;
}
.outer-wrapper .wrapper .flex
浏览 1提问于2020-07-24得票数 1
6回答
我有一个具有一定宽度的div，在这个parent div中，我想放置一个或多个“子”div。我希望它们相邻放置(所以我使用float:left或display:inline-block)，并且我希望它们的宽度都相同。我非常想让它们用一定的max-width填充父div (所以如果我有4个div，每个div应该是25%的宽度，如果是5，20%的宽度等等)。这里的关键是，无论div的数量是多少，它都应该有效-可能是1，可能是5，可能是15。
我在下面的jsFiddle中尝试过这样做，但我不知道如何在没有任何JavaScript的情况下工作。
我想我的问题是div通常会扩展到它们内容的宽度，而我希望
浏览 1提问于2011-06-20得票数 5
回答已采纳
2回答
我有一个弯曲方向的柔性盒部分:列，我想把标题作为第一个元素，只在移动视图中。
但我不知道如何使用order属性来实现这个功能。
<section class="section section--team">
<img
class="section--team__image"
src="./imagens/requite.jpeg"
alt="Time da Instalura" />
<div class="sect
浏览 5提问于2019-10-20得票数 0
回答已采纳
我尝试使用flex在div中简单地将img垂直居中，但它在每个浏览器中的工作方式不同。
.flex-container {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
justify-content: flex-start;
}
.flex-item
浏览 0提问于2015-08-06得票数 13
回答已采纳
2回答
我想知道是否有可能在同一个容器中使flex项目水平地对齐到较大的flex项。使用CSS浮动可以很容易地完成它，但是我还不能用flex项来完成它。
网格布局
<div class="flex-container">
<div class="large-flex-item">
</div>
<div class="small-flex-item">
</div>
<div class="small-flex-item">
</div>
<
浏览 1提问于2015-12-03得票数 7
回答已采纳
下面是一个场景：
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
border: 1px solid black;
}
.flex-item {
background-color: cornflowerblue;
height: 1.7rem;
padding: 0 1.2rem;
flex: 1 1 33.33333%;
white-space: nowrap;
max-width: 3
浏览 6提问于2017-03-07得票数 13
回答已采纳
2回答
控制弹性框溢出
、、
我正试着在我的网站上创建一个有4个个人资料框的个人资料栏：
它在大屏幕上看起来不错，但我正在努力控制盒子在小屏幕上的包装方式。目前，当这些框到达屏幕边缘时，它们会自动换行到下一行，所以我最终在一行上有3个配置文件，在下一行上有1个配置文件：
我想阻止这种情况发生，并根据屏幕尺寸设置3种不同的配置：
这可以通过flex box来实现吗？
.container {
margin-bottom: 10px;
margin-top: 10px;
padding: 10px;
align-items: flex-start;
flex
浏览 9提问于2018-08-23得票数 1
2回答
我只是在学习柔性盒是如何工作的，我想要构建一个非常粗糙的原型，看看柔性盒是否能够处理这个布局。
我基本上想看看flexbox是否能支持宽度和高度不同但行高一致的4列表。
我不确定我是否解释得这么好，所以下面是我想要做的事情的速写：
所以，我关心的是:如果我使用HTML表来制作这个表，不管一个特定列有多高，每一行都是一致的。
浏览 2提问于2018-01-29得票数 10
3回答
我正面临一个问题，这只是MAC Safari的具体问题。我的代码看起来像
<div class="wrapper" style="max-width:1220px">
<div style="width:50%;display:inline-block">First</div>
<div style="width:25%;display:inline-block">Second</div>
<div style="width:25%;display:i
浏览 0提问于2014-09-03得票数 1
回答已采纳
3回答
我有三个div的：
Div 01
Div 02 -固定宽度300 02
分区03
Div 01和Div 03应该是相同的宽度。
示例：
如果视口为1000 01，Div 01 width=350px和Div 03 width=350px，
如果视口为800 01，则Div 01 width=250px和Div 03 width=250px。
.flex-container {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
}
.flex-item {
浏览 4提问于2016-05-25得票数 8
回答已采纳
这是一个我在很多场合都遇到过的问题，我想这次我会试着寻求一个明确的答案。我想要做的是，将一个元素垂直居中，同时让另一个元素作为“页脚”，并捕捉到同一容器的底部。如下所示：
问题是页脚会有一个动态的高度。预期的行为是，如果有足够的空间，中间元素将保持垂直居中；如果页脚变得太大而不会发生这种情况，居中的内容将向上移动，为页脚腾出空间。
我找到的最接近的解决方案是。但就像我见过的其他解决方案一样，它需要知道页脚的高度。
我有一种预感，这在flexbox中是不可能做到的。我最终总是求助于在页脚带有position: absolute的经典position: relative包装器。
，如果你
浏览 1提问于2018-08-23得票数 1
1回答
我一直试图做一个简单的页脚与4个盒子，这应该包装和堆叠成一列。然而，每个框必须有宽度等于25%，但当我使用百分比(%)时，它将不会包装(完全)，让我回到像素，这是不理想的响应。
有什么办法我可能会错过吗？
.flex-container {
display: flex;
flex-wrap: wrap;
max-width: 100%;
text-align: center;
}
.flex-container>div {
color: teal;
background: white;
padding: 1%;
width: 300px; // bo
浏览 3提问于2020-10-07得票数 0
回答已采纳
2回答
我正在尝试创建一个基于flex的容器，在这个容器中，应该使用动画在悬停时展开项目。所有项目应首先具有相同的宽度取决于容器的总宽度。当悬停一个项目时，该项目的悬停应该正好是总容器宽度的50%，其余的没有悬停的项目被缩小以填补剩余的空间。
这似乎是一件很容易做的事情，但我真的无法思考如何达到我想要的结果。
我尝试过这样的代码：
.flex-container {
width:100%;
display:flex;
height:300px;
}
.flex-item {
flex:1;
transition: all 0.4s ease;
}
.flex-item:hove
浏览 2提问于2021-02-27得票数 6
回答已采纳
我有这样的布局：
带有 的，例如width: 175px
A
具有in ，例如
这是不灵活的，例如。
其大于的
其小于的
.flex-container {
display: flex;
width: 175px;
border: 3px solid black;
margin-bottom: 10px;
}
.flex-item {
flex: none;
border: 3px solid blue;
margin: 3px;
}
.box {
display: inline-block;
vertica
浏览 3提问于2016-01-26得票数 8
回答已采纳
我希望创建一个两个街区的布局，并排，可能在一个灵活的框内。这些块可以包含动态文本。在大多数情况下，我希望街区的大小是相同的。通过在每个项目上设置flex: 1，我发现这是很简单的。看起来像：
<ul class="flex-container">
<li class="flex-item">This is some text</li>
<li class="flex-item">This is also some text</li>
</ul>
.flex-cont
浏览 7提问于2022-04-03得票数 0
回答已采纳
1回答
我有一个有两列的柔性箱容器，第二列包含另一个有两列的柔性箱容器。我希望两个嵌套列与包含它们的列的高度相同，这与其他外部列的高度相同。
本质上，我希望它看起来像三根等高的柱子，它们之间有一个排水沟，如下所示：
在和中，我通过将内部柔性箱容器的高度设置为100%来完成这项工作。
HTML：
<div>
<div class="flex-container">
<div class="flex-col">
<div class="box">Lorem ipsum dolo
浏览 4提问于2016-10-18得票数 1
回答已采纳
2回答
我试图在每种分辨率下为每个div划分相等的宽度，但是对于div，max-width不应该大于138px？
但是当分辨率改变时，li终于变宽了，即不等于其他div，ul行周围的空间分布不均匀，还剩下一些空间吗？
如何解决这个问题？有什么办法吗？
.css
.flex-container {
display: flex;
background-color: #f1f1f1;
flex-wrap: wrap;
}
.flex-container > li{
background-color: DodgerBlue;
浏览 0提问于2019-01-30得票数 1
1回答
我有一个柔性盒容器和两个弹性盒项目：item-img和item-content。item-img在里面有一个图像。我希望item-img的高度等于item-content的高度，图像将覆盖它的所有空间。
这意味着item-img的高度被设置为基于的item-content的高度，item-content的高度不是固定的，可能比图像的高度大得多或小得多。
任何帮助都将不胜感激。非常感谢。
.flex-container {
display: flex;
width: 500px;
border: solid 1px #123;
}
.flex-item {
max-widt
浏览 0提问于2017-09-09得票数 3
回答已采纳
1回答
我试图创建一个类似于这样的子网格：
第一个元素应该是全宽度，其余元素必须位于相同的行(每个元素的宽度相同)，而不管有多少项存在。
我的尝试：
HTML
<div class="flex-container">
<div class="flex-item">I'm the biggest!</div>
<div class="flex-item"></div>
<div class="flex-item"></div&
浏览 0提问于2017-08-02得票数 2
回答已采纳
基于，我尝试使用flex css将内容水平居中，通常它是正确的。但当内容很大时，左边的部分就会隐藏起来。在Chrome中会发生这种情况，而水平滚动条并不起作用。正如您在代码片段中所看到的。我必须改变什么才能让它变得正确？
.flex-container {
padding: 0;
margin: 0;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items:
浏览 2提问于2018-09-26得票数 1
2回答
我正在创建一个盒子列表。不管视野有多宽，我都想把它们一对接一对地。这些箱子将被同等地分开，就像：
## For a view of 100 pixel width
[ 10px <-> [box of 30px] <-> 10px <-> [box of 30px] <-> 10px ]
当盒子的数量不均匀时，我希望最后一项在左边对齐。
这是一个用于反应性本机的项目，因此CSS flex属性是有限的。
这是我现在的小提琴：
耽误您时间，实在对不起
浏览 1提问于2018-01-25得票数 0
回答已采纳
我只想使用CSS来制作它，所以我有一个容器，它使用display: inline-flex。我希望这个容器只显示内部项目，如果它们适合在容器内，并且不溢出。如果容器的任何部分溢出，那么我不想显示它。目前，我可以隐藏框中溢出的部分，但无法隐藏整个溢出项。
只有HTML和CSS才能完成吗？我目前所做的工作是在这个代码片段中进行。
浏览 3提问于2016-07-26得票数 1
回答已采纳
我试图使用flexbox创建以下网格：
[ div ]
[ div ][ div ][ div ]
我好像听不懂。我已经走了这么远：
.flex-container {
display: -webkit-flex;
display: flex;
width: 400px;
height: 250px;
background-color: lightgrey;
}
.flex-item {
background-color: cornflowerblue;
width: 100px;
height: 100px;
margin
浏览 3提问于2017-06-26得票数 3
回答已采纳
3回答
我想要将这些卡片精确地定位在lightblue背景的中间。而且，当我缩小浏览器时，卡片之间的间距也应该减小。(我使用的是Chrome。)
我的style.css文件无法正常工作
.flex-item{
height: 350px;
width: 250px;
background-color: white;
text-align: center;
margin: 15px;
display: inline-block;
border: 1px solid #ccc;
box-shadow: 0px 5px 25px #a
浏览 1提问于2016-01-20得票数 1
回答已采纳
使用flex-basis属性保持左项的固定宽度是没有问题的。但是我有一个场景，我不希望左元素被固定，而是保持右元素的宽度固定。但是，我尝试将flex-basis放在正确的元素上，但问题是flex项溢出了它的容器。
有办法做到这一点吗？例如，我的布局如下：
.flex-outer {
display: flex;
}
.dashboard {
flex-grow: 1;
}
.col {
margin-left: 25px;
flex-basis: 200px;
background: orange;
}
.flex-container {
displa
浏览 1提问于2017-07-03得票数 1
回答已采纳
2回答
我试着遵循柔性盒的例子，而我的线条高度并不能解决这个问题。
文本应该是垂直中心的，但它不是。它仍然在顶部，只有水平中心。
在代码片段中，它似乎工作得很好，但为了证明这很奇怪，我将给出我所看到的画面。
我在Chrome和IE中测试了这个，但是它不是垂直对中的。
我确实改变了片段中的大小，但我不认为会这样。
.flex-container {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
padding: 0;
margin: 0;
list-style: none;
浏览 5提问于2016-06-26得票数 3
回答已采纳
在Macbook上的Safari 8.0.8中。
我使用flexbox在类似网格的容器中分发元素。
我的.eventContainer是多个.event盒的父级，应该通过柔性盒跨行分发。它在Firefox和Chrome中运行得很好，但是Safari将事件显示在自己的行上，而不是彼此相邻！
<div class="eventContainer">
<div class="event">
<div class="thumb">
<img src="htt
浏览 0提问于2015-09-17得票数 2
回答已采纳
编辑这可能接近复制，但不幸的是，这个问题的答案对IE 11毫无帮助。
我有一个显示了这个问题。
第一个.flex-container最接近于我的应用程序中的构建方式。这在chrome中呈现“正确”，但如果您在IE11或火狐≈38中拔出它，则输入会溢出父≈。
这个问题似乎没有列入。我也不能将其直接归因于之一。
有人能解释一下这种不一致吗？
以下是Chrome渲染的图片：
这里有一个来自IE 11的：
我试过将示例与后续容器相对比，而输入似乎就是问题所在。例外是在第二个Chrome容器中，<label>元素的存在似乎稍微偏离了宽度计算。
如果没有必要，我真的不想定义.fle
浏览 3提问于2015-07-16得票数 0
回答已采纳
3回答
flexbox的一个非常酷的地方是，如果有空间，弹性项目的边距就包括在flex容器的宽度中，即使我告诉它占据整个空间。例如，如果我有一个100 be宽的flex容器，并给它一个占用整个宽度的子容器，那么在两边给这个子容器10 be的边距，这个子容器实际上变成了80 be宽，因为容器允许完全封装子容器，包括边距。这忽略了对溢出的关注，溢出可以很容易地处理(min-width: 0;通常会处理这个问题)。
flex-container {
width: 100px;
height: 100px;
display: flex;
background-color: dodgerbl
浏览 4提问于2017-06-10得票数 2
回答已采纳
1回答
我有一个柔性盒，里面有几个有宽度约50%的挠曲盒。一个柔性盒项要么包含一个或多个<p>元素，要么包含单个<img />。
带有图像的柔性盒项应该是完全填充图像的，而不是设置为起伏div.The图像的背景，即使图像填充了整个宽度，div.The图像的下方总是有一个小的红色条。如何使图像填充整个柔性盒项？
如果图像的高宽比发生变化，这并不重要。
，我不希望图像下面的空白空间消失。我想要它散开，使用完全宽度的柔印盒项目以及。因此，它填充了flexbox项.
.container {
width: 500px;
}
.flexbox {
display: flex;
浏览 0提问于2015-10-11得票数 0
2回答
到目前为止，我已经看到在div元素中使用了使用flexbox的所有示例，无论是对于容器还是条目。例如：
<div class="flex-container">
<div class="flex-item">One</div>
<div class="flex-item">Two</div>
<div class="flex-item">Three</div>
</div>
我的问题是：我可以在任何html标记中使用f
浏览 6提问于2021-11-04得票数 0
1回答
我有困难，只是使用一个柔性盒布局内的链接。链接实际上起作用(就像你点击它，它会带你去任何地方)，但问题在于光标。
在Chrome和Safari中，当您输入链接时，光标仅显示为一秒的指针。在Firefox中，光标在默认箭头和指针之间快速闪烁。
CodePen演示：
我尝试过使用cursor: pointer;并将链接包装在<div>中，但没有效果。
这是已知的窃听器吗？(我找不到关于它的任何信息)，有什么解决办法吗？谢谢。
编辑：我应该补充说，我在OSX上使用最新版本的Chrome、Safari和FF。
编辑2：问题的屏幕GIF：
浏览 2提问于2015-12-10得票数 2
1回答
如何让我的组件隐藏溢出并让它用一个按钮“切换”视图。例如)用户最初可以看到选项卡1,2,3和4,5,6是隐藏的，单击按钮将隐藏1,2,3，现在显示4,5,6 (不知道屏幕在1，2，3之后会被剪切) 我正在尝试制作一个导航栏，可以在任何尺寸的屏幕上重复使用。我的目标是允许开发人员动态地向导航栏添加标签(这是一个子元素)，而不会溢出。在导航栏溢出的情况下，这意味着它会生成一个新行，因为它达到了最大宽度，一个可单击的箭头键将转到下一组选项卡。到目前为止，这是我的代码。如何实现此行为？ Navbar.js import React, { useState } from 'react'
浏览 70提问于2020-07-21得票数 0
回答已采纳
2回答
删除身体和页脚之间的奇怪空格
、、、、
我是HTML5和CSS3的新手，更多的是关于柔性盒的。请帮我移除身体和脚之间不需要的空间。
我看过这里的堆叠溢出和谷歌，但没有任何效果。他们都建议检查我的利润率，而我确实检查了所有这些，但都没有结果。试着为大多数div调整边距、填充和边框，但我仍然找不到罪魁祸首。
铬：
index.html
<body>
<div>
<ul class="header flex-container">
<li class="nav flex-item">About</l
浏览 1提问于2017-10-09得票数 2
回答已采纳
3回答
柔性箱的弹性包装特性
、、、
我有下面的代码，
.flex-container {
padding: 20px;
margin: 20px;
list-style: none;
border: 1px solid silver;
-ms-box-orient: horizontal;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -moz-flex;
display: -webkit-flex;
display: flex;
justify-content: space-ev
浏览 0提问于2018-04-06得票数 0
我试图适应一个响应式的设计，在移动断点处水平滚动不同数量的项目，但将所有项目转储到桌面上的一个大折叠行中(左对齐，没有溢出或滚动)。我已经有了我想要的移动端工作，但我在台式机上挣扎。 /*SCSS*/
$spacer: 8px;
$border: 1px solid #c3c1c0;
.category-flex-outer-container {
margin: ($spacer*2) (-$spacer*4) ($spacer*2) (-$spacer*4);
h3 {
margin: $spacer*2 $spacer*4;
position:
浏览 28提问于2020-01-08得票数 0
我有一个行(容器)，它包含三个项，我想在行的左边或右边以相等的空间水平显示它们。我用的是适配内容的柔性盒:空格。
这是在Firefox (最近版本)和中；其他我还没有测试过的浏览器。
这过去很好，直到我做了一些(据我所见)完全不相关的重构，没有改变CSS。然后，突然之间，这三个项目不再涵盖整个包含行。相反，行的右边有一个空格(即行中最右边的项的右边)。
还可以看到下面的屏幕打印。在横幅下面，您可以看到这三项(正方形，实际上是list元素，容器行是无序列表)。你看到的是右边的空间。我想要的仅仅是显示条目行的宽度与横幅相同，即1280 in，正如您在Firefox检查器工具中看到的那样。您还可以在
浏览 1提问于2016-12-23得票数 0
当我有奇数个项目时，最后一个项目会增长以填满空间。
我可以让第一个项目成为增长的项目，而不是最后一个吗？
示例：
代码如下：
.flex-container {
padding: 0;
margin: 0;
list-style: none;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-flow: row wrap;
-webkit-flex-flow: row wrap;
ali
浏览 2提问于2016-09-15得票数 0
1回答
我使用移动优先的方法创建了一个响应式的四列布局。最小屏幕显示1列，较大屏幕显示2列，最大屏幕显示4列。 到目前为止，它似乎是有效的，但我希望您看一看我的代码，并告诉我我的方法是否有什么问题。如果您有意见，我将不胜感激。 <!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-sca
浏览 19提问于2019-02-13得票数 2
回答已采纳
1回答
如下面的代码片段所示，我创建了两个按钮，它们的宽度总是相同的，但我无法在它们之间形成空白。媒体查询版本(手机)也是如此，我该怎么做呢？
.flex-container {
display: flex;
justify-content: center;
margin: 1em;
}
.flex-container .flex-container {
display: grid;
grid-template-columns: 1fr 1fr;
}
.flex-item {
height: 1.7rem;
padding: 0 1.2rem;
浏览 0提问于2021-04-12得票数 0
回答已采纳
我的问题最好用下面的例子来解释: JSFiddle
#flex-container-1 { /*has 10 items*/
flex-wrap: no-wrap;
}
#flex-container-2 { /*has 10 items*/
flex-wrap: wrap;
}
#flex-container-3 { /*has 11 items*/
flex-wrap: wrap;
}
我有三个容器，其中两个像预期的那样起作用。但第三个不是缩小第11个元素，而是将其附加到容器之外。
是否有办法缩小第三个容器中的项目，使其不溢出？
。
容器的高度应该固定。
浏览 2提问于2016-05-14得票数 1
回答已采纳
当调整浏览器窗口的大小时，元素不会从水平转换为垂直，而只是水平挤压(测试了Chrome、Edge、Firefox)。但是，如果您切换到响应模式视图(例如火狐CTRL+Shift+M)，那么它们就会按照自己的设想重新排列。
这是在行动中的
在使用Safari在iPhone上浏览时，我也遇到了这个问题，但是Chrome和Firefox响应式的设计模式都显示了它们的工作原理。
我没有跟踪导致这一切的原因。
.main-container {
display: flex;
justify-content: space-around;
margin: 15px 0 0 0;
}
浏览 1提问于2017-02-12得票数 0
回答已采纳
我稍微玩弄了一下flexboxes，想要组合一个列和行容器。我的问题是：
为什么放在列中的行元素不能覆盖flex容器的整个宽度？
示例代码如下所示：
HTML：
/* CSS: */
.flex-container {
color: blue;
background-color:yellow;
text-decoration: bold;
text-size: 1em;
display: flex;
justify-content:space-between;
align-items:center;
}
.horizontal {
flex-directi
浏览 0提问于2016-11-29得票数 14
回答已采纳
2回答
我在玩flexbox，而我的弹性项似乎溢出了它的父容器。我能做些什么来确保它留在它的范围内？
.content {
position: absolute;
top: 5%;
left: 25%;
width: 50%;
height: 80%;
}
.flex-container {
position: relative;
top: 20%;
left: 15%;
flex-wrap: wrap;
display: -moz-box;
display: -webkit-box;
display: -ms-flexbox;
display:
浏览 4提问于2015-08-12得票数 1
回答已采纳
我正在使用柔性盒模块(“display:flex”)，无法将列表项目包装起来。我有一些非常简单的HTML和CSS，但由于某些原因，列表项没有按照我希望的方式进行。
下面是我在上所做的工作
<ul class="flex-container">
<li class="flex-item">1</li>
<li class="flex-item">2</li>
<li class="flex-item">3</li>
<li cl
浏览 6提问于2015-06-17得票数 0
回答已采纳
我正在尝试建立一个3x3Flexbox网格的按钮链接，具有响应性。网格在桌面和平板电脑上看起来很棒，但在移动版本中，项目是左对齐的，无法水平居中。我的目标是为移动端提供一个以所有内容为中心的专栏。我切换到了移动版的flex: 100%；，并尝试使用justify content: center，但它不起作用，我也不确定为什么。
#love_button,
#additude_button,
#isnpr_button,
#functional_medicine_button,
#immh_button {
width: 178px;
height: 111px;
display
浏览 0提问于2018-07-13得票数 0
1回答
我所处的情况是，显示的元素数量是可变的，我需要解决方案，而这是我无法实现的，我甚至怀疑它是否只有CSS才能实现。
我只想选择最后四个项目时，总项目是7分。我目前的CSS给出了正确的结果7项，但不是为另一个数额。
我如何将它结合起来，使它能够查找nth-last-child(7)和flex-item:nth-child(n+5)
.flex-container {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
padding: 0;
margin: 0;
list-style:
浏览 4提问于2020-02-06得票数 1
回答已采纳
2回答
不同浏览器中的伸缩行为
、、、、
根据我从flexbox定义中得到的信息，一旦容器变得太窄，flex容器中的项就应该收缩，与其伸缩值成比例(缺省值为1，因此不需要进行明确设置)。
这在Firefox中运行得很好(不要担心纵横比会被扭曲--这是可以修复的)：
但是，在其他浏览器(即Chrome、IE和Edge)中，元素只是在容器的边缘流动：
我试过为flex基础和flex收缩设置各种值，没有结果。
当周围的容器太小时，如何使所有浏览器都收缩项？
编辑：设置box-sizing: border-box;并不能解决问题，它只是推开第五个元素，因此它不再可见，似乎解决了问题(但实际上并不是因为所有元素都需要可见)：
浏览 5提问于2016-07-20得票数 2
2回答
我一直在努力使用flexbox来实现下面的布局： ? 我尝试了下面的HTML和CSS <div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
浏览 30提问于2021-03-31得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
