CSS Flex：排成行

Question

我无法使用flex在行内设置行。

.row, [class*='col-'] {
	display: flex;
	flex-direction: row;
}
.col-6 {
	flex-basis: 50%;
	max-width: 50%;	
}

<div class="row">

	<div class="col-6" style="background-color:red;">
		
		<div class="row">
			
			<div class="col-6" style="background-color:green;">
				should be 25%
			</div>
			
			<div class="col-6" style="background-color:blue;">
				another 25%
			</div>
			
		</div>
	
	</div>
	
	<div class="col-6" style="background-color:gray;">
		Right half
	</div>

</div> <!-- /.row -->

<p>The red background should not be seen, since the green and blue should each take up 50% of the red's space...</p>

Answer 1

由于flex将填充空间（基于此基础），因此您不需要其他row。实际上，在弹性框布局中，您不需要经常使用行。

如果你拿出嵌套的行，这似乎就是你所追求的：

.row, [class*='col-'] {
	display: flex;
	flex-direction: row;
}
.col-6 {
	flex-basis: 50%;
	max-width: 50%;	
}

<div class="row">

	<div class="col-6" style="background-color:red;">
		  			
			<div class="col-6" style="background-color:green;">
				should be 25%
			</div>
			
			<div class="col-6" style="background-color:blue;">
				another 25%
			</div>
	
	</div>
	
	<div class="col-6" style="background-color:gray;">
		Right half
	</div>

</div> <!-- /.row -->

<p>The red background should not be seen, since the green and blue should each take up 50% of the red's space...</p>