Как сверстать такое с помощью flex?

Question

[yoyoyooyoyoyoyoyoyoyoyoyo]

Добрый вечер. Только начинаю осваивать flex'ы. Как бы Вы сверстали подобное с помощью флексов ?

Comments

[WapSter]

А ты бы как сверстал?

[Сергей delphinpro]

Я бы не использовал здесь флексы.

[yoyoyooyoyoyoyoyoyoyoyoyo]

WapSter,

<div class="block-parent-2">
			  <div class="block-child-img-2">
				<div class="iphone-left-2">
					<img src="images/iphone2.png" alt="#" title="#"/>
				</div>
			  </div>
				  <div class="block-child-2">
				   	<h2>текст</h2>
					<p class="p-right">много текста</p>
				  </div>
		</div>

.block-parent {
	  display: flex;  

		.block-child {  
		  text-align: center;
		  padding: 15px;
		  box-sizing: border-box;
		  width: 50%;
		  white-space: pre-wrap;
		  display: flex;   
		  flex-wrap: wrap;
		  align-items: center;
		  margin-left: 166px;

		  		h2 {
		  			@include font($white,700,72px,none);
		  			line-height: 72px;
		  		}
			    .p-left {
				  	@include font($white,300,36px,none);
				  	padding-top:40px;
				  	    text-align: left;
	    				width: 813px;
	    				line-height: 36px;
			    }
	   

	   		.iphone-right {
	   			    max-width: 1330px;
	   			    width: 100%;
				    height: 1387px;
				    top: 904px;
				    left: 573px;
				    position: absolute;
	   		}


		}

	}

я сделал таким образом, но мне кажется это не совсем верно...

[yoyoyooyoyoyoyoyoyoyoyoyo]

Сергей delphinpro, а каким методом было бы лучше это сделать ? Учитывая, что нужно делать адаптивность

[Сергей delphinpro]

yoyoyooyoyoyoyoyoyoyoyoyo,

height: 1387px;
top: 904px;
left: 573px;

Вообще мимо. Не должно быть в стилях никаких магических цифр. В идеале.

[yoyoyooyoyoyoyoyoyoyoyoyo]

Сергей delphinpro, а как еще можно расположить картинку, если не топ/лефт, ведь ей задан абсолют. Ибо она слегка наезжает на колонку текста (но не должна толкать его).

[Сергей delphinpro]

yoyoyooyoyoyoyoyoyoyoyoyo, Вы извините, я вашу конкретную проблему сейчас вдаваться не буду (может быть завтра если попадется на глаза). Я лишь сказал о том, что в адаптивной верстке не приветствуются магические числа

[Сергей delphinpro]

Или даже лучше эта ссылка https://www.frontender.info/magic-numbers-in-css/

Answer 1

[RuSaG0]

Тут флексы ни при чем.
Делаешь секцию - ей position relative. А картинку внутри секции position absolute