Блог

У меня простой вопрос. Возможно ли создать этот макет только с помощью Flexbox без добавления divs в мой HTML-код?

Мне удалось получить этот макет, сократив мою структуру HTML с помощью некоторых разделов (две части для правой и левой стороны и т. Д.), Но я застрял, когда попытался сделать это без добавления этих разделов.

Вот структура HTML, в которой я хотел бы разобраться!

         *{
    	padding:0;
    	margin:0;
    	box-sizing:border-box;
    }
    main {
    	height:100vh;
    	display:flex;
    	justify-content:center;
    	align-items:center;
    }
    section{
    	background-color:blue;
    	height:800px;
    	width:800px;
    }  

     <main>
	<section>
		<div class="box1"></div>
		<div class="box2"></div>
		<div class="box3"></div>
		<div class="box4"></div>
		<div class="box5"></div>
		<div class="box6"></div>
		<div class="box7"></div>
		<div class="box8"></div>
		<div class="box9"></div>
	</section>
</main>  

Если вы хотите вместо этого взглянуть на css grid, вы можете попробовать что-то вроде этого: https://jsfiddle.net/6yturLg1 /

По сути, вы определяете сетку, затем размещаете элементы внутри сетки там, где хотите.

 html, body {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding:0px;
}
section {
  display: grid;
  grid-template-columns: 25% 25% 25% 25%;
  grid-template-rows: 25% 25% 25% 25%;
  width: 100%;
  height: 100%;
}

section div.box1 {
  background-color: #f00;
  grid-column-start: 1;
  grid-column-end: span 2;
  grid-row-start: 1;
  grid-row-end: span 2;
}

section div.box2 {
  background-color: #f90;
  grid-column-start: 1;
  grid-column-end: span 1;
  grid-row-start: 3;
  grid-row-end: span 1;
}

/* ... etc ... */