نحوه استفاده از flex-box در ترازبندی افقی

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

تعریف flex-box

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

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

ادامه مطالب در ویدیو زیر ...