The Developer Brains


CSS3 FLEXBOX

Web Designing | Web Development


SEE MORE

download tdb school app from playstote
Download the App from Play Store













</CSS3 FLEX>





A Flex is used to design responsive websites. Flex is a CSS3 shorthand property. We can use flexible container by setting the flex value to display property.


SEE MORE





Style_Sheets @Import_Rule Structure Box_Model Background_Image Media_Queries Fonts Box_Shadow FlexBox Grid Transition Animations 2D_Transform 3D_Transform Filter_Property Inheritance Vertical_Centering Responsive_UI CSS_Quiz



















</FLEXIBLE CONTAINER>


BOX 1
BOX 2
BOX 3




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





















Flexible layout is used to design flexible responsive layouts for different devices..
1. true
2. false




Check Now



CSS3 QUIZ







Next: CSS3 Pseudo Elements


Previous

       

Next Page













  Share TDB SCHOOL  

Share this E-Learning Website on social media platforms with your friends and followers










IMPORTANT PROPERTIES

OTHER PROPERTIES

LINKS

ABOUT US!

TDB School is a leading web developer's website. Here you will learn how to code amazing, modern, responsive, and attractive (static and dynamic) websites by using the latest web technologies. Learn Web Development in the easiest & smartest way. Start your journey from a beginner level to a professional level with the full support of our Expert Developer's Team.




Copyright © 2020 www.tdbschool.com
Powered by The Developer Brains