相关疑难解决方法(0)
CSS flexbox(flex-grow/flex-basis) - 宽度相同,但不再包装
我使用flexboxes来组织页面上的元素.
我希望flexboxes使用所有可用的水平空间,所以我添加flex-grow:1.
然后我希望同一行上的每个项目具有相同的大小(例如,如果有两个项目则为50%,如果有三个则为33%,等等),所以我补充说flex-basis:0.
但在第三步,项目不再包装.如果我更改窗口宽度,则每行的项目数始终保持不变,并且其内容会被挤压.我不希望这样.我希望当一个项目的宽度小于它的内容时,将它放在下一行,因为它在前两个步骤中起作用.我尝试过flex-shrink和其他事情一起玩,没有成功.
我能做什么 ？谢谢 !
回答TL; DR:添加min-width: fit-content作品!
推荐指数
解决办法
查看次数
一行中的 Flex 项目以不同的宽度呈现
我在 html 中使用 css flexbox 创建了 3 个盒子，但 Chrome 正在渲染不同大小的盒子。
拖动浏览器的边框使视图变小。
感谢您的帮助！
代码笔： https: //codepen.io/labanino/pen/rGaNLP
body {
font-family: Arial;
font-size: 2rem;
text-transform: uppercase;
}
.flex {
height: 200px;
display: flex;
flex-direction: row;
}
.flex>section {
flex: 1 1 auto;
display: flex;
justify-content: center;
flex-direction: column;
text-align: center;
}
.flex>section:nth-child(1) {
background: brown;
margin-right: 20px;
border: 1px solid #999;
}
.flex>section:nth-child(2) {
background: pink;
margin-right: 20px;
border: 1px solid #999;
}
.flex>section:nth-child(3) {
background: green;
margin-right: 0;
border: 1px solid #999; …推荐指数
解决办法
查看次数
如何设置flex中的列数
我有 4 个元素要显示在移动屏幕上。我想让它们在纵向视图上显示为 2 列，每列 2 个元素，在横向视图上显示为所有 4 个元素的单行。
纵向视图：
Plan 1 Plan 2
Plan 3 Plan 4
景观：
Plan 1 Plan 2 Plan 3 Plan 4
这是我的 html 代码：
<div class="flex">
<label>Plan 1</label>
<label>Plan 2</label>
<label>Plan 3</label>
<label>Plan 4</label>
</div>
我的CSS：
.flex {
display:flex;
flex-direction:column;
}
我只能拉出 1 列。我应该怎么办？
推荐指数
解决办法
查看次数
创建等宽的弹性项目
我使用 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="left" class="btn1">Cancel</button>
<div>现在，我希望按钮将容器长度分割为 50% / 50%。
但事实并非如此。我尝试使用flex: 1 1 autoandflex: 1 1 0但没有成功。
我知道我可以直接使用“确定”按钮，它将解决我的问题，但在我的特定场景中，用 div 包裹它很重要。
现在，据我了解，flex 应该能够均匀地分布宽度，这就是我的目标。
但另一件事是，我注意到按钮内容似乎对宽度有影响，我想以某种方式忽略这种影响。
谢谢！
JSFiddle 示例： https: //jsfiddle.net/edismutko/cvytLkyp/3/
推荐指数
解决办法
查看次数
flex：1和flex-grow：1之间的区别
在mdn
flex:1
与...相同
flex-grow:1。
但是，实际上它在浏览器中有不同的显示。
您可以通过更改CSS中的注释在jsFiddle中进行尝试。
当我使用flex: 1元素时，其类test-container名将是，height:100%但使用时不会发生flex-grow: 1。
我不明白为什么。寻求帮助。非常感谢。
.flex-1 {
display: flex;
flex-direction: column;
height: 500px;
background: red;
}
.child-1 {
height: 50px;
background: blue;
}
.child-2 {
flex-grow: 1;
/* flex:1; */
background: green;
}
.test-container {
display: flex;
flex-direction: row;
background: white;
height: 100%;
}<div class="flex-1">
<div class="child-1"></div>
<div class="child-2">
<div class="test-container"></div>
</div>
</div>推荐指数
解决办法
查看次数
使flex项目具有相等的宽度
如果你看下面的例子,我希望headers(h4.child-title)在父容器中具有相同的长度.
但我没有成功实现这一目标.
任何帮助表示赞赏.
.top-level {
display: flex;
flex-flow: row wrap;
}
.section {
display: flex;
flex-flow: row nowrap;
border: 1px solid;
margin-right: 12px;
margin-top: 12px;
}
.section-child {
display: flex;
flex-flow: column nowrap;
align-items: center;
flex: 1 1 0;
}
.child-title {
white-space: nowrap;
}
.vertical-separator {
width: 1px;
background-color: rgba(0, 0, 0, 0.3);
margin: 8px;
}<div class="top-level">
<section class="section">
<div claas="section-child">
<h4 class="child-title">Title</h4>
<!--A lot more content here-->
</div>
<div class="vertical-separator"></div>
<div class="section-child">
<h4 class="child-title">Longer title</h4> …推荐指数
解决办法
查看次数
我如何使用display：flex制作一些文本的一半布局？
我想进行一半的布局。所以我做了一个有<div>那个的display: flex;并放了两个有这个的孩子flex-grow: 1;。看起来像我预期的那样，一半的布局。但是，当我在一个孩子中放东西时，它变得比另一个更大。
我不太明白为什么它会这样工作。 http://codepen.io/anon/pen/rOvpPM
您能否告诉我原因以及适用的CSS？
推荐指数
解决办法
查看次数
Bulma 输入宽度不一致
我有一个使用 Bulma 框架的简单表单。我的输入宽度不一致并且找不到补救措施。https://jsfiddle.net/onzpum90/当标签很长时似乎会发生这种情况。如果我保留短标签，问题就消失了。为什么标签会影响输入宽度？可能是我不熟悉的flexbox问题。有人知道解决方案吗？
<form action="">
<div class="field">
<div class="field-body">
<div class="field">
<p class="control is-expanded">
<label class="label">A very long label for a form</label>
<input type="text" name="" value="" class="input ">
</p>
</div>
<div class="field is-grouped">
<p class="control is-expanded">
<label class="label">Email</label>
<input type="email" name="email" value="" class="input ">
</p>
</div>
</div>
</div>
<div class="field is-horizontal">
<div class="field-body">
<div class="field">
<p class="control is-expanded">
<label class="label">Short Label</label>
<input type="text" name="" value="" class="input ">
</p>
</div>
<div class="field is-grouped">
<p class="control is-expanded">
<label class="label">Email</label>
<input …推荐指数
解决办法
查看次数
flex-grow不适用于图像
目前,我正在努力制作一份清单.在左侧图像适合我的"显示flex布局"并在所有浏览器上调整大小.我的"flex-grow布局"列表1为图像,3为描述.没有图像,一切都很好,但是我的图像(100%宽度)它不适合行的1/3 ...
有人知道解决方案吗？
#main {
height: 100px;
border: 1px solid #c3c3c3;
display: -webkit-flex; /* Safari */
display: flex;
}
#main div:nth-of-type(1) {-webkit-flex-grow: 1;}
#main div:nth-of-type(2) {-webkit-flex-grow: 3;}
#main div:nth-of-type(1) {flex-grow: 1;}
#main div:nth-of-type(2) {flex-grow: 3;}
#main img { width: 100% }<div id="main">
<div style="background-color:coral;"><img src="http://www.der-eyecatcher.de/wp-content/uploads/2016/02/Lampe-silber-Schirm_1.jpg"></div>
<div style="background-color:lightblue;">Description</div>
</div>
<hr>flex-grow without Image<hr>
<div id="main">
<div style="background-color:coral;"></div>
<div style="background-color:lightblue;">Description</div>
</div>谢谢
西蒙
推荐指数
解决办法
查看次数