نکته: ساده ترین راه برای قرار دادن آیتم ها در مرکز صفحه بصورت عمودی و افقی

بخش: توسعه وب 47 بار مشاهده شده پنجشنبه ۶ مهر ۹۶ 0 نظر ارسال شده
نکته: ساده ترین راه برای قرار دادن آیتم ها در مرکز صفحه بصورت عمودی و افقی

Flexbox در دنیای CSS نسبتا جدید است و ما همچنان در حال پیدا کردن برنامه های کاربردی عالی و کاربردی تر برای آن هستیم. حتی می توانیم مشکل قدیمی با مرکز المان به صورت Vertically (عمودی) و  Horizontally (افقی) با CSS حل کنیم. این کار خیلی ساده است و تنها سه خط کد دارد، نیازی به مشخص کردن اندازه المان center ندارد و رسپانسیو است! 

این تکنیک در تمام مرورگرهای مدرن IE10 +، Chrome، Firefox و Safari (با prefix -webkit) کار می کند. در اینجا جدول سازگاری کامل را ببینید.

HTML

 البته این ایده، در اطراف flexbox متمرکز است. در ابتدا، یک container ایجاد می کنیم که در آن می خواهیم همه چیز را در مرکز قرار دهیم:

<div class="container">
    <!--// Any content in here will be centered.-->
    <img src="fireworks.jpg" alt="fireworks">
</div>

شما می توانید این div را در هر جایی که می خواهید قرار دهید. در مثال بالا ما آن را عرض و ارتفاع تمام صفحه گرفته ایم. 

CSS

مانطور که قبلا گفتیم، تنها سه خط کد را استفاده می شود که آن ها به شرح زیر هستند: 

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

هر flex container دارای دو محور برای المان های موقعیت است. محور اصلی با خاصیت flex-direction اعلام می شود (می تواند row یا column باشد). با حذف این قاعده، flex direction را به مقدار row پیش فرض خود اضافه می کنیم. 

حال تنها کاری که باید انجام دهیم وسط قرار دادن هر دو محور است. از این ساده تر نمی شود:

  • نوع display را flex  کنید تا حالت flexbox فعال شود.
  • justify-content تعریف می کند که flex itemها در کجا مطابق با محور اصلی (در اینجا به صورت horizontally) مطابقت داشته باشند.
  • align-items همان کار را با محور عمود به محور اصلی انجام می دهد (در اینجا به صورت vertically). 

اکنون که قوانینی برای تراز قائم عمودی و افقی را به مرکز تنظیم کرده ایم، هر المانی که در داخل containerاضافه می کنیم کاملا در وسط قرار می گیرد. لازم نیست قبل از آن ابعاد آن را بدانیم، مرورگر تمام کارهای سخت را انجام خواهد داد! 

نتیجه 

بسیاری از تکنیک های دیگر برای محور کردن محتوا با CSS وجود دارد، اما flexbox باعث ساده تر و ظریف تر شدن آن می شود. اگر می خواهید اطلاعات بیشتری در مورد آن کسب کنید، می توانید از مقالات ما در مورد flexbox دیدن نمایید.  

راهنمای کامل Flexbox

دوره آموزشی Flexbox

گروه تحقیقات سافت اسکیل
گروه تحقیقات سافت اسکیل

گروه تحقیقات سافت اسکیل به منظور افزایش سطح دانش جامعه، سعی در ترجمه، تالیف و تولید محتوای با کیفیت در زمینه های مختلف نرم افزاری دارد

شما چه نظر و یا سوالی درباره این نوشته دارید؟

پرســیدن سؤال جدید

سؤال های تخصصی خود را از ما بپرسید

دنبال کردن تلگرام کانال سافت اسکیل

https://telegram.me/softskill_ir

عملیات کاربران

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

کلیک کنید و سوالات خود را از ما بپرسید
لطفا فرم سوال را پر کنید

سوال شما با موفقیت ثبت شد. برای اینکه بتوانیم به شما اطلاع رسانی کنیم، موارد زیر را وارد کنید:

لطفا چند لحظه منتظر بمانید ...