相关疑难解决方法(0)
最后一行的弹性项目之间的边距不一致
我在用着flex。两个元素之间似乎存在意外的边距差异div- 第三行的 div 之间的边距与前两行不同：
如何修改代码以使第三行的边距与前两行相同？
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.container:after {
flex: 1;
content: '';
}
.container form {
width: 100%;
display: flex;
}
.container .comment {
flex: 1;
}
.square {
padding: 10px;
width: calc(100% / 9);
margin: 0.7vw 0 0.7% 1vw;
background: red;
}<div class="container">
<form method="post" style="margin: 0.7vw 0 0.7% 1vw;">
<input class="comment" type="text">
<input type="submit">
</form>
<div class="square">
</div>
<div class="square">
</div>
<div class="square">
</div>
<div …推荐指数
解决办法
查看次数
如何调整不带百分比的flex项目？
我正在尝试创建一个基于flexbox的网格,内容为2/3宽度,侧边栏为剩余的1/3.
我已经在每个col中使用了百分比作为宽度,遗憾的是,它在导航和标题中给出了错误.
为什么是这样？如何在不使用百分比的情况下实现此目的,以避免错误？
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700);
*,
*:before,
*:after {
box-sizing: border-box;
}
html body {
margin: 0;
padding: 0;
font-family: 'Open Sans', sans-serif;
}
h1,
h2,
h3,
h4,
h5,
p,
a,
li,
ul {
margin: 0;
padding: 0;
}
/* centres content of website in a width of 950px */
.container {
width: 80%;
margin: 0 auto;
}
/* Header styling */
header {
background: #66b3ff;
/* padding: 10px; */
}
/* Logo */
#logo h1 {
font-weight: 300; …推荐指数
解决办法
查看次数
如果没有其他按钮,如何使div(按钮)100%而不是50%
我需要的是当只有一个按钮时它将是100%宽度:
如果可能的话,基于CSS的答案
推荐指数
解决办法
查看次数
Flexbox使一件物品比其他物品大4倍
我正在看这个Flexbox备忘单:
http://www.sketchingwithcss.com/samplechapter/cheatsheet.html#wrapcolumn
这里有一个例子:
我想让bigitem比小项目大4倍,而不是2倍大,但我无法弄清楚如何做到这一点？!我尝试用4代替2而不是没有用.
推荐指数
解决办法
查看次数
浏览器对CSS Grid的支持
关于CSS Grid的浏览器支持情况如何？
我环顾四周，很难理解有关兼容性的整个情况。
如果我转到可以使用，似乎几乎所有浏览器都支持它。但是，如果我转到Microsoft文档，情况会有所变化。
似乎几乎所有浏览器都支持Grid，但除Firefox外，它们都不支持所有功能。
然后，关于Edge，我得到的是它仅支持不再使用的旧规范，而当前正在进行更新。
推荐指数
解决办法
查看次数
对齐弹性容器的两行中的列
我有两行：一排有 4 个按钮，另一排有 3 个按钮。
我希望第二行的第一列与flexbox中第一行的第二列匹配。
这是我的代码，感谢任何帮助。
<div>
<div style="display: flex">
<button style="flex: 1"> A </button>
<button style="flex: 1"> B </button>
<button style="flex: 1"> C </button>
<button style="flex: 1"> D </button>
</div>
<div style="display: flex">
<button style="flex: 2"> B </button>
<button style="flex: 1"> C </button>
<button style="flex: 1"> D </button>
</div>
</div>
推荐指数
解决办法
查看次数
了解flex属性
在这个例子中,为什么.main元素(蓝色)仅用.aside-1(黄色)和.aside-2(粉红色)划分空间,而不是所有元素？
我们有一个包装器,它将所有元素占用一行.
在.main我们说flex: 3 0px,我认为说,这个元素将是3倍比其他四种元素更大,将占用3 /(3 + 1 + 1 + 1 + 1).
但是,我注意到使用nowrap包装器时最小的项目是.main.
并且wrap,它与两个最接近的元素分开.
无法理解这一点.
.wrapper {
display: flex;
flex-flow: row wrap;
font-weight: bold;
text-align: center;
}
.wrapper>* {
padding: 10px;
flex: 1 100%;
}
.header {
background: tomato;
}
.footer {
background: lightgreen;
}
.main {
text-align: left;
background: deepskyblue;
height: 50vh;
flex: 3 0px;
}
.aside-1 {
background: gold;
} …推荐指数
解决办法
查看次数