@olbone

Построить макет с помощью Flex-а?

Имеется такой макет. Собственно код я написал, но он не казистый ,я еще зеленый новичек. Поправьте пожалуйста где я накосячил.5e060e6071420743429151.png
<!DOCTYPE html>
<html lang="ru">
<head> <meta charset ="utf-8">
 <title>FLEX</title>
 <!--<link rel ="stylesheet" href ="style/li.css"> -->
 <style>
   *{ box-sizing: border-box;}
   .conteiner { display: flex; flex-direction: row; padding: 0.5em; margin: 0.5em; background: #666; justify-content: center; }
   .child { background: #999; height: 600px; padding: 0.5em; margin: 0.5em; flex: 0 0 32%;}
   .section { background: #eee; padding: 0.3em; margin: 0.3em; }
   .one { width: 170px; height: 80px;}
   .two { width: 90px; height: 120px;}
   .sidebar_left { display: flex; align-items: center; text-align: center;}
   .main .section { width: 150px; height: 200px; display: inline-block;}
   .main { text-align: center; }
   .fore { margin-top: 70px;}
   .five { width: 130px; height: 200px; margin-top: 300px;}
   .six { width: 250px; height: 70px;}
   .sidebar_right .section  { display: inline-block;}
   .sidebar_right { text-align: center;}
   .
   
 </style>
</head>
<body>
  <div class = "conteiner">
    <div class ="sidebar_left child">
	  <div class ="section one"><p>TEXT </p></div>
	  <div class ="section two"><p>TEXT</p></div>
	</div>
    <div class ="main child">
	  <div class ="section three"><p>TEXT CONTROL</p></div>
	  <div class ="section fore"><p>TEXT CONTROL</p></div>
	</div>  	
	<div class ="sidebar_right child"> 
	  <div class ="section five"><p>TEXT CONTROL</p></div>
	  <div class ="section six"><p>TEXT CONTROL</p></div>
	</div>
  </div> 	    
</body>
</html>
  • Вопрос задан
  • 133 просмотра
Решения вопроса 1
GrenadinGran
@GrenadinGran
Помог ответ - отметь решением
.main {
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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