使用flexbox将div放在左下角

Question

使用flexbox时，我在使用左下角的元素时遇到了一些困难。 基本上我正试图让“世界”文本直接出现在'hello'文本下方（即弹性框的左下角）。

rel {
  position: relative;
  background: rgba(255, 0, 0, 0.5);
  padding: 5px;
  margin-top: auto;
}
abs {
  position: absolute;
  background: rgba(0, 255, 0, 0.5);
  padding: 5px;
}
column {
  display: flex;
  flex-direction: column;
}
item {
  display: flex;
  align-items: center;
  flex: auto;
  border: 1px solid blue;
}

<column>
  <item>
    hello
    <br>hello
    <br>hello
    <br>hello
    <br>
    <rel>
      <abs>
        world
        <br/>world
        <br/>world
        <br/>world
        <br/>
      </abs>
    </rel>
  </item>
</column>

Answer 1

这就是你要追求的吗？我所做的是将item显示为flex列，这将使其他元素作为列落在其下。同时将align-items: flex-start;添加到column，以便它们正确对齐。您也可以删除不需要的位置属性。

<强> Live Demo on jsfiddle, snippet below.

CSS更改

column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

item {
    display: flex;
    align-items: center;
    flex: auto;
    flex-direction: column;
    border: 1px solid blue;
}

<强>段

rel{
  background:rgba(255,0,0,0.5);
  padding:5px;
}

abs{
  background:rgba(0,255,0,0.5);
  padding:5px;
}

column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

item {
  display: flex;
  align-items: center;
  flex: auto;
  flex-direction: column;
  border: 1px solid blue;
}

<column>
	<item>
		hello<br>
		hello<br>
		hello<br>
		hello<br>
		<rel>
			<abs>
				world<br/>
				world<br/>
				world<br/>
				world<br/>
			</abs>
		</rel>
	</item>
</column>

Answer 2

将flex-direction: column;添加到item标记。删除填充也将完美匹配边缘。这是包含所有元素的直接容器。您也可以删除绝对和相对位置。

rel {
  background: rgba(255, 0, 0, 0.5);
  padding: 5px;
}
abs {
  background: rgba(0, 255, 0, 0.5);
}
column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
item {
  display: flex;
  align-items: center;
  flex: auto;
  flex-direction: column;
  border: 1px solid blue;
}

<column>
  <item>
    hello
    <br>hello
    <br>hello
    <br>hello
    <br>
    <rel>
      <abs>
        world
        <br/>world
        <br/>world
        <br/>world
        <br/>
      </abs>
    </rel>
  </item>
</column>