相关疑难解决方法(0)
设置flexbox项目之间距离的更好方法
设置我在容器margin: 0 5px上.item和margin: 0 -5px容器上使用的flexbox项目之间的最小距离.对我来说,这似乎是一个黑客,但我找不到更好的方法来做到这一点.
#box {
display: flex;
width: 100px;
margin: 0 -5px;
}
.item {
background: gray;
width: 50px;
height: 50px;
margin: 0 5px;
}<div id='box'>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
</div>推荐指数
解决办法
查看次数
为什么<fieldset>不能成为flex容器？
我尝试fieldset用display: flex和设置元素的样式display: inline-flex.
但是,它不起作用:flex表现得像block,inline-flex表现得像inline-block.
这在Firefox和Chrome上都会发生,但奇怪的是它适用于IE.
这是一个错误吗？我无法fieldset在HTML5和CSS Flexible Box Layout规范中找到任何特殊行为.
fieldset, div {
display: flex;
border: 1px solid;
}<fieldset>
<p>foo</p>
<p>bar</p>
</fieldset>
<div>
<p>foo</p>
<p>bar</p>
</div>推荐指数
解决办法
查看次数
Flex容器中的等高行
如你所见,list-items第一个row有相同的height.但是第二个项目row有所不同heights.我希望所有物品都有制服height.
有没有办法实现这一点,而不给出固定高度,只使用flexbox？
这是我的 code
.list {
display: flex;
flex-wrap: wrap;
max-width: 500px;
}
.list-item {
background-color: #ccc;
display: flex;
padding: 0.5em;
width: 25%;
margin-right: 1%;
margin-bottom: 20px;
}
.list-content {
width: 100%;
}<ul class="list">
<li class="list-item">
<div class="list-content">
<h2>box 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</li>
<li class="list-item">
<div class="list-content">
<h3>box 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing …推荐指数
解决办法
查看次数
flex-grow不按预期调整flex项目的大小
似乎flex div中的内容会影响其有关flex-grow属性的计算大小.难道我做错了什么？
在下面提供的小提琴中,你会看到一个数字键盘.除底行外,所有行都包含3个数字.那行应该是'0'是2个数字的宽度,因此flex-grow: 2':'(冒号)是1个数字的大小,因此flex-grow: 1.
我在这里错过了什么吗？
'0'的右侧应与其上方的8,5和2对齐.有点过了.
.numbers {
display: flex;
flex-direction: column;
}
.row {
display: flex;
flex-direction: row;
flex-grow: 1;
justify-content: space-between;
}
.button {
display: flex;
flex-grow: 1;
justify-content: center;
align-items: center;
margin: 5px;
border-radius: 5px;
border: 1px solid gray;
background: rgba(255, 255, 255, 0.2);
cursor: pointer;
}
.button#number0 {
flex-grow: 2;
}
.button#colon {
flex-grow: 1;
}<div class="numbers">
<div class="row">
<div class="button number" id="number1">1</div>
<div class="button number" id="number2">2</div>
<div …推荐指数
解决办法
查看次数
如何在不更改html代码的情况下更改元素的顺序？
这些是3 inline-block和元素,这意味着它们将彼此相邻排序.
这是一个观看现场活动的小提琴:https://jsfiddle.net/8mdm8eox/
.wrapper {
background: #fff;
width: 100%
}
.firstElement,
.secondElement,
.thirdElement {
display: inline-block;
width: calc(100%/3)
}
.firstElement {
background: #000;
color: #fff
}
.secondElement {
background: grey
}
.thirdElement {
background: #ddd
}
@media (max-width: 767px) {}<div class="wrapper">
<div class="firstElement">First Element</div>
<div class="secondElement">Second Element</div>
<div class="thirdElement">Third Element</div>
</div>所以这就是我想要的,我想在屏幕宽度为767px或更低时:
@media (max-width: 767px){}
前两个元素是垂直排序的,第三个元素是与另外两个元素水平排序的,所以它们变成了:
_______________ ________________
|First Element| |? |
_______________ | |
|Third Element |
________________ | |
|Second Element| | | …推荐指数
解决办法
查看次数
具有不同高度的 CSS Flexbox 2 列
我有以下代码：
.wrapper {
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
.a {
background-color: red;
width: 65%;
}
.b {
background-color: green;
width: 35%;
}
.c {
background-color: blue;
width: 65%;
height: 100px;
}
.d {
background-color: orange;
width: 35%;
}
.e {
background-color: teal;
width: 65%;
}
.f {
background-color: purple;
width: 35%;
}<div class="wrapper container">
<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>
<div class="d">D</div>
<div class="e">E</div>
<div class="f">F</div>
</div>
我试图让 F 正好在 D 之下，就像这样：
我这样做而不是 2 个单独的列的主要原因是因为我希望以后能够使用order. …
推荐指数
解决办法
查看次数
Flexbox平铺布局具有一致的边距和对齐
我们如何实现以下布局:
满足以下条件:
每行的切片高度应与行中的最高元素相等
行中的最后一个tile应与父容器齐平(无间隙)
瓷砖可以是不同的宽度比(3倍三分之一或三分之一+三分之二等)
瓷砖的排序是未知的
没有网格框架
仅限现代浏览器
以下标记:
<div class="tile-wrapper">
<div class="tile-container">
<div class="tile third">1/3</div>
<div class="tile third">1/3</div>
<div class="tile third">1/3</div>
<div class="tile two-thirds">2/3</div>
<div class="tile third">1/3</div>
<div class="tile sixth">1/6</div>
<div class="tile sixth">1/6</div>
<div class="tile third">1/3</div>
<div class="tile sixth">1/6</div>
<div class="tile sixth">1/6</div>
</div>
</div>
推荐指数
解决办法
查看次数
如何正确重置网格模板列？
我在CSS网格中有两列布局，想切换到1024px的单列布局。
.page {
display: grid;
grid-template-columns: 50% 50%;
grid-template-rows: auto;
grid-column-gap: 5pt;
grid-row-gap: 5pt;
}
@media (max-width: 1024px){
.page{
display: block;
}
}
更改显示类型是禁用grid-template-rows等的完整解决方案，还是应该明确重置？
使用网格设置显示类型时，是否有任何“陷阱”？
推荐指数
解决办法
查看次数
现在（2020 年）自由使用 Flexbox 和 Grid 安全吗？
恐怕这不是代码谈话，但是 CSS3 中的 Flexbox 和 Grid 总是让我的生活变得更轻松。但我无法停止担心浏览器兼容性。在 2020 年（现在）毫不犹豫地使用 Flexbox 和 Grid 真的安全吗？
推荐指数
解决办法
查看次数