2个问题。似乎flexbox是用于对称布局的好工具。但是,在包装元素时,我找不到将最后一个项目处理为某种“中断行流”的示例,并且无法像justify-content:flex-end;
那样将其粘贴到右侧,也不能堆叠在一起。 / p>
这里是codepen 和代码:
body {
display: flex;
flex-wrap: wrap;
}
.full-width {
flex: 100%;
}
.fifty {
flex: 0 0 50%;
}
.one-third {
flex: 0 0 33%;
/*how do we get the second .one-third to stick to the right?*/
}
<div class="full-width">full-width</div>
<div class="fifty">fifty</div>
<div class="fifty">fifty</div>
<div class="one-third">one-third</div>
<div class="one-third">one-third <br/> How do we get this to stick to the right when part of a row?</div>
一个我找不到的类似问题是,是否有可能将最后两个元素彼此堆叠在一起。
答案 0 :(得分:2)
您可以尝试这样做。
设置margin-left
最后一个元素的.one-third
。
请参阅代码笔链接: https://codepen.io/davecar21/pen/QBQRvL
body{
display:flex;
flex-wrap: wrap;
}
.full-width{
flex:100%;
}
.fifty{
flex:0 0 50%;
}
.one-third{
flex:0 0 33%;
// how do we get the second .one-third to stick to the right?
}
.one-third:last-child{
margin-left: auto;
// will make the last-child margin-left to be auto so it will align to the right side
}
<div class="full-width">full-width</div>
<div class="fifty">fifty</div>
<div class="fifty">fifty</div>
<div class="one-third">one-third</div>
<div class="one-third">one-third <br/> How do we get this to stick to the right when part of a row?</div>
一个我找不到的类似问题是是否有可能 将最后两个元素彼此堆叠在一起。
我认为只有两个堆叠元素的宽度大于50%才有可能。
div.one-third:nth-child(4),
div.one-third:nth-child(5){
margin:auto;
flex:0 0 55%;
}