logo
logo
تبلیغ کلیکی تاپ سایت 98

آموزش CSS Flexbox

آموزش CSS Flexbox
هدایت عباسی آموزش CSS

آموزش  کامل CSS Flexbox بصورت پروژه محور همراه با چندین مثال و یک قالب ریسپانسیو. کدهای زیر را در یک فایل با پسوند html ذخیره کرده و اجرا نمایید تا نتیجه را ببینید.

با استفاده از CSS Flexbox می توانیم قالب های ریسپانسیو بدون دستورات float or positioning طراحی کنیم.

ویژگی display

در این بخش از آموزش css از تاپ سایت 98 به ویژگی display از نوع flex می پردازیم.

برای شروع کار یک div با کلاس flex container معرفی می کنیم و چندین div دیگر با مقادیر 1 و 2 و 3 مشخص می کنیم.

در بخش style برای کلاس flex-container دستور display با مقدار flex استفاده می کنیم.

برای div های زیر آن نیز استایل می نویسیم تا باکس های کوچکی ایجاد شود.

کد زیر را در فایل html ذخیره کرده و اجرا کنید تا نتیجه را ببینید.

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
background-color: cornflowerblue;
}
.flex-container div {
background-color: lightgray;
margin: 10px;
padding: 20px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>sh711.com</h1>
<p>topsite98.com</p>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>

ویژگی flex-direction

ویژگی flex-direction مشخص می کند که عناصر به چه شکل قرار بگیرند.

مقدار column عناصر را زیر هم قرار می دهد.

مقدار row عناصر را کنار هم قرار می دهد.

مقدار column-reverse عناصر را زیر هم قرار می دهد و معکوس.

مقدار row-reverse عناصر را کنار هم قرار می دهد و معکوس یعنی از راست به چپ می کند.

کد زیر را در با کد بالا جایگزین کرده و ذخیره و سپس اجرا نمایید.

.flex-container {
display: flex;
flex-direction: column;
background-color: cornflowerblue;
}

ویژگی flex-wrap

با ویژگی flex-wrap می توان باکس را ریسپانسیو یا واکنشگرا کرد.

در حالت عادی اگر اندازه باکس ها زیاد باشد حالت ریسپانسیو از بین می رود و اسکرول افقی بوجود می آید.

مقدار nowrap حالت پیش فرض است و ریسپانسیو نیست.

مقدار wrap باکس ها را ریسپانسیو می کند.

مقدار wrap-reverse باکس ریسپانسیو می شود و معکوس.

برا فهم بهتر کد زیر را در یک فایل html ذخیره نمایید و اجرا کنید. سپس سایز افقی صفحه وب را کم و زیاد کنید اگر ویژگی flex-wrap مقدار wrap بگیرد متوجه می شوید که باکس ریسپانسیو یا واکنشگرا شده است و اسکرول افقی نمی خورد.

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
background-color: cornflowerblue;
}
.flex-container div {
background-color: lightgray;
margin: 10px;
padding: 20px;
width: 100px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>sh711.com</h1>
<p>topsite98.com</p>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
</div>
</body>
</html>

ویژگی flex-flow

ویژگی flex-flow مختصرکننده ویژگی های flex-wrap و  flex-direction است.

در مثال زیر بجای استفاده از این دو دستور کافی است از ویژگی flex-flow استفاده شود.

.flex-container {
display: flex;
flex-flow: row wrap;
background-color: cornflowerblue;
}

ویژگی justify-content

با ویژگی justify-content می توانید محتوای باکس اصلی را در بخش های مختلف و با حالات مختلف نمایش دهید.

مقدار flex-end باکس های داخل باکس اصلی را از آخر قرار می دهد.

مقدار space-around فاصله ای بین باکس های داخلی قرار می دهد.

مقدار space-between فاصله ای بین باکس های داخلی قرار می دهد ولی باکس اول و آخر فاصله ای از راست و چپ نخواهد داشت.

مقدار center  باکس ها را وسط چین می کند.

مقدار right  باکس ها را راست چین می کند.

مقدار left  باکس ها را چپ چین می کند.

.flex-container {
display: flex;
flex-flow: row wrap;
justify-content: center;
background-color: cornflowerblue;
}

ویژگی align-item

ویژگی align-item در جهت عمودی (vertical) عناصر را مرتب می کند.

مثلا اگر می خواهید عناصر در وسط صفحه در حالت عمودی قرار بگیرند مقدار center را استفاده کنید.

.flex-container {
display: flex;
height: 200px;
align-items: center;
}

ویژگی align-content

ویژگی align-content برای تراز کردن خطوط flex استفاده می شود.

مقدار space-between فضای بین مقدار خطوط flex را با فاصله مساوی بین آنها نشان می دهد و فاصله ای بین باکس ها ایجاد می کند. با تغییر سایز مرورگر می توانید نتیجه را ببینید تعداد باکس ها را 12 عدد کنید تا بهتر متوجه ویژگی شوید.

مقدار space-around مقدار فضای اطراف خطوط flex را با فضای قبل، بین و بعد از آنها نشان می دهد.

مقدار stretch حالت پیش فرض است.

مقدار center عناصر را در وسط باکس اصلی قرار می دهد.

مقدار flex-start باکس ها از ابتدای باکس اصلی مرتب می کند و نمایش می دهد.

مقدار flex-end باکس ها در انتهای باکس اصلی نمایش می دهد.

.flex-container {
display: flex;
flex-flow: row wrap;
align-content: flex-end;
background-color: cornflowerblue;
height: 500px;
}

ویژگی order

ویژگی order باکس ها را بر اساس order منظم می کند و نمایش می دهد.

در مثال زیر باکس شماره یک ابتدا نمایش داده می شود.

<div class="flex-container">
<div style="order: 3">1</div>
<div style="order: 2">2</div>
<div style="order: 4">3</div>
<div style="order: 1">4</div>
</div>

ویژگی flex-grow

ویژگی flex-grow اندازه باکس را مشخص می کند.

باکس سوم 8 برابر بقیه است.

<div class="flex-container">
<div style="flex-grow: 1">1</div>
<div style="flex-grow: 1">2</div>
<div style="flex-grow: 8">3</div>
</div>

ویژگی flex-shrink

ویژگی flex-shrink مشخص می کند که مقدار انعطاف پذیری نسبت به بقیه اقلام انعطاف پذیر کاهش می یابد.

شماره 3 انطلاف پذیری ندارد.

<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex-shrink: 0">3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div>

ویژگی flex-basis

ویژگی flex-basis طول اولیه یک محصول فلکس (flax) را مشخص می کند.

<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex-basis:200px">3</div>
<div>4</div>
</div>

ویژگی flex

ویژگی flex مختصر ویژگی های flex-grow, flex-shrink, flex-basis می باشد یعنی بجای اینکه این سه دستور را جداگانه استفاده کنیم می توانیم همه را در یک خط با ویژگی flex بنویسیم.

<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex: 0 0 200px">3</div>
<div>4</div>
</div>

ویژگی align-self

خصوصیات align-self تراز برای آیتم انتخاب شده داخل FLEX را مشخص می کند.

<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="align-self: center">3</div>
<div>4</div>
</div>

طراحی قالب ریسپانسیو با Flexbox

در زیر طراحی قالب ریسپانسیو با Flexbox را مشاهده می فرمایید.

یک مینی پروژه طراحی قالب واکنشگرا با Flexbox میباشد.

کد html,css زیر را می توانید در یک فایل html قرار داده و ذخیره نمایید و اجرا کنید.

<!DOCTYPE html>
<html>
<head>
<style>
.wrapper {
display: flex;
flex-flow: row wrap;
font-weight: bold;
text-align: center;
}
.wrapper > * {
padding: 10px;
flex: 1 100%;
}
.header {
background: tomato;
}
.footer {
background: lightgreen;
}
.main {
text-align: left;
background: deepskyblue;
}
.aside-1 {
background: gold;
}
.aside-2 {
background: hotpink;
}
@media all and (min-width: 600px) {
.aside { flex: 1 0 0; }
}
@media all and (min-width: 800px) {
.main { flex: 3 0px; }
.aside-1 { order: 1; }
.main { order: 2; }
.aside-2 { order: 3; }
.footer { order: 4; }
}
body {
padding: 2em;
}

</style>
</head>
<body>
<div class="wrapper">
<header class="header">Header</header>
<article class="main">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</article>
<aside class="aside aside-1">Aside 1</aside>
<aside class="aside aside-2">Aside 2</aside>
<footer class="footer">Footer</footer>
</div>
</body>
</html>

امیدواریم این آموزش برای شما مفید باشد.

موفق باشید.

عزیزانی که تمایل دارند به تیم نویسندگی تاپ سایت 98 بپیوندند می توانند از طریق واتساپ با ما در ارتباط باشند. ما بهترین افراد را به تیم خود اضافه خواهیم کرد.

اگر سوال یا نظری دارید در بخش کامنت ها بنویسید.اگر موضوع خاصی مد نظر شماست که در سایت موجود نیست در بخش کامنت ها بنویسید

دوره ارز دیجیتال تاپ سایت 98
دوره های آموزشی دوره های آموزشی

نظرات کاربران

از دیدگاه مرتبط با موضوع استفاده نمایید.

از تبلیغ سایت یا شبکه اجتماعی خودداری فرمایید.

برای پاسخ گویی بهتر در سایت ثبت نام نمایید و سپس سوال خود را مطرح فرمایید.