چینش المنت های وبسایت با فلکس باکس (flex-box)

اگر تا به حال راجع به طراحی وبسایت و چینش المنت های آن تحقیق کرده باشید حتما به مبحث شیرین و کاربردی flex-box برخورد کرده اید اما واقعا این flex-box چیست ؟ من قراره در ادامه با یک توضیح ساده شمارو با این مبحث آشنا کنم .

مفهوم flex-box به زبان ساده

شما در روزمرگی خودتان زیاد پیش آمده که میخواستید چند کتاب را مرتب در یک ردیف قرار دهید یا چند جعبه را مرتب روی هم قرار دهید ، درسته؟ در lay out بندی صفحات وبسایت یا به عبارتی همان چینش المنت ها ما از ابزارهای css که flex-box و grid نام دارند استفاده میکنیم که به طور خلاصه از flex-box برای چینش المنت ها به صورت تک بعدی یعنی یک ستون column یا یک سطر row استفاده میکنیم یعنی یک ستون را به چند سطر و یا یک سطر رو به چند ستون تبدیل میکنیم و قسمت grid هم میتواند چند سطر و چند ستون از المنت ها را کنار هم مرتب بچیند ؛ حالا با مفهوم ساده flex-box اشنا شدیم.

تعریف تخصصی flex-box و نحوه استفاده از آن

در واقع flex-box یک نوع display در css است که ما به container هامون میدیم که چینش المنت های اون رو مرتب کنیم که به شکل زیر ما در کد های css استفاده میکنیم :

.container {
display : flex ;
}

و الان چینش المنت های container مورد نظر حالت flex-box را متوجه شدند ولی شاید چیزی که شما میخواهید نشده باشد درسته چون flex-box یک سری ویژگی ها داره که باعث میشه چینش المنت های ما مرتب تر و دقیق تر بر اساس نیاز ما باشه پس بریم سراغ ادامه و من ویژگی های کاربردی flex-box رو براتون توضیح بدم .

ویژگی های flex-box

• flex-direction

یادتونه گفتم که ما میتونیم المنت هامونو به صورت ستونی یا column و سطری یا row بچینیم اما چطوری ؟ با استفاده از flex-direction یا جهت دهی به آن اما چطوری ما این کارو انجام بدیم ؟

.container {
flex-direction : row / column / row-reverse / column-reverse ;
}

یکی از مقادیر را با توجه به نیازمان به آن میدهیم ؛ در مقادیر بالا 2 عدد مقدار داریم که کلمه reverse به خودشون گرفتن که به معناب بالعکس هستش یعنی چی یعنی مقادیر را نسبت به سطر یا ستون قرینه میکند.

• flex-wrap

این ویژگی به عبارتی به این معناست که اگر فضای مورد نیاز المنت ها از یک سطر یا ستون بیشتر شد آیا اجازه دارند به سطر یا ستون بعدی بروند یا باید در همان سطر یا ستون بمانند که به شکل زیر میتوان از آن استفاده کرد (مقدار دیفالت یا اولیه این ویژگی nowrap هستش) :

.container {
flex-wrap : wrap / nowrap / wrap-reverse ;
}

• justify-content

نحوه چینش و فاصله بین آن ها در سطر یا ستون به این ویژگی بستگی دارد یعنی با توجه به عکس بالا هر یک ازین مقادیر را بدهیم المنت ها به شکل مشخص شده فاصله را بین المنت ها تقسیم میکند و به شکل زیر نوشته میشود :

.container {
justify-content : flex-start ;
}

• align-items

این ویژگی در واقع چینش المنت ها نسبت به یک خط صاف است یعنی اگر ما یک خط در وسط سطر یا ستون رسم کنیم المنت های ما نسبت خط وسط چگونه قرار بگیرند و به شکل زیر استفاده میشود :

.container {
align-items : stretch ;
}

یک ویژگی دیگه هست که اسمش align-content ولی من عکسشو قرار میدم و دوست دارم شما دیدگاهتونو نسبت بهش بگید و کامنت کنید که نظرتون نسبت به عکس کاراییش چی هست و به چه دردی میخوره :

کلام آخر

کاربرد flex-box در css و طراحی وبسایت و layout بندی صفحات یا همون چینش المنت ها بسیار زیاده و ویژگی های بیشتری هم داره اما به طور خلاصه و پر کاربرد ترین ویژگی هاشو باهم مرور کردیم ولی اگر دوست دارید بیشتر راجبش بدونید حتما تحقیق کنید و چیز های باحال تری هم راجع بهش پیدا میکنید . امید وارم مقاله رو دوست داشته بودید ، موفق باشید .