@dimkaholodov

Выдавливание flex-блока под другой при сужении окна?

<body>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia harum, sint porro sapiente dolor blanditiis quas labore ipsum est amet excepturi, laudantium magnam soluta, fuga repellendus ad fugiat veritatis quam maiores exercitationem nihil possimus nisi in mollitia. Blanditiis obcaecati nam harum sed quibusdam quaerat doloremque reprehenderit dolor dolorem, animi accusantium, labore, itaque quam, vero sunt? Eveniet saepe quasi optio dicta consequatur id, quibusdam exercitationem commodi accusantium eius dolorum porro perferendis qui voluptatum illo quis soluta sit error unde vitae a modi nisi, facilis, ullam. Aut at repudiandae earum obcaecati nesciunt explicabo repellendus quis, assumenda est neque cumque vitae temporibus nulla, commodi soluta quasi incidunt iste vero eveniet cupiditate sunt id laboriosam. Necessitatibus inventore ab vitae maiores molestiae quisquam accusantium temporibus officiis esse eos. Nesciunt, dolores nemo non fuga repellendus quasi excepturi harum, modi nulla aliquid tenetur minima nam vitae aperiam a est minus esse vel hic. Iure molestias, in perspiciatis quibusdam consequuntur modi beatae omnis architecto tempora. Dolorum fugiat, obcaecati atque suscipit dolor quam a ipsam, architecto reprehenderit nobis quod odio cupiditate asperiores voluptatibus possimus, libero reiciendis in tempora officia aut quas saepe ad. Provident labore, facilis alias iste autem officia nam molestiae impedit explicabo itaque maiores commodi, velit excepturi ipsam optio at cum fuga voluptate ipsum minima. Debitis, odio minus facere explicabo animi nesciunt nulla unde adipisci, ducimus fugiat laudantium commodi aut dolorum numquam atque illum, rerum, accusamus eos?</div>
<div class="container">
	<div class="block"><img src="fff_0.png" alt="fff_0"></div>
	<div class="block"><h1>TITLE</h1>
	<h2>SHORT DESCRIPTION</h2>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam inventore doloremque, ipsa facilis! Totam earum doloremque, explicabo ullam nesciunt, provident ducimus est aliquid numquam harum animi corrupti porro consequuntur consequatur vel deleniti, modi nam odio cumque dolores obcaecati eaque. Earum temporibus eveniet eos excepturi facere incidunt praesentium culpa sit ut quaerat consequatur obcaecati voluptatum, fugiat ex corrupti quas voluptas iste doloremque magni in aspernatur tenetur iusto ea. Quasi cum in dignissimos, quis esse eos nulla. Blanditiis, a! Consequatur atque voluptatibus doloribus voluptate commodi ullam nobis eligendi sit, tempora temporibus, odit esse hic quam aut repellendus labore molestias harum assumenda minima.</p>
	</div>
</div>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, ad, vero! Consequuntur aut fugiat accusantium sunt mollitia officia quam quas, dolor numquam sed magnam reprehenderit? Repudiandae dolorem inventore dicta architecto, perspiciatis minus, blanditiis similique dolor facere tempore reiciendis harum at iure autem obcaecati unde distinctio, consequuntur sapiente debitis. Quis doloribus sunt neque, earum nam hic, qui odio sequi, architecto laudantium error pariatur ullam quasi vero! Nihil, tempora facilis odit deserunt repellat sapiente quas. Qui quidem veniam quibusdam, exercitationem quia culpa. Quia quam laboriosam amet molestiae blanditiis incidunt maiores repudiandae, ducimus quis eius ullam assumenda enim accusantium expedita consectetur doloribus numquam minus neque aut? Quasi optio eligendi perspiciatis maxime velit similique debitis qui delectus quibusdam, error, aspernatur provident. Distinctio debitis expedita nobis illo, itaque eveniet tempore libero iusto magni amet aut iure esse? Facere voluptas, animi sequi quos laborum impedit, aperiam minus rerum, ipsam unde ducimus possimus? Quis dicta magnam hic accusantium ab. Corrupti voluptatibus quod omnis ab consectetur aperiam accusantium dolores praesentium cupiditate aliquid asperiores minus eveniet ut pariatur nulla dolorem beatae quisquam suscipit, harum reiciendis alias? Quo reiciendis molestiae, dignissimos ex neque, delectus, reprehenderit error provident mollitia atque nihil libero voluptatem consectetur dolore. Aliquid praesentium, enim aut illo! Consequatur dolorum quas sint voluptatibus, fugit labore odit maiores minima explicabo quibusdam corrupti non sunt voluptatum, quasi vel, nobis in repellendus pariatur omnis doloribus, quos dicta. Quos provident fugiat molestiae, suscipit.</div>
<style type="text/css">
	.container {
		width: 100%;
		display: flex;
                text-align: center;
	}
	.block {
		padding: 20px;
		flex-wrap: wrap;
		width: 100%;
	}
</style>
</body>


Добрый день. Вопрос в следующем, при сужении окна, блок справа сужается, а блок слева остается на своем месте. Можно ли сделать чтобы блок справа падал под блок слева без использования медиа запросов.

вот собственно код в работе - https://jsfiddle.net/x9jwsc9p/
  • Вопрос задан
  • 344 просмотра
Решения вопроса 1
Krasnodar_etc
@Krasnodar_etc
fundraiseup
flex-wrap пишется тому же элементу, у которого display: flex . У вас он должен быть написан контейнеру.

Для .block пропишите ширину 50% (или меньше, чтобы эти блоки помещались в один ряд). И любой нужный вам min-width . В момент, когда блоки перестанут помещаться в одном ряду - они перестроятся

Пример
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы