标签: flexbox
标识第一行的最后一个flexbox和最后一行的第一个flexbox
在给定的代码中，我需要标识第一行的最后一个元素和最后一行的第一个元素。只是为了从各个角度来回它。我怎样才能做到这一点？我在这里需要指出的是，根据屏幕尺寸，第no列以及第一行的最后一个元素和最后一行的第一个元素都会有所不同。
.container {
display: flex;
flex-wrap: wrap;
}
.container > span {
flex: auto;
padding: 5px;
background: gray;
border: 1px solid;
}
.container > span:first-child {
border-top-left-radius:10px;
}
.container > span:last-child {
border-bottom-right-radius:10px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<span>The</span>
<span>Quick</span>
<span>Brown</span>
<span>Fox</span>
<span>Jumped</span>
<span>Over</span>
<span>The</span>
<span>Lazy</span>
<span>Dog</span>
<span>This</span>
<span>Is</span>
<span>A</span>
<span>Test</span>
<span>Case</span>
<span>What</span>
<span>Can</span>
<span>I</span>
<span>Do</span>
<span>The</span>
<span>Earth</span>
<span>Goes</span>
<span>Round</span>
<span>The</span>
<span>Sun</span>
</div>0
推荐指数
推荐指数
1
解决办法
解决办法
852
查看次数
查看次数
CSS:将ul li项目对齐到中心(带边距)而不使用flex模型
我有这样的代码:
<ul class="tiles">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
和css:
ul.tiles{
width: 220px;
height: 200px;
list-style-type: none;
background: #cecece;
padding: 0;
}
li{
display: inline-block;
width: 50px;
height: 50px;
background: #8ac249;
text-align: center;
line-height: 50px;
margin: 5px;
float: left;
}
看起来如此:
将它更改为这样的模型是真实的(没有弹性框):
如何？
0
推荐指数
推荐指数
1
解决办法
解决办法
1120
查看次数
查看次数
在HTML图像上水平和垂直居中文本(绝对定位)
鉴于以下设计元素,我试图在html中包含图像,以便可以使用css过渡(悬停效果)操纵不透明度.
这是我迄今为止的解决方案:http://codepen.io/roachdesign/pen/VeQKJK/
这里的主要缺点是我使用手动垂直居中(绝对/顶部:40%),这在缩小浏览器时变得明显.
在使用绝对定位时,是否可以使用flexbox或table进行垂直居中？
HTML
<div class="badge-container">
<a href="">
<div class="badge">
<img src="http://www.placehold.it/400x400/FF9999">
<h2><strong>Cumberland</strong>County</h2>
</div>
</a>
<a href="">
<div class="badge">
<img src="http://www.placehold.it/400x400/99FF99">
<h2><strong>Dauphin</strong>County</h2>
</div>
</a>
<a href="">
<div class="badge">
<img src="http://www.placehold.it/400x400/9999FF">
<h2><strong>Lancaster</strong>County</h2>
</div>
</a>
<a href="">
<div class="badge">
<img src="http://www.placehold.it/400x400/9F9F99">
<h2><strong>Lebanon</strong>County</h2>
</div>
</a>
<a href="">
<div class="badge">
<img src="http://www.placehold.it/400x400">
<h2><strong>York</strong>County</h2>
</div>
</a>
</div>
SCSS
.badge-container {display:flex; flex-direction:row;
.badge {position:relative;}
h2 {position:absolute;
top:36%;
left:0;
right:0;
text-align:center;
strong {display:block;}
}
}
img {max-width:100%;}
0
推荐指数
推荐指数
1
解决办法
解决办法
4943
查看次数
查看次数
将文本框垂直居中在右对齐的div中
我学到的解决方案之一是display将父div元素设置为table-cell并使用该vertical-align属性.
虽然这有效,但在我的情况下,我还需要父div来向右浮动,但它打破了表格细胞技巧,现在整个事情都不起作用.
所以我的问题很简单:为什么会发生这种情况,更重要的是,我怎样才能达到我想要的效果呢？
div {
/* float: right; uncomment this will make this not working */
display: table-cell;
vertical-align: middle;
height: 60px;
border: 1px solid red;
}<div>
<input>
</div>0
推荐指数
推荐指数
1
解决办法
解决办法
87
查看次数
查看次数
IOS上的Flexbox滚动不同
我注意到当使用基于弹性框的布局与position: fixed页脚时,滚动功能是不同的.固定的页脚更平滑,并显示滚动条.Flexbox根本不光滑,并且不显示滚动条.我更喜欢使用flexbox进行布局,但想要更好的滚动.有没有办法用flexbox实现它？
我在IOS 10 Iphone 7上进行测试.发生在Chrome和safari上
HTML:
<html>
<head>
<meta name=viewport content="width=device-width,initial-scale=1">
</head>
<body>
<div id='main'>
...lots of content so it would scroll
</div>
<nav class="footer">footer</nav>
</body>
</html>
Flexbox方法:
html, body {
height: 100%;
margin: 0;
padding: 0;
}
body {
-webkit-flex-direction: column;
flex-direction: column;
display: flex;
}
#main {
-webkit-flex: 1 1 auto;
overflow-y: auto;
min-height: 0px;
}
.footer {
height: 72px;
min-height: 72px;
background-color: blue;
}
固定页脚方法:
html, body {
height: 100%;
margin: 0; …0
推荐指数
推荐指数
1
解决办法
解决办法
1350
查看次数
查看次数
在两列中显示内容（各占50％），如果内容不适合，则将列移动到下一行并填充水平空间
在我的项目中，我想在两列中显示内容（每列50％），如果内容不适合，则将列移到下一行并填充水平空间。
这是两个图像，以显示我的意思。
对于短文本，将其显示在两列中：
当文本不再适合时，即任一列的宽度都在50％以上时，将第二列的内容移至下一行，以填充所有可用的水平空间。有点像这样：
只能使用CSS做到这一点吗？
0
推荐指数
推荐指数
1
解决办法
解决办法
1568
查看次数
查看次数
正方形与flexbox的正方形
我正在尝试使用flexbox重新创建以下布局:
我几乎有布局明智,但我得到一些奇怪的flex-wrap行为,如下所示:
我的css如下:
.parent {
display: flex;
justify-content: space-between;
.square-container {
width: calc(33% - 1.333px);
display: flex;
flex-wrap: wrap;
justify-content: space-between;
&:before {
content:'';
float:left;
padding-top:100%;
}
.small-square {
width: calc(50% - 2px);
height: calc(50% - 2px);
background: red;
flex-shrink: 0;
}
}
}
html如下:
<div class="parent">
<div class="square-container">
<div class="small-square"></div>
<div class="small-square"></div>
<div class="small-square"></div>
<div class="small-square"></div>
</div>
<div class="square-container">
<div class="small-square"></div>
<div class="small-square"></div>
<div class="small-square"></div>
<div class="small-square"></div>
</div>
<div class="large-square"></div>
</div>
我觉得我在这里错过了一些重要的flexbox属性.谢谢您的帮助!
0
推荐指数
推荐指数
1
解决办法
解决办法
876
查看次数
查看次数
flexbox中的等高引导卡
我正在为我的卡片组使用flexbox。问题是，我想柔性项div与.card类应保持同样的高度，如果里面的文字.card-block.p在一个卡牌高度的增加，其余也与卡增加。
这是我的小提琴：https : //jsfiddle.net/a2d758jg/ ：
.card-group {
display: -webkit-flex;
display: flex;
flex-wrap: wrap;
max-height: 475px;
background-color: lightgrey;
}
.card img {
width: 100%;
}
.card {
background-color: cornflowerblue;
width: 30%;
margin: 0px;
flex: 2;
border: 1px solid lightgrey;
}
.card-block {
padding: 10px;
background-color: #fff;
}
.card-title {
font-size: 18px;
color: grey;
font-family: verdana, sans;
}
.card-footer {
padding: 15px;
border-top: 1px solid lightgrey;
background-color: lightgrey;
}<div class="container">
<div class="card-group">
<div class="card"> …0
推荐指数
推荐指数
1
解决办法
解决办法
3814
查看次数
查看次数
对齐新行上的项目
我想将我的按钮对齐在我的输入下方,我将它们都放在一个名为card-group的div中.我有两个元素a width: auto;.我正在使用媒体查询使其移动友好,但我不能让它工作.输入和按钮不会相互对齐.这是一个工作实例的小提琴.
HTML
<div class="card-zipcode">
<label>Postcode</label>
<div class="card-group">
<input type="text" class="input-zipcode">
<button class="btn-postnl" id="bekijken" type="submit">Bekijken</button>
</div>
</div>
CSS
.card-group {
display: flex;
justify-content: space-between;
}
.card-group input {
width: auto;
}
.btn-postnl {
display: inline-block;
position: relative;
height: 40px;
width: auto;
margin: 0;
padding: 0 20px;
vertical-align: top;
border: 1px solid rgba(0, 0, 0, 0);
background-color: #ED8C00;
-webkit-appearance: none;
outline: 0;
line-height: 38px;
font-size: 1em;
font-weight: 300;
color: #FFF;
cursor: pointer;
-webkit-transition: all .1s ease-out 0s; …0
推荐指数
推荐指数
1
解决办法
解决办法
54
查看次数
查看次数
我怎样才能首先通过订单显示我的弹性儿童:1没有设置顺序:2,等等剩余的孩子？
我一直在研究Flexbox属性,order: 1以便在我的div设置为class时将其设置为第一个.default-address.我的问题是有任意数量的.address下面这个div的,所以我不能使用order: 2,order: 3等等.
.container {
display: flex;
flex-direction: column;
}
.default-address {
order: 1;
}<div class="container">
<div class="default-address">123 Sesame Street</div>
<div class="address">5th Avenue</div>
<div class="address">1600 Pennsylvania Avenue</div>
<div class="address">221 B Baker St.</div>
</div>有没有办法定义第一个订单而不定义其他订单？
0
推荐指数
推荐指数
1
解决办法
解决办法
59
查看次数
查看次数