使用flex-row和flex-col时顺风不能正确对齐使用计算机和电话

Question

我的一个网站遇到了一个问题，它试图使用flex-row sm:flex-col来使用flex-row sm:flex-col来使其具有响应性，而且它不是在行中输出，而是奇怪的列输出。请记住，我正在使用Swiper进行幻灯片放映。

到目前为止，以下是我的代码

​

<div class="flex-row sm:flex-column md:flex-column lg:flex-row xl:flex-row justify-center h-full">
	<div class="background-space sm:w-full md:w-full lg:w-3/4 xl:w-3/4 ">
		<br>
		<div class="swiper-container mr-0 ml-0 sm:w-full md:w-1/2 lg:w-2/5 xl:2/4">
		    <div class="swiper-wrapper">
		      <img class="swiper-slide" src="/images/1.jpg" alt="">
		      <img class="swiper-slide" src="/images/2.jpg" alt="">
		      <img class="swiper-slide" src="/images/3.jpg" alt="">
		    </div>
		    <!-- Add Pagination -->
		    <div class="swiper-pagination"></div>
		    <!-- Add Arrows -->
		    <div class="swiper-button-next"></div>
		    <div class="swiper-button-prev"></div>
		</div>
	<div class="sm:w-full md:w-full lg:w-1/4 xl:w-1/4 bg-white rounded mx-10 my-20 px-10 py-5 mx-0 the-form">
		<form method="#" action="#">
			<label for="1">1</label>
			<input type="checkbox" name="1" id="1">
			<br>
			<label for="2">2</label>
			<input type="checkbox" name="2" id="2">
			<br>
			<label for="3">3</label>
			<input type="checkbox" name="3" id="3">
			<br>
			<label for="4">4</label>
			<input type="checkbox" name="4" id="4">
			<br>
			<label for="5">5</label>
			<input type="checkbox" name="5" id="5">
			<br>
			<label for="6">6</label>
			<input type="checkbox" name="6" id="6">
			<br>
			<label for="7">7</label>
			<input type="checkbox" name="Blokk" id="7">
		</form>
	</div>

	</div>
</div>

​

Answer 1

您在描述中正确地编写了flex-col，但是代码显示为flex-column。首先，你需要纠正这一点。然后添加设置display: flex;的flex类。没有它，任何flex属性都不会工作。

此外，您还需要回顾“移动优先”的概念。这意味着，您在较小屏幕尺寸上应用的任何类也会应用于较大屏幕尺寸，除非您覆盖它们。因此，例如，flex-row sm:flex-col md:flex-col lg:flex-row xl:flex-row justify-center h-full与flex-row sm:flex-col lg:flex-row justify-center h-full是相同的。