ساخت منو با فلکس باکس

شغل:طراحی وب

درآمد:۱۳۰ هزار دلار سالانه

مکان:هر کشوری دوست داری

مسیر: ۷ دوره آموزشی

منتور ۲ :جلسه آنلاین با استاد

منتور ۱ : کافه گپ و گفت

بزن بریم

یکی از نکات مهم در آموزش flexbox در css ساخت منو با فلکس باکس می باشد. منو بخش مهمی از هر وب سایت است، زیرا به کاربران کمک می کند تا به راحتی در سایت حرکت کنند و به هر صفحه ای که مد نظرشان می باشد، بروند. در گذشته، ایجاد یک منو نیازمند تلاش و دانش زیادی از html و css بود. اما با معرفی Flexbox، طراحی یک منو بسیار آسان تر و کارآمد شده است. بنابراین در ادامه با ما همراه باشید تا به راحتی بتوانید ساخت منو با فلکس باکس را فرا گیرید.

flexbox (فلکس باکس) چیست؟

قبل از پرداختن به ساخت منو با فلکس باکس توضیح کوتاهی درباره خود فلکس باکس می دهیم. Flexbox یا Flexible Box Layout یک حالت چیدمان در CSS است که ایجاد ساختارهای طرح بندی و صفحه آرایی را با انعطاف بیشتر بدون استفاده از شناورها یا موقعیت یابی ایجاد می کند. در واقع فلکس باکس راهی برای تراز و توزیع فضا بین عناصر موجود در یک ظرف (container)، حتی زمانی که اندازه آنها ناشناخته یا پویا باشد، فراهم می کند. Flexbox اجازه می دهد تا آیتم ها در هر جهت (افقی یا عمودی) مرتب شوند و به طور خودکار اندازه عناصر را برای پر کردن فضای موجود تنظیم می کند.

۴ حالت قبل از پیدایش فلکس باکس

قبل از ساخت منو با فلکس باکس جالب است که بدانید قبل از flexbox چهار حالت وجود داشت:

1. block: برای بخش های موجود در یک صفحه وب
2. inline: برای متن
3. table: برای داده های جدول دو بعدی
4. positioned: برای حالت مشخص یک المان

flexbox layout module، طراحی ساختار حالت های انعطاف پذیر در css را بدون استفاده از float یا positioning آسان تر کرده است.

المان های flexbox

در ساخت منو با فلکس باکس باید بدانید که یک طرح flexbox از یک المان والد (parent element) با یک یا تعداد بیشتری المان فرزند (child element) تشکیل شده است. flexbox در تصویر زیر یک المان والد (container) را با رنگ آبی، همراه با سه آیتم نشان می دهد.

مثال شماره ۱ : یک المان والد همراه با سه آیتم

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

ساخت منو با فلکس باکس

قبل از شروع ایجاد و ساخت منو با فلکس باکس، بیایید نگاهی به ساختار اصلی یک ظرف Flexbox بیندازیم. یک ظرف Flexbox با استفاده از ویژگی display با مقدار flex ایجاد می شود. این یک عنصر HTML را به یک ظرف Flexbox تبدیل می کند و عناصر فرزند آن به موارد Flexbox تبدیل می شوند.

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

.container {
  display: flex;
}

کانتینر فلکس باکس

برای ساخت منو با فلکس باکس باید در ابتدا بدانید که کانتینر فلکس باکس دارای دو محور اصلی است:

1. محور اصلی
2. محور متقاطع

محور اصلی جهت اصلی Flexbox است و می تواند افقی یا عمودی باشد. محور متقاطع بر محور اصلی عمود است. به طور پیش فرض، محور اصلی افقی و محور متقاطع عمودی است. Flexbox همچنین دارای مفهومی از ویژگی flex-direction است که جهت محور اصلی را تعیین می کند. می توان آن را به دو ردیف (افقی) یا ستون (عمودی) تنظیم کرد.

.container {
  display: flex;
  flex-direction: row;
}

ساخت منوی افقی با فلکس باکس

اکنون که درک اساسی از Flexbox داریم، اجازه دهید شروع به ایجاد و ساخت منو با فلکس باکس به صورت افقی کنیم. اولین گام این است که یک عنصر Container ایجاد کنید و ویژگی نمایش آن را روی flex تنظیم کنید.

<div class="menu">
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Contact</a>
</div>

.menu {
  display: flex;
}

در مرحله بعد، ویژگی flex-direction را روی ردیف قرار می دهید تا آیتم های منو به صورت افقی مرتب شوند.

.menu {
  display: flex;
  flex-direction: row;
}

برای اطمینان از اینکه آیتم های منو فضای مساوی روی صفحه را اشغال می کنند، ویژگی justify-content را روی فاصله بین قرار می دهید. با این کار آیتم های منو به طور مساوی در امتداد محور اصلی توزیع می شوند.

.menu {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

در نهایت، برای وسط عمودی آیتم های منو، ویژگی align-item را در مرکز قرار می دهید.

.menu {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

حال ساخت منو با فلکس باکس به صورت افقی تمام شده است و شما یک منوی افقی به کمک flexbox دارید.

ساخت منوی عمودی با فلکس باکس

برای ایجاد و ساخت منو با فلکس باکسبه صورت عمودی، تنها کاری که باید انجام دهید این است که ویژگی flex-direction را به ستون تغییر دهید.

<div class="

المان والد (container)

حال که دریاره ساخت منو با فلکس باکس صحبت کردیم اطلاعات تکمیلی درباره المان های والد و دیگر موارد بیان می کنیم. هنگامی که مقدار display المان والد را برابر flex قرار دهید، flexible و در واقع انعطاف پذیر می شود.
مثال

.flex-container {
display: flex;
}

خصوصیات فلکس باکس برای المان والد

حال که ساخت منو با فلکس باکس را می دانید درباره خصوصیات فلکس باکس برای المان والد صحبت می کنیم. خصوصیات فلکس باکس برای والد شامل موارد زیر می باشد:

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content
• flex-direction
• مقادیر مجاز
• column
• column-reverse
• (row (default
• row-reverse

این خصوصیت مشخص می کند که آیتم های flexbox نسبت به والد در چه جهتی قرار بگیرند.

flex-direction

مثال شماره ۱

از مقدار column برای قرار دادن آیتم ها در یک ستون، از بالا به پایین استفاده کنید.

.flex-container {
display: flex;
flex-direction: column;
}

مثال شماره ۲

از مقدار column-reverse برای قرار دادن آیتم ها در یک ستون، از پایین به بالا استفاده کنید.

.flex-container {
display: flex;
flex-direction: column-reverse;
}

مثال شماره ۳

از مقدار row برای قرار دادن آیتم ها از چپ به راست استفاده کنید.

.flex-container {
display: flex;
flex-direction: row;
}

مثال شماره ۴

از مقدار row-reverse برای قرار دادن آیتم های flexbox از راست به چپ استفاده کنید.

.flex-container {
display: flex;
flex-direction: row-reverse;
}

flex-wrap

مقادیر مجاز برای flex-wrap موارد زیر می باشد:

• (nowrap (default
• wrap
• wrap-reverse

خصوصیت flex-wrap مشخص می کند که والد به چه صورت آیتم ها را در بر بگیرد.

مثال شماره ۱ :  ۱۲ آیتم دارد تا خصوصیت flex-wrap را بهتر نمایش دهد.

از مقدار wrap برای نمایش آیتم ها در چندین ردیف استفاده کنید:

.flex-container {
display: flex;
flex-wrap: wrap;
}

مثال شماره ۲

از مقدار nowrap برای نمایش آیتم ها در یک ردیف استفاده کنید:

.flex-container {
display: flex;
flex-wrap: nowrap;
}

مثال شماره ۳

از مقدار wrap-reverse برای نمایش آیتم ها در چند ردیف، از پایین به بالا استفاده کنید:

.flex-container {
display: flex;
flex-wrap: wrap-reverse;
}

flex-flow

(flex-direction flex-wrap) که مقدار پیش فرض آن row nowrap می باشد. خصوصیت flex-flow خصوصیت مختصر برای هر دو خصوصیت flex-direction و flex-wrap می باشد.

مثال شماره ۱

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

justify-content

مقادیر مجاز برای justify-content موارد زیر می باشد:

• center
• (flex-start (default
• flex-end
• space-around
• space-between

خصوصیت justify-content چیدمان آیتم ها را در یک ردیف را تنظیم می کند.

مثال شماره ۱

از مقدار center برای قرار دادن آیتم ها در وسط container استفاده کنید:

.flex-container {
display: flex;
justify-content: center;
}

مثال شماره ۲

از مقدار flex-start برای قرار دادن آیتم ها از ابتدای container استفاده کنید:

.flex-container {
display: flex;
justify-content: center;
}

مثال شماره ۳

از مقدار flex-end برای قرار دادن آیتم ها از انتهای contdiner استفاده کنید:

.flex-container {
display: flex;
justify-content: flex-end;
}

مثال شماره ۴

از مقدار space-around برای نمایش فاصله مساوی در اطراف آیتم ها استفاده کنید:

.flex-container {
display: flex;
justify-content: space-around;
}

مثال شماره ۵

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

.flex-container {
display: flex;
justify-content: space-between;
}

align-items

مقادیر مجاز برای این مورد موارد زیر می باشد:

• baseline
• center
• flex-start
• flex-end
• (stretch (default

خصوصیت align-items چیدمان آیتم ها در راستای عمودی را تنظیم می کند: در مثال زیر به container ارتفاع ۲۰۰px داده شده تا خصوصیت align-item بهتر نمایش داده شود:

مثال شماره ۱

از مقدار center برای وسط قرار دادن آیتم ها استفاده کنید:

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

مثال شماره ۲

از مقدار flex-start برای قرار دادن آیتم ها در ابتدای container استفاده کنید:

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

مثال شماره ۳

از مقدار flex-end برای قرار دادن آیتم ها در انتهای container استفاده کنید:

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

مثال شماره ۴

از مقدار stretch برای کشیدن آیتم ها از ابتدا تا انتهای container استفاده کنید:

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

مثال: شماره ۵

از مقدار base-line برای قرار دادن آیتم ها در راستای خط مبنا استفاده کنید:

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

align-content

مقادیر مجاز:

• center
• flex-start
• flex-end
• space-around
• space-between
• (stretch (default

خصوصیت align-content ردیف آیتم ها را تنظیم می کند:

در مثال زیر برای هر کدام از آیتم ها اندازه فونت متفاوتی داده شده است، تا مشخص شود که همگی بر اساس خط مبنای متن تنظیم شده اند. همچنین به container ارتفاع ۶۰۰px و خصوصیت flex-wrap:wrap داده شده است، تا خصوصیت align-content بهتر نمایش داده شود:

مثال شماره ۱

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

.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: space-between;
}

مثال شماره ۲

از خصوصیت space-around برای نمایش ردیف هایی با فواصل مساوی در اطراف آیتم ها استفاده کنید:

.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: space-around;
}

مثال شماره ۳

از خصوصیت stretch برای نمایش آیتم هایی که در کل ارتفاع ردیف کشیده شده اند، استفاده کنید:

.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: stretch;
}

مثال شماره ۴

از خصوصیت center برای نمایش ردیف ها در وسط container استفاده کنید:

.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: center;
}

مثال شماره ۵

خصوصیت flex-start برای نمایش ردیف هایی که از ابتدای container قرار گرفته اند، استفاده می شود:

.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: flex-start;
}

مثال شماره ۶

خصوصیت flex-end برای نمایش ردیف هایی که در انتهای container قرار گرفته اند، استفاده می شود:

.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: flex-end;
}

perfect centering

در مثال زیر ما مشکلی که افراد، بسیار با آن روبرو می شوند را برطرف می کنیم. مقدار هر دو خصوصیت justify-content و align-item را برابر center قرار دهید، در اینصورت آیتم دقیقا در مرکز container قرار می گیرد.

مثال شماره ۱

.flex-container {
display: flex;
height: 300px;
justify-content: center;
align-items: center;
}

(Child Elements (Item

فرزندان مستقیم در flexible container، به طور خودکار آیتم هایی با خصوصیت flexible هستند.

مثال شماره ۱

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

خصوصیات flexbox برای المان های فرزند

1. order
2. flex-grow
3. flex-shrink
4. flex-basis
5. flex
6. align-self

سخن پایانی

در این مقاله به طور کامل درباره ساخت منو با فلکس باکس (flexbox)، ساخت انواع منوها به همراه کدنویسی آن بیان کردیم. برای اینکه بتوانید روی این موضوع تسلط پیدا کنید می توانید با مثال های این مطلب تمرینات لازم را انجام دهید.

برای دریافت پاسخ سوالات خود و بهره مند شدن از تجربه اساتید خبره و دیگر دوستانتان در کمپین آموزشی بی لرن می توانید سوالات خود را در کافه گپ و گفت مطرح نمایید و در سریعترین زمان، پاسخ سوال خود را دریافت نمایید. همچنین می توانید با عضویت در کمپین آموزشی بی لرن، از دوره های آموزشی رایگان و کاربردی در زمینه های مختلف به صورت تخصصی و حرفه ای بهره مند شوید.

اگر از مطالعه این مطلب لذت بردید، می توانید آن را در شبکه های اجتماعی خود به اشتراک بگذارید تا دوستان شما نیز از آن بهره ببرند.

شغل:طراحی وب

درآمد:۱۳۰ هزار دلار سالانه

مکان:هر کشوری دوست داری

مسیر: ۷ دوره آموزشی

منتور ۲ :جلسه آنلاین با استاد

منتور ۱ : کافه گپ و گفت

بزن بریم