使用 flex-row 和 flex-col 与顺风未使用计算机和电话正确对齐

Posted 2023-03-07

【中文标题】使用 flex-row 和 flex-col 与顺风未使用计算机和电话正确对齐

【英文标题】：Using flex-row and flex-col with tailwind not aligning correctly using computer and phone

【发布时间】：2019-08-05 16:33:29

【问题描述】：

我的网站有一个问题，我试图通过 flex-row sm:flex-col 使用 flexbox 和 tailwind 使其具有响应性，并且它不会仅在行中输出奇怪的列。请记住，我正在使用 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" >
		      <img class="swiper-slide" src="/images/2.jpg" >
		      <img class="swiper-slide" src="/images/3.jpg" >
		    </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>

【参考方案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 相同。