Question

我在一个flex容器中有几个flex项：

<div class="flex-container">
    <div class="flex-item flex-item-66">Box 1 | 66%</div>
    <div class="flex-item flex-item-33">Box 2 | 33%</div>
    <div class="flex-item flex-item-33">Box 3 | 33%</div>
    <div class="flex-item flex-item-33">Box 4 | 33%</div>
    <div class="flex-item flex-item-100">Box 5 | 100%</div>
</div>

不幸的是，Box 1包含大量文本。方框2,3和4只有很少的文字。虽然方框2,3和4符合方框1的高度，但只有方框1出现在方框1的右侧。其他方框显示在方框下方（详见图片）。

有没有办法让盒子在新行开始之前填充垂直空白？

我的目标是，方框3和方框4直接显示在方框2下方。只有当它们与方框1达到相同的高度时，才应打开一个新的线。

结果应该像我的第二张图片：

＆＃13;

/*********** General *******/
.flex-container {
    background: none;
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10px;
}

/** st_justifyContent START **/
.flex-justify-start {
    justify-content: flex-start;
}

.flex-justify-end {
    justify-content: flex-end;
}

.flex-justify-center {
    justify-content: center;
}

.flex-justify-space-evenly {
    justify-content: space-evenly;
}
/** st_justifyContent END **/


/** st_flexDirection START **/
.flex-row {
    flex-direction: row;
}

.flex-column {
    flex-direction: column;
}
/** st_flexDirection END **/


/*************** Single Item ***************/
/** st_width START **/
.flex-item {
    box-sizing: border-box;
    background-color: rgba(255,255,255,1);
    padding: 20px;
    margin: 10px;
    border: 1px solid black;
}

.flex-item > .flex-container {
    margin-bottom: 0;
}

.flex-item > .flex-container > .flex-item {
    padding: 0;
}

.flex-item-width-25 {
    width: calc(25% - 20px);
}

.flex-item-width-33 {
    width: calc(33.33333% - 20px);
    float: right;
}

.flex-item-width-50 {
    width: calc(50% - 20px);
}

.flex-item-width-66 {
    width: calc(66.66666% - 20px);
}

.flex-item-width-75 {
    width: calc(75% - 20px);
}

.flex-item-width-100 {
    width: calc(100% - 20px);
}

/** st_alignSelf START **/
.flex-align-self-start {
    align-self: flex-start;
}

.flex-align-self-center {
    align-self: center;
}

.flex-align-self-end {
    align-self: flex-end;
}

.flex-align-self-stretch {
    align-self: stretch;
}

＆＃13;

<div class="flex-container flex-justify-end flex-row">
	<div class="flex-item flex-item-width-66 flex-align-self-start" style="order: 1; flex-grow: 1">
		<h3 class="flex-item-title">Box 1 | 66%</h3>
		<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p>
	<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
	<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </p>
	<p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p>
	</div>
	<div class="flex-item flex-item-width-33 flex-align-self-start" style="order: 1; flex-grow: 1">
		<h3 class="flex-item-title">Box 2 | 33%</h3>
		<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
	</div>
	<div class="flex-item flex-item-width-33 flex-align-self-start" style="order: 1; flex-grow: 1">
		<h3 class="flex-item-title">Box 3 | 33%</h3>
		<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
	</div>
	<div class="flex-item flex-item-width-33 flex-align-self-start" style="order: 1; flex-grow: 1">
		<h3 class="flex-item-title">Box 4 | 33%</h3>
		<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
	</div>
	<div class="flex-item flex-item-width-100 flex-align-self-start" style="order: 1; flex-grow: 1">
		<h3 class="flex-item-title">Box 5 | 100%</h3>
		<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
	</div>
</div>

＆＃13;

Answer 1

请参阅下面的代码我认为你想这样。

＆＃13;

/*********** General *******/
.flex-container {
    background: none;
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10px;
}

/** st_justifyContent START **/
.flex-justify-start {
    justify-content: flex-start;
}

.flex-justify-end {
    justify-content: flex-end;
}

.flex-justify-center {
    justify-content: center;
}

.flex-justify-space-evenly {
    justify-content: space-evenly;
}
/** st_justifyContent END **/


/** st_flexDirection START **/
.flex-row {
    flex-direction: row;
}

.flex-column {
    flex-direction: column;
}
/** st_flexDirection END **/


/*************** Single Item ***************/
/** st_width START **/
.flex-item {
    box-sizing: border-box;
    background-color: rgba(255,255,255,1);
    padding: 20px;
    margin: 10px;
    border: 1px solid black;
}

.flex-item > .flex-container {
    margin-bottom: 0;
}

.flex-item > .flex-container > .flex-item {
    padding: 0;
}

.flex-item-width-25 {
    width: calc(25% - 20px);
}

.flex-item-width-33 {
    width: calc(33.33333% - 20px);
    float: right;
}

.flex-item-width-50 {
    width: calc(50% - 20px);
}

.flex-item-width-66 {
    width: calc(66.66666% - 20px);
}

.flex-item-width-75 {
    width: calc(75% - 20px);
}

.flex-item-width-100 {
    width: calc(100% - 20px);
}

/** st_alignSelf START **/
/*.flex-align-self-start {
    align-self: flex-start;
}*/

.flex-align-self-center {
    align-self: center;
}

.flex-align-self-end {
    align-self: flex-end;
}

.flex-align-self-stretch {
    align-self: stretch;
}

＆＃13;

<div class="flex-container flex-justify-end flex-row">
	<div class="flex-item flex-item-width-66 flex-align-self-start" style="order: 1; flex-grow: 1">
		<h3 class="flex-item-title">Box 1 | 66%</h3>
		<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p>
	<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
	<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </p>
	<p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p>
	</div>
	<div class="flex-item flex-item-width-33 flex-align-self-start" style="order: 1; flex-grow: 1">
		<h3 class="flex-item-title">Box 2 | 33%</h3>
		<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
	</div>
	<div class="flex-item flex-item-width-33 flex-align-self-start" style="order: 1; flex-grow: 1">
		<h3 class="flex-item-title">Box 3 | 33%</h3>
		<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
	</div>
	<div class="flex-item flex-item-width-33 flex-align-self-start" style="order: 1; flex-grow: 1">
		<h3 class="flex-item-title">Box 4 | 33%</h3>
		<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
	</div>
	<div class="flex-item flex-item-width-100 flex-align-self-start" style="order: 1; flex-grow: 1">
		<h3 class="flex-item-title">Box 5 | 100%</h3>
		<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
	</div>
</div>

＆＃13;

CSS Flexbox：对齐问题

1 个答案: