使用flex-row和flex-col与顺风不能使用计算机和手机正确对齐

Question

我有一个我的网站的问题，尝试使用flexbox和glwind-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。首先，你需要纠正这个问题。然后添加设置flex的display: 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相同。