Flexbox
بازگشت به صفحه اصلی
بازگشت به صفحه مقاله
دو ستونی
دو سطری
اجرای کد RUN »
<!DOCTYPE html> <html> <head> <style> .flex-container { display: -webkit-flex; display: flex; -webkit-flex-flow: row wrap; flex-flow: row wrap; text-align: center; font-family: tahoma; direction: rtl; } .flex-container > * { padding: 15px; -webkit-flex: 1 100%; flex: 1 100%; } .article { text-align: right; } header {background: black;color:white;} footer {background: #aaa;color:white;} .nav {background:#eee;} .nav ul { list-style-type: none; padding: 0; } .nav ul a { text-decoration: none; } @media all and (min-width: 768px) { .nav {text-align:right;-webkit-flex: 1 auto;flex:1 auto;-webkit-order:1;order:1;} .article {-webkit-flex:5 0px;flex:5 0px;-webkit-order:2;order:2;} footer {-webkit-order:3;order:3;} } </style> </head> <body> <div class="flex-container"> <header> <h1>گالری شهر</h1> </header> <nav class="nav"> <ul> <li><a href="#">لندن</a></li> <li><a href="#">پاریس</a></li> <li><a href="#">توکیو</a></li> </ul> </nav> <article class="article"> <h1>لندن</h1> <p>لندن پايتخت انگلستان و پرجمعيت ترين شهر اين كشور است. اين شهر داراي منطقه اي شهري با جمعيت بيش از 13 ميليون نفر است.</p> <p>بر روي رودخانه تيمز اين شهر ، دو ورودي به شكل برجهايي وجود دارد كه پلي از بين آنها دو طرف رودخانه را به هم وصل مي كند. پيشينه اين پل و شهر به زمان تاسيس آن توسط رومي ها باز ميگردد كه نام ان را لندنيوم گذاشته بودند.</p> <p><strong>این صفحه را تغییر اندازه دهید تا ببینید چه اتفاقی می افتد</strong></p> </article> <footer>©کپی رایت برای وب مهراز محفوظ است©</footer> </div> </body> </html>