如何在一行中找到一些元素,其中一行包含flex-start
属性,而少数元素只有flex-end
。
答案 0 :(得分:5)
像这样,使用margin-left: auto
body > div {
display: flex;
border: 1px solid red;
}
div div {
padding: 10px;
background: lightgray;
}
div div:nth-child(3) {
margin-left: auto;
}
<div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
使用align-self
body > div {
display: flex;
border: 1px solid red;
align-items: flex-start;
height: 100px;
}
div div {
padding: 10px;
background: lightgray;
}
div div:nth-child(3),
div div:nth-child(4) {
align-self: flex-end;
}
<div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
答案 1 :(得分:4)
使用分隔符元素进行拆分:
margin: auto
请避免使用react native
弹性框。某些原生解决方案可能不支持此功能,例如var stars = [0, 0, 2, 3, 5],
count = 0,
sum = 0;
stars.forEach(function(value, index){
count += value;
sum += value * (index + 1);
});
console.log(sum / count);
。
答案 2 :(得分:1)
最简单的方法是使用justify-content: space-between;
:
.parent {
display: flex;
justify-content: space-between;
}
.parent > div {
padding: 10px;
background: grey;
}
<div class="parent">
<div>1</div>
<div>2</div>
</div>
第一个div将显示为flex-start,第二个div将显示为flex-end。