Use of flexbox ensures that elements behave predictably when the page layout must accommodate different screen sizes and different display devices.
Live Demo & Try it yourself!
Live Demo & Try it yourself!
| CSPunjab.Com |
Video is not available... Embedded is previous playlist.
Use of flexbox ensures that elements behave predictably when the page layout must accommodate different screen sizes and different display devices.
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Float Layout</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box;}
body {font-family: Arial, Helvetica, sans-serif;}
/* Style the header */
header {background-color: #666;padding: 30px;text-align: center;font-size: 35px;color: white;}
/* Container for flexboxes */
section {display: -webkit-flex;display: flex;}
/* Style the navigation menu */
nav {-webkit-flex: 1;-ms-flex: 1;flex: 1;background: #ccc;padding: 20px;}
/* Style the list inside the menu */
nav ul {list-style-type: none;padding: 0;}
/* Style the content */
article {-webkit-flex: 3;-ms-flex: 3;flex: 3;background-color: #f1f1f1;padding: 10px;}
/* Style the footer */
footer {background-color: #777;padding: 10px;text-align: center;color: white;}
/* Responsive layout - makes the menu and the content (inside the section) sit on top of each other instead of next to each other */
@media (max-width: 600px) {section {-webkit-flex-direction: column; flex-direction: column;}}
</style>
</head>
<body>
<h2>CSS Layout Flexbox</h2>
<p>In this example, we have created a header, two columns/boxes and a footer. On smaller screens, the columns will stack on top of each other.</p>
<p>Resize the browser window to see the responsive effect.</p>
<p><strong>Note:</strong> Flexbox is not supported in Internet Explorer 10 and earlier versions.</p>
<header>
<h4>G.S.S.S, KHOKHAR</h4>
</header>
<section>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<article>
<h1>GSSS KHOKHAR</h1>
<p align="justify">ਸਰਕਾਰੀ ਸੀਨੀਅਰ ਸੈਕੰਡਰੀ ਸਕੂਲ, ਖੋਖਰ ਸ੍ਰੀ ਮੁਕਤਸਰ ਸਾਹਿਬ 1964 ਈ. ਵਿਚ ਪ੍ਰਾਇਮਰੀ ਸਕੂਲ ਵੱਜੋਂ ਸਥਾਪਿਤ ਹੋਇਆ ਸੀ ਜੋ ਕਿ 2001 ਈ. ਵਿਚ ਅਪਗ੍ਰੇਡ ਕਰਕੇ ਸੀਨੀਅਰ ਸੈਕੰਡਰੀ ਸਕੂਲ ਬਣਾ ਦਿੱਤਾ ਗਿਆ. 2001 ਤੋਂ ਲੈ ਕੇ ਹੁਣ ਤਕ ਇਸ ਸਕੂਲ ਦਾ ਇਤਿਹਾਸ ਸ਼ਾਨਦਾਰ ਰਿਹਾ ਹੈ। ਅਕਾਦਮਿਕ ਖੇਤਰ ਤੋਂ ਲੈ ਕੇ ਖੇਡਾਂ, ਸਭਿਆਚਾਰਕ ਗਤੀਵਿਧੀਆਂ ਅਤੇ ਸਹਿ-ਵਿਦਿਅਕ ਗਤੀਵਿਧੀਆਂ ਵਿਚ ਇਸ ਸਕੂਲ ਨੇ ਸ਼ਾਨਦਾਰ ਪ੍ਰਾਪਤੀਆਂ ਕੀਤੀਆਂ ਹਨ.</p>
</article>
</section>
<footer>
<p>Footer</p>
</footer>
</body>
</html>