我如何使我的flexbox在任何宽度的页面上都灵活

Question

我的问题是，当我将其拖动到较小的窗口尺寸时，它不适合页面的某些高度尺寸。我想适合页面的任何高度。我的代码有什么问题？在任何Windows浏览器尺寸下，我需要什么来适应页面的高度？

#features {
	display: flex;
	flex-direction:row;
	align-items: center;
    align-content: center;
	justify-content: center;		
}

#features .box {
	width:50%;
	margin:auto;
	max-height: 100%;
	padding: 2.5em;
	text-align: center;
}

<section id="features">
		<div class="box box-light">
			<i class = 'fas fa-hotel fa-3x'></i>
			<h2> Great Location </h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, necessitatibus.</p>	
		</div>

		<div class="box box-primary">
			<i class = 'fas fa-utensils fa-3x'></i>
			<h2> Free Meals </h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur, quibusdam. </p>
		</div>

		<div class="box box-light">
			<i class = 'fas fa-dumbbell fa-3x'></i>
			<h2> Fitness Room </h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, mollitia.</p>
		</div>
	</section>

Answer 1

您必须使用vh单位。该单位取决于页面高度。使用flex-wrap:wrap创建断点也是一个好主意。

尝试此代码：

#features {
	display: flex;
    flex-wrap:wrap;
	flex-direction:row;
	align-items: center;
    align-content: center;
	justify-content: center;		
}

#features .box {
	width:50%;
	margin:auto;
	height: 100vh;
	padding: 2.5em;
	text-align: center;
}

<section id="features">
		<div class="box box-light">
			<i class = 'fas fa-hotel fa-3x'></i>
			<h2> Great Location </h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, necessitatibus.</p>	
		</div>

		<div class="box box-primary">
			<i class = 'fas fa-utensils fa-3x'></i>
			<h2> Free Meals </h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur, quibusdam. </p>
		</div>

		<div class="box box-light">
			<i class = 'fas fa-dumbbell fa-3x'></i>
			<h2> Fitness Room </h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, mollitia.</p>
		</div>
	</section>