Responsive layouts with Flexbox
Using CSS Flexbox properties in HTML web page, you can create responsive website layout for any type of website web page. So that the CSS based object designed by you can be compatible on different device screen sizes and can be attractive and commercially previewed in proper order. Using CSS Flexbox properties in web development helps in creating flexible and customized custom web page design layout without the need for complex media object query.
Creating responsive layout through CSS Flexbox in HTML web page.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Let Tray Responsive Flexbox Layout In Css</title>
<link rel=”stylesheet” href=”styles.css”>
</head>
<body>
<header class=”header”>Website Header Menu Area</header>
<div class=”flex-container”>
<div class=”flex-item”>Home</div>
<div class=”flex-item”>Blog</div>
<div class=”flex-item”>Contact</div>
<div class=”flex-item”>About</div>
</div>
<br>
<footer class=”footer”>Website Footer Menu Area </footer>
</body>
</html>
Flexbox properties in CSS.
- flex-direction – It manages the direction of the CSS Flexbox element used in the existing HTML web page according to the device screen size.
- flex-wrap – It wraps the flex content item element on multiple lines in the existing HTML web page.
- justify-content – It aligns the object item within the container in the existing HTML web page CSS properly according to the main axis.
- align-items – It properly aligns the flex items based on the cross axis in the existing HTML CSS web page.
- flex-basis and flex-grow – It helps to customize the default size of the content or items in the existing HTML CSS web page based on the available location.
Responsive Flexbox Layout Example in HTML Web Page CSS.
So let’s create a simple responsive web page layout with flexbox in HTML CSS web page. Which automatically adapts as it changes according to the user device screen size.
Here is a basic HTML CSS web page structure.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Let Explore Responsive Flexbox Css Layout Design</title>
<style>
body {
margin: 0;
font-family: times new roman;
}
.header, .footer {
background-color: teal;
color: yellow;
padding: 15px;
text-align: center;
}
.flex-container {
display: flex;
flex-wrap: wrap; /* it automatically wraps text to next line */
justify-content: space-around; /* it distributes all around space */
padding: 15px;
}
.flex-item {
background-color: pink;
color: #232;
margin: 3px;
padding: 7px;
flex: 1 1 300px; /* it grows and shrink item attribute */
text-align: left;
border-radius: 10px;
}
/* flex properties Responsive adjustments */
@media (max-width: 700px) {
.flex-container {
flex-direction: column; /* it aligns item in samll screen device or gadgets */
align-items: left; /* it displays item in left direction */
}
.flex-item {
flex: 1 1 200%; /* it displays Full width on small device screens */
}
}
</style>
</head>
<body>
<header class=”header”>WebPage Header Area</header>
<div class=”flex-container”>
<div class=”flex-item”>Home</div>
<div class=”flex-item”>Blog</div>
<div class=”flex-item”>Contact Us</div>
<div class=”flex-item”>About Us</div>
<div class=”flex-item”>Pages</div>
<div class=”flex-item”>Disclaimers</div>
</div>
<footer class=”footer”>WebPage Footer Area</footer>
</body>
</html>
About Flex Container in CSS.
Flex Container properties:
- display: flex;: – This CSS defines a flex container behavior in HTML web page.
- flex-wrap: wrap;: – The created flex items overflow into the CSS container in the existing HTML web page. So this property helps them to automatically move or wrap to the next line.
- justify-content: space-around;: – It distributes the space around the created item in the CSS container in the current HTML web page.
Flex items:
- flex: 1 1 200px;: – It sets the CSS shorthand flex items in the current HTML web page.
- flex-grow: – It moves the CSS 1 items by filling space in the default HTML web page.
- flex-shrink: – It shrinks them from overflowing CSS 1 in the default HTML web page.
- flex-basis: – It defines the initial size of CSS 200px flex items in the default HTML web page.
Here the above flex item container setup automatically flexes the flex items in size while maintaining the minimum width.
CSS Flexbox Properties in HTML Web Page.
Use the flexbox wrap property flex-wrap to wrap CSS items on multiple lines in an HTML web page.
Custom web development Customize layouts for various electronic devices and gadgets on different screen sizes by manually adjusting the flex-direction properties as per the requirement.
Try media queries to change styles according to the width of the web page viewport for specific and better user response.
