How to Design a Responsive Honeycomb Style Layout Based on Flexbox

How to Design a Responsive Honeycomb Style Layout Based on Flexbox: BY Gregory13 Nov,2020; Tags:
Flex Layout Responsive Layout

Introduction

Flex layout is currently very widely used, and it is more flexible and convenient than the traditional box model. This time we bring you a typical example of Flex-based layout. It is a responsive honeycomb layout based on Flexbox. We can place pictures in this honeycomb layout so that we can make a creative photo wall.

How to Design a Responsive Honeycomb Style Layout Based on Flexbox

Instructions

HTML Body Code

<div class="tree-wrap">
			<div class="tree">
				<span></span>
				<span></span>
				<span></span>
				<span></span>
			</div>
		</div>
		<div class="windmill-pole-wrap">
			<div class="windmill-pole"></div>
		</div>
		<div class="windmill-pole-ellipses">
			<div class="windmill-pole-ellipses-wrapper">
				<div class="windmill-pole-ellipses-wrap">
					<div class="windmill-pole-ellipses-center"></div>
					<div class="ellipses">
						<span></span>
						<span></span>
						<span></span>
					</div>
				</div>
			</div>
		</div>

Css Code

body{
	width: 100%;
	display: block;
	overflow-x: hidden;
	background: #fff;
	font-family: 'Poppins', sans-serif;
}
.switch-wrap {
	position: relative;
	font-size: 17px;
	color: #212121;
	font-weight: 600;
	letter-spacing: 1px;
	text-align: center;
	margin: 0 auto;
	margin-top: 30px;
	-webkit-transition: all 500ms linear;
	transition: all 500ms linear; 
}
.switch-wrap span {
	font-size: 14px;
	color: #000;
	font-weight: 500;
	letter-spacing: 0;
}
#switch,
#circle {
	height: 31px;
	cursor: pointer;
	border: 2px solid #000;
	-webkit-transition: all 0.4s cubic-bezier(0.54, 1.6, 0.5, 1);
		transition: all 0.4s cubic-bezier(0.54, 1.6, 0.5, 1);
} 
#switch {
	width: 60px;
	margin: 0 auto;
	border-radius: 27px;
	position: relative;
	display: block;
	text-align: center;
	margin: 0 auto;
    transform: translateY(10px);
}

Js Code

$("#switch").on('click', function () {
		if ($("body").hasClass("slow-wind")) {
			$("body").removeClass("slow-wind");
			$("#switch").removeClass("switched");
		}
		else {
			$("body").addClass("slow-wind");
			$("#switch").addClass("switched");

		}
	});

VIEW NOW