Резиновые квадраты на CSS

Пример:

Обратите внимание: контент, расположенный в блоках должен умещаться в них при любом разрешении экрана, иначе он будет обрезан

Если блоки используются не для текста, а например, для фоновых картинок, слой fl-col-text не нужен.

HTML:

<div class="fl-row">
	<div class="fl-col">
		<div class="fl-col-text">
			1
		</div>		
	</div>	
	<!-- Еще блоки -->
	<div class="fl-col">
		<div class="fl-col-text">
			8
		</div>		
	</div>
</div>

</div>

</div>

CSS:

.fl-row * {
	box-sizing: border-box;
}	
.fl-row {
	display: flex;
	flex-wrap: wrap;
	margin: 10px 0;
}	
.fl-col {
	width: calc(25% - 20px);
	margin: 10px;
	position: relative;
	overflow: hidden;
	border: 8px solid #BFE2FF;
}	
.fl-col:after {
	content: "";
	padding-top: 100%;
	float: left;
}
.fl-col-text {
	padding: 20px;
	position: absolute;
	width: 100%;
	height: 100%;
	display: flex;
	flex-flow: column;
	align-items: center;
	justify-content: center;
	font-size: 30px;
	color: #337AB7;
}

.fl-row * {

box-sizing: border-box;

}

.fl-row {

display: flex;

flex-wrap: wrap;

margin: 10px 0;

}

.fl-col {

width: calc(25% - 20px);

margin: 10px;

position: relative;

overflow: hidden;

border: 8px solid #BFE2FF;

}

.fl-col:after {

content: "";

padding-top: 100%;

float: left;

}

.fl-col-text {

padding: 20px;

position: absolute;

width: 100%;

height: 100%;

display: flex;

flex-flow: column;

align-items: center;

justify-content: center;

font-size: 30px;

color: #337AB7;

}

Пример:

HTML:

CSS:

Смотрите также:

Добавить комментарий: