</RESPONSIVE WEB PAGE DESIGN>

You can check these responsive blocks by changing the size of your web browser's viewport.

BOX 1

BOX 2

BOX 3

BOX 4

BOX 5

BOX 6

BOX 7

BOX 8

BOX 9

BOX 10

BOX 11

BOX 12

BOX 1

BOX 2

BOX 3

BOX 4

BOX 5

BOX 6

BOX 1

BOX 2

BOX 3

These blocks are designed to work on user interface of different devices.

What is CSS3 Flexible Container Layout?

CSS3 Flexible layout is used to design flexible responsive layout for different devices. We can easily design a website with different views by using CSS3 display:flex property.

SYNTAX

display: flex;


	<style>
		.tdb-flex{
			display:flex;	
			}
	</style>

HTML CODE


<body>
	<div class="tdb-height">
	<div class="tdb-div1">DIV1</div>
	<div class="tdb-div2">DIV2</div>
	</div>
	</body>

Note: You can also use Grid Layout for resposive web designs.


		<!DOCTYPE html>
	<html>
		<head>
			<style>
			.tdb-flex{
				display:flex;
				color:white;
				padding:10px;
				text-align:center
			}
			.tdb-div1{background-color:red;
				width:50%}
			.tdb-div2{background-color:black;
				width:50%}
			</style>
		</head>
	<body>
	<div class="tdb-flex">
	<div class="tdb-div1">DIV1</div>
	<div class="tdb-div2">DIV2</div>
	</div>
	</body>
	</html>

Try it Yourself

Flex Container Properties

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

These are the properties we use for flexible layout.

Example


	<style>
		.tdb-flex{
			display:flex;
			flex-direction: column;	
			}
	</style>

Note: You can also use Grid Layout for resposive web designs.


		<!DOCTYPE html>
	<html>
		<head>
			<style>
			.tdb-flex{
				display:flex;
				padding:10px;
				text-align:center;
				flex-direction: column;
			}
			.tdb-div1,.tdb-div3{background-color:pink;
				width:50%}
			.tdb-div2{background-color:orange;
				width:50%}
			</style>
		</head>
	<body>
	<div class="tdb-flex">
	<div class="tdb-div1">DIV1</div>
	<div class="tdb-div2">DIV2</div>
	<div class="tdb-div3">DIV3</div>
	</div>
	</body>
	</html>

Try it Yourself

CSS3 RESPONSIVE UI

</CSS3 RESPONSIVENESS>

</RESPONSIVE WEB PAGE DESIGN>

What is CSS3 Flexible Container Layout?

SYNTAX

HTML CODE

Flex Container Properties

Example