Использование flex-row и flex-col с неправильным выравниванием попутного ветра с помощью компьютера и телефона - PullRequest
Новая
       33

Использование flex-row и flex-col с неправильным выравниванием попутного ветра с помощью компьютера и телефона

1 голос
/ 14 марта 2019

У меня проблема с моим веб-сайтом, когда я пытаюсь сделать его адаптивным с помощью flexbox и попутного ветра с помощью 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>

1 Ответ

1 голос
/ 15 марта 2019

Вы правильно написали flex-col в описании, но код говорит flex-column. Прежде всего, вам нужно исправить это. Затем добавьте класс flex, который устанавливает display: flex;. Без этого свойство flex работать не будет.

Также вам необходимо пересмотреть понятие «mobile-first». Это означает, что любые классы, которые вы применяете для экранов меньшего размера, также применяются к экранам большего размера, если вы не переопределите их. Так, например, 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.

...