در قالب دوره آموزش flexbox ما سعی کرده‌ای به شکل کامل و پروژه محور روش استفاده از flexbox را قدم به قدم برای طراحی وبسایت به شما آموزش دهیم. دوره آموزش کامل Flexbox دوره‌ای با امتیاز نهایی 5 می‌باشد و توسط دوره بین که موتور جستجوی بهترین دوره های آموزشی می‌باشد، تحلیل، بررسی و امتیازدهی شده است. مدت زمان این دوره 1 ساعت و 44 دقیقه می‌باشد که در راکت توسط حسام موسوی مدرس این دوره ارائه شده است. قابل توجه است که این دوره مدرک ندارد و دوره مذکور رایگان می‌باشد. همچنین می‌توانید با کلیک بر روی دکمه شروع یادگیری به آموزشگاه ارائه‌دهنده متصل شوید و دوره آموزش کامل Flexbox را تهیه نمایید. علاوه بر این، شما عزیزان می‌توانید همه دوره‌های طراحی وبسایت سراسر اینترنت را در صفحه طراحی وبسایت در دوره‌بین مشاهده، مقایسه و بهترین دوره از نظر کیفیت و قیمت را به آسانی انتخاب نمایید.
نمایش بیشتر
تجربه فراگیران
عبدالعزیز توحیدی
سلام وقتتون بخیر؟
این دکمه‌ها باید سمت راست باشه. از بالا به پایین اما همه المنت بهم ریخته هرکاری میکنم جواب نمیده. چجوری موقعیت پاراگراف، h1، دکمه ها و تصویر رو به دلخواه تعیین کنم؟
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> مدرسه کوهستان</title>
<link rel="stylesheet" href="content://com.android.externalstorage.documents/tree/primary%3ANew/document/primary%3ANew%2FHead.css">
<div class="container">
<div>
<h1 class="Title">مدرسه کوهستان</h1>
<p class="Explain">هرگز نمیرد هرانکه زنده شد به نام عشق</p>
</div>
<div>
<img class="image" src="content://com.android.externalstorage.documents/tree/primary%3ANew/document/primary%3ANew%2FTeacher%20student.gif" alt="استاد و دانشجو">
</div>
<!-- <div class="button">
<ul>
<li>نمایه</li>
<li>گفتگو</li>
<li>آمار</li>
</ul>
</div> -->
</div>
.container{
display: flex;
padding:10px;
background-color: #52767bd7;
justify-content: space-between;
flex-direction: row-reverse;
align-items: center;
}
.image{
display: flex;
width:390px;
hight:390px;
}
.title{
font-color: #ffdfd5;
font-size: 20px;
text-align:right;
padding: 400, 400, 400, 400;
margin: 400 px;
}
.explain{
font-color: #ffeaea;
font-size: 12px;
text-align: right;
}
.button{
display:flex;
flex-direction: row-reverse;
button-align:right;
justify-content: space-between;
padding: 15px 50px;
justify-content: right;
direction: rtl;
}
حسام موسوی
درود بر شما
این دوره رو تا اخر دیدین که نتونستید این موضوع رو پیاده کنید و این سوال رو مطرح کردید ؟
امیرحسین ازغندی
سلام استاد موسوی وقت بخیر
من میخوام با فلکس باکس کاری کنم که ساید بارم که الان پایین سکشن قرار گرفته، بیاد به سمت چپ و بالا کنار سکشن تو اون بخش خالی قرار بگیره ... میشه راهنمایی کنید چطور این کارو انجام بدم؟ (بخش خاکستری ساید هست )
html {
font-size: 100%;
}
.header {
background-image: url(./preview.jpg);
background-size: cover;
background-position: 70% 60%;
height: 13rem;
border-radius: 0.7rem;
filter: drop-shadow(1.2px 1.5px 1.5px silver);
margin-top: 0.2rem;
}
@media (max-width:768px) {
.body {
width: 100%;
}
}
@font-face {
font-family: "Yekan";
src: url(./Fonts/Yekan.eot);
src: url(./Fonts/Yekan.ttf);
src: url(./Fonts/Yekan.woff);
}
.body {
background-image: url(./chevron.webp);
}
.h2-footer {
text-align: center;
background-color: rgb(82, 81, 81);
color: white;
}
.h2-aside {
text-align: center;
background-color: rgb(82, 81, 81);
color: white;
}
.h2-section {
text-align: center;
background-color: rgb(82, 81, 81);
color: white;
}
.flex-container {
display: flex;
flex-wrap: wrap ;
justify-content: center;
align-content: center;
}
.aside {
width: 25%;
}
.footer {
display: flex;
}
.paragraph {
font-family: Yekan;
font-weight: bold;
color: white;
padding: 0.7rem;
text-align: center;
}
.flex-item {
background-color: rgb(31, 167, 31);
margin: 1rem;
border-radius: 0.4rem;
width: 20rem;
display: flex;
flex-wrap: wrap;
height: 15rem;
}
.section {
background-color: navy;
margin:1rem ;
width: 74%;
}
<!DOCTYPE html>
<html dir="rtl" lang="fa">
<head>
<link rel="stylesheet" href="./Style Site.css">
<link rel="stylesheet" href="./reset.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width" initial-scale="1.0" user-scalable="yes" maximum-scale="2.0" minimum-scale="0.5">
<title>نت کده [مرجع نت های فارسی]</title>
</head>
<body class="body">
<header class="header">
<h6>.</h6>
</header>
<section class="section">
<div class="flex-container">
<div class="flex-item">
<p class="paragraph">این یک متن آزمایشی برای تست سایت می باشداین یک متن آزمایشی برای تست سایت می باشداین یک متن آزمایشی برای تست سایت می باشد</p>
</div>
<div
class="flex-item"><p class="paragraph">این یک متن آزمایشی برای تست سایت می باشداین یک متن آزمایشی برای تست سایت می باشداین یک متن آزمایشی برای تست سایت می باشد</p>
</div>
<div class="flex-item">
<p class="paragraph">این یک متن آزمایشی برای تست سایت می باشداین یک متن آزمایشی برای تست سایت می باشداین یک متن آزمایشی برای تست سایت می باشد</p>
</div>
<div class="flex-item">
<p class="paragraph">این یک متن آزمایشی برای تست سایت می باشد این یک متن آزمایشی برای تست سایت می باشداین یک متن آزمایشی برای تست سایت می باشد</p>
</div>
<div class="flex-item">
<p class="paragraph">این یک متن آزمایشی برای تست سایت می باشداین یک متن آزمایشی برای تست سایت می باشداین یک متن آزمایشی برای تست سایت می باشد</p>
</div>
<div class="flex-item">
<p class="paragraph">این یک متن آزمایشی برای تست سایت می باشداین یک متن آزمایشی برای تست سایت می باشداین یک متن آزمایشی برای تست سایت می باشد</p>
</div>
</div>
</section>
<aside class="aside">
<div class="flex-container">
<div class="flex-item">
<p class="h2-aside">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Necessitatibus explicabo voluptatem ullam alias accusamus error expedita tempora, numquam ad doloremque similique qui modi quod consequatur assumenda natus! Tempore, vero doloribus!</p>
</div>
</div>
</aside>
<footer class="footer">
<h2 class="h2-footer">footer</h2>
</footer>
</body>
</html>
حسام موسوی
سلام وقت بخیر باید section و aside رو بیاری داخل یک المنت div و بعد به این المنت div یک flex بدی و بعد تعداد عرض هر کدوم رو مشخص کنی
امیرحسین ازغندی
ممنون استاد از پاسخگویی تون ... بخش اول کاری که گفتید رو انجام دادم یعنی ساید رو آورم داخل یک دیو ، لطف میکنید بگین منظورتون از اینکه " تعداد عرض هر کدوم رو مشخص کنی" چیه؟ دقیقا با چه دستور و کدی اینکار رو بکنم؟ و کدوم المنت رو باهاش این کارو بکنم (اون دیو container اصلی یا ساید داخلش؟)
5/5
تجربه فراگیران
عبدالعزیز توحیدی
سلام وقتتون بخیر؟ این دکمه‌ها باید سمت راست باشه. از بالا به پایین اما همه المنت بهم ریخته هرکاری میکنم جواب نمیده. چجوری موقعیت پاراگراف، h1، دکمه ها و تصویر رو به دلخواه تعیین کنم؟ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> مدرسه کوهستان</title> <link rel="stylesheet" href="content://com.android.externalstorage.documents/tree/primary%3ANew/document/primary%3ANew%2FHead.css"> <div class="container"> <div> <h1 class="Title">مدرسه کوهستان</h1> <p class="Explain">هرگز نمیرد هرانکه زنده شد به نام عشق</p> </div> <div> <img class="image" src="content://com.android.externalstorage.documents/tree/primary%3ANew/document/primary%3ANew%2FTeacher%20student.gif" alt="استاد و دانشجو"> </div> <!-- <div class="button"> <ul> <li>نمایه</li> <li>گفتگو</li> <li>آمار</li> </ul> </div> --> </div> .container{ display: flex; padding:10px; background-color: #52767bd7; justify-content: space-between; flex-direction: row-reverse; align-items: center; } .image{ display: flex; width:390px; hight:390px; } .title{ font-color: #ffdfd5; font-size: 20px; text-align:right; padding: 400, 400, 400, 400; margin: 400 px; } .explain{ font-color: #ffeaea; font-size: 12px; text-align: right; } .button{ display:flex; flex-direction: row-reverse; button-align:right; justify-content: space-between; padding: 15px 50px; justify-content: right; direction: rtl; }
حسام موسوی
درود بر شما این دوره رو تا اخر دیدین که نتونستید این موضوع رو پیاده کنید و این سوال رو مطرح کردید ؟
امیرحسین ازغندی
سلام استاد موسوی وقت بخیر من میخوام با فلکس باکس کاری کنم که ساید بارم که الان پایین سکشن قرار گرفته، بیاد به سمت چپ و بالا کنار سکشن تو اون بخش خالی قرار بگیره ... میشه راهنمایی کنید چطور این کارو انجام بدم؟ (بخش خاکستری ساید هست ) html { font-size: 100%; } .header { background-image: url(./preview.jpg); background-size: cover; background-position: 70% 60%; height: 13rem; border-radius: 0.7rem; filter: drop-shadow(1.2px 1.5px 1.5px silver); margin-top: 0.2rem; } @media (max-width:768px) { .body { width: 100%; } } @font-face { font-family: "Yekan"; src: url(./Fonts/Yekan.eot); src: url(./Fonts/Yekan.ttf); src: url(./Fonts/Yekan.woff); } .body { background-image: url(./chevron.webp); } .h2-footer { text-align: center; background-color: rgb(82, 81, 81); color: white; } .h2-aside { text-align: center; background-color: rgb(82, 81, 81); color: white; } .h2-section { text-align: center; background-color: rgb(82, 81, 81); color: white; } .flex-container { display: flex; flex-wrap: wrap ; justify-content: center; align-content: center; } .aside { width: 25%; } .footer { display: flex; } .paragraph { font-family: Yekan; font-weight: bold; color: white; padding: 0.7rem; text-align: center; } .flex-item { background-color: rgb(31, 167, 31); margin: 1rem; border-radius: 0.4rem; width: 20rem; display: flex; flex-wrap: wrap; height: 15rem; } .section { background-color: navy; margin:1rem ; width: 74%; } <!DOCTYPE html> <html dir="rtl" lang="fa"> <head> <link rel="stylesheet" href="./Style Site.css"> <link rel="stylesheet" href="./reset.css"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width" initial-scale="1.0" user-scalable="yes" maximum-scale="2.0" minimum-scale="0.5"> <title>نت کده [مرجع نت های فارسی]</title> </head> <body class="body"> <header class="header"> <h6>.</h6> </header> <section class="section"> <div class="flex-container"> <div class="flex-item"> <p class="paragraph">این یک متن آزمایشی برای تست سایت می باشداین یک متن آزمایشی برای تست سایت می باشداین یک متن آزمایشی برای تست سایت می باشد</p> </div> <div class="flex-item"><p class="paragraph">این یک متن آزمایشی برای تست سایت می باشداین یک متن آزمایشی برای تست سایت می باشداین یک متن آزمایشی برای تست سایت می باشد</p> </div> <div class="flex-item"> <p class="paragraph">این یک متن آزمایشی برای تست سایت می باشداین یک متن آزمایشی برای تست سایت می باشداین یک متن آزمایشی برای تست سایت می باشد</p> </div> <div class="flex-item"> <p class="paragraph">این یک متن آزمایشی برای تست سایت می باشد این یک متن آزمایشی برای تست سایت می باشداین یک متن آزمایشی برای تست سایت می باشد</p> </div> <div class="flex-item"> <p class="paragraph">این یک متن آزمایشی برای تست سایت می باشداین یک متن آزمایشی برای تست سایت می باشداین یک متن آزمایشی برای تست سایت می باشد</p> </div> <div class="flex-item"> <p class="paragraph">این یک متن آزمایشی برای تست سایت می باشداین یک متن آزمایشی برای تست سایت می باشداین یک متن آزمایشی برای تست سایت می باشد</p> </div> </div> </section> <aside class="aside"> <div class="flex-container"> <div class="flex-item"> <p class="h2-aside">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Necessitatibus explicabo voluptatem ullam alias accusamus error expedita tempora, numquam ad doloremque similique qui modi quod consequatur assumenda natus! Tempore, vero doloribus!</p> </div> </div> </aside> <footer class="footer"> <h2 class="h2-footer">footer</h2> </footer> </body> </html>
حسام موسوی
سلام وقت بخیر باید section و aside رو بیاری داخل یک المنت div و بعد به این المنت div یک flex بدی و بعد تعداد عرض هر کدوم رو مشخص کنی
امیرحسین ازغندی
ممنون استاد از پاسخگویی تون ... بخش اول کاری که گفتید رو انجام دادم یعنی ساید رو آورم داخل یک دیو ، لطف میکنید بگین منظورتون از اینکه " تعداد عرض هر کدوم رو مشخص کنی" چیه؟ دقیقا با چه دستور و کدی اینکار رو بکنم؟ و کدوم المنت رو باهاش این کارو بکنم (اون دیو container اصلی یا ساید داخلش؟)