小编Mic*_*l_B的帖子
如何指定一个元素,然后在css flexbox中包装？
我不认为这是flexbox标准的一部分,但是在某个元素之后可能有一个建议或强制包装的技巧吗？我想响应不同的页面大小并以不同的方式包装列表而不需要额外的标记,这样我就不会在下一行中有(例如)孤立的菜单项,而是在菜单中间打破.
这是开始的html:
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>
和css:
ul {
display: flex;
flex-wrap: wrap;
}
我喜欢以下内容:
/* inside media query targeting width */
li:nth-child(2n) {
flex-break: after;
}
有关更完整的设置,请参阅jsfiddle:http://jsfiddle.net/theazureshadow/ww8DR/
推荐指数
解决办法
查看次数
当侧面物品具有不同宽度时,保持中间物品居中
想象一下以下布局,其中圆点表示框之间的空间:
[Left box]......[Center box]......[Right box]
当我移除右边的盒子时,我喜欢中心盒仍然位于中心,如下所示:
[Left box]......[Center box].................
如果我删除左框也是如此.
................[Center box].................
现在,当中心框内的内容变得更长时,它将占用尽可能多的可用空间,同时保持居中.左边和右边框将永远不会收缩,因此当没有剩余空间的地方overflow:hidden,并text-overflow: ellipsis会在效果打破了内容;
[Left box][Center boxxxxxxxxxxxxx][Right box]
以上都是我理想的情况,但我不知道如何实现这个效果.因为当我创建一个像这样的flex结构时:
.parent {
display : flex; // flex box
justify-content : space-between; // horizontal alignment
align-content : center; // vertical alignment
}
如果左右框的大小完全相同,我会得到所需的效果.然而,当两者中的一个来自不同尺寸时,居中的盒子不再真正居中.
有没有人可以帮助我？
更新
A justify-self会很好,这将是理想的:
.leftBox {
justify-self : flex-start;
}
.rightBox {
justify-self : flex-end;
}
推荐指数
解决办法
查看次数
将省略号应用于多行文本
有没有解决方案在div中的最后一行添加省略号,流体高度(20%)？
我-webkit-line-clamp在CSS中找到了这个函数,但在我的例子中,行号将取决于窗口大小.
p {
width:100%;
height:20%;
background:red;
position:absolute;
}<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed dui felis. Vivamus vitae pharetra nisl, eget fringilla elit. Ut nec est sapien. Aliquam dignissim velit sed nunc imperdiet cursus. Proin arcu diam, tempus ac vehicula a, dictum quis nibh. Maecenas vitae quam ac mi venenatis vulputate. Suspendisse fermentum suscipit eros, ac ultricies leo sagittis quis. Nunc sollicitudin lorem eget eros eleifend facilisis. Quisque bibendum sem at bibendum suscipit. …推荐指数
解决办法
查看次数
使flex项目占用内容宽度,而不是父容器的宽度
我有一个容器<div>用display: flex.它有一个孩子<a>.
如何让孩子显得"内联"？
具体来说,如何让孩子的宽度由其内容决定,而不是扩展到父母的宽度？
我尝试了什么:
我把孩子设置为display: inline-flex,但它仍占用了整个宽度.我也尝试了所有其他显示属性,但没有任何效果.
例:
.container {
background: red;
height: 200px;
flex-direction: column;
padding: 10px;
display: flex;
}
a {
display: inline-flex;
padding: 10px 40px;
background: pink;
}<div class="container">
<a href="#">Test</a>
</div>推荐指数
解决办法
查看次数
以CSS网格为中心
我正在尝试使用CSS Grid创建一个简单的页面.
我没有做的是将文本从HTML中心放到相应的网格单元格中.
我已经尝试在内容和选择器的div内部和外部放置内容,并且使用某些CSS属性无济于事.left_bgright_bg
我该怎么做呢？
html,
body {
margin: 0;
padding: 0;
}
.container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 100vh;
grid-gap: 0px 0px;
}
.left_bg {
display: subgrid;
background-color: #3498db;
grid-column: 1 / 1;
grid-row: 1 / 1;
z-index: 0;
}
.right_bg {
display: subgrid;
background-color: #ecf0f1;
grid-column: 2 / 2;
grid_row: 1 / 1;
z-index: 0;
}
.left_text {
grid-column: 1 / 1;
grid-row: 1 / 1;
position: relative;
z-index: 1;
justify-self: center; …推荐指数
解决办法
查看次数
居中和右对齐flexbox元素
我想有A B和C中间对齐.
我怎样才能D完全走向正确？
之前:
后:
这样做的最佳做法是什么？
ul {
padding: 0;
margin: 0;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
li {
display: flex;
margin: 1px;
padding: 5px;
background: #aaa;
}
li:last-child {
background: #ddd;
/* magic to throw to the right*/
}<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>推荐指数
解决办法
查看次数
如何只删除a:下划线？
我有一组使用:before箭头的样式链接.
它在所有浏览器中看起来都不错,但是当我将下划线应用于链接时,我不希望在该:before部分(箭头)上加下划线.
请参阅jsfiddle例如:http://jsfiddle.net/r42e5/1/
可以删除吗？我坐的测试风格#test p a:hover:before确实适用(根据Firebug),但下划线仍然存在.
有什么办法可以避免这个吗
#test {
color: #B2B2B2;
}
#test p a {
color: #B2B2B2;
text-decoration: none;
}
#test p a:hover {
text-decoration: underline;
}
#test p a:before {
color: #B2B2B2;
content: "? ";
text-decoration: none;
}
#test p a:hover:before {
text-decoration: none;
}<div id="test">
<p><a href="#">A link</a></p>
<p><a href="#">Another link</a></p>
</div>推荐指数
解决办法
查看次数
Flexbox无法处理按钮或字段集元素
我试图<button>用flexbox的中心元素的中心元素justify-content: center.但Safari并不以它们为中心.我可以将相同的样式应用于任何其他标记,并且它按预期工作(请参阅<p>-tag).只有按钮左对齐.
尝试Firefox或Chrome,您可以看到差异.
是否有任何用户代理样式我必须覆盖？或者这个问题的任何其他解决方案？
div {
display: flex;
flex-direction: column;
width: 100%;
}
button, p {
display: flex;
flex-direction: row;
justify-content: center;
}<div>
<button>
<span>Test</span>
<span>Test</span>
</button>
<p>
<span>Test</span>
<span>Test</span>
</p>
</div>还有一个jsfiddle:http: //jsfiddle.net/z3sfwtn2/2/
推荐指数
解决办法
查看次数
CSS网格布局中的等高行
我认为使用Flexbox是不可能实现的,因为每行只能是适合其元素所需的最小高度,但是可以使用较新的CSS Grid实现吗？
为了清楚起见,我希望所有行中网格中的所有元素具有相同的高度,而不是每行.基本上,最高的"细胞"应该决定所有细胞的高度,而不仅仅是其行中的细胞.
推荐指数
解决办法
查看次数
如何使flex项目不填充flex容器的高度？
正如您在下面的代码中看到的那样,Flex容器内的左侧div伸展以满足右侧div的高度.是否有一个属性,我可以设置使其高度保持其内容所需的最小值(如height: autoFlex容器外的常用div)？
#a {
display: flex;
}
#a > div {
background-color: red;
padding: 5px;
margin: 2px;
}
#b {
height: auto;
}<div id="a">
<div id="b">left</div>
<div>right<br>right<br>right<br>right<br>right<br></div>
</div>推荐指数
解决办法
查看次数