Flex-start和flex-end在一条线上

时间:2016-12-11 08:48:51

标签: html5 css3 flexbox

如何在一行中找到一些元素,其中一行包含flex-start属性,而少数元素只有flex-end

3 个答案:

答案 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。