Flexbox یک مدل طرح بندی محتوا است که در CSS3 معرفی شد و هدف آن چیدمان و تراز بندی آسان آیتم های درون یک container است که اندازه نامشخصی دارند. مدل Flexbox همان‌طور که از نامش هم پیداست برای طرح بندی آیتم هایی پویا و انعطاف پذیر به‌وجود آمده است.
چگونه از Flexbox استفاده کنیم؟
Flexbox مجموعه ای از دستورات (Property) یا به عبارتی یک ماژول به حساب می‌آید که با استفاده از آن می‌توان Layout هایی قابل انعطاف ایجاد کرد. مهم ترین ویژگی Flexbox که آن را به آینده Layout در CSS تبدیل کرده است، استفاده آسان و بدون پیچیدگی آن است. Flexbox مدل طرح بندی مدرنی است که با استفاده از آن می توان به آسانی طرح هایی واکنش‌گرا (responsive) ایجاد کرد.
در مرحله اول با استفاده از تکه کد زیر صفحه Html خود را بسازید:
Display: Flex :
برای استایل دهی به آیتم ها باید از Css کد زیر استفاده کنید و با استفاده از تکه کد Display:Flex ، Container خود را به Flex container تبدیل کنید:
نتیجه آن مانند شکل زیر می شود:
شکل زیر تفاوت بین نمایش block و نمایش flex را نشان می دهد.
Flex Direction :
Container Flexbox دارای دو محور است؛ یک محور اصلی (main axis) و یک محور تقارن (cross axis) که به طور پیش فرض به شکل زیر هستند:
با استفاده از Flex-direction می توان محور اصلی را چرخش داد. به طور پیش فرض، آیتم ها در امتداد محور اصلی، از چپ به راست مرتب شده اند. به همین دلیل است که آیتم ها به صورت افقی به شما نمایش داده می شوند.
با استفاده ازویژگیflex-direction با مقدار column-reverse یا row-reverse ، می توان نمایش آیتم های درون یک ستون یا سطر را معکوس کرد.
Justify Content
Justify-content چگونگی هم ردیف قرار گرفتن آیتم ها در محور اصلی را بررسی می کند.
justify-content دارای ۵ مقدار به شرح زیر است:
- Flex-start
- Flex-end
- Center
- Space-between
- Space-around
Align Items
همان‌طور که justify-content در طول محور اصلی کار می کند، align-items به محور تقارن و بر روی سطر اعمال می شود.
Align Items هم دارای ۵ مقدار به شرح زیر است:
- flex-start
- flex-end
- center
- stretch
- baseline
سه مورد اول مانند justify-content است با این تفاوت که در طول سطر اعمال می شود.
تفاوت flex-direction:row و flex-direction:column
با flex-direction:row ، آیتم ها در امتداد محور اصلی به صورت افقی قرار می گیرند و با flex-direction:column ، آیتم ها در امتداد محورعمودی به صورت عمودی قرار می گیرند. حتی اگر آیتم ها به صورت عمودی و افقی در هر دو حالت متمرکز باشند، این دو قابل تعویض نیستند!
ترازسازی یک عنصر با align-self
align-items همه آیتم های داخلی را با هم تراز می کند. Align-self به شما اجازه می دهد که به صورت دستی یک عنصر خاص را تراز کنید.
flex-basis
این ویژگی مقدار پایه عرض یا ارتفاع آیتم را تعیین می‌کند. یعنی عرض یا ارتفاع (به ستونی یا ردیفی بودن آیتم ها بستگی دارد) نمی تواند از این مقدار پایه کمتر شود. این ویژگی مانند min-height و min-width عمل می‌کند. مقدار پیش‌فرض این خاصیت auto است، یعنی آیتم های Flex می‌توانند تا جایی کوچک شوند که عرض یا ارتفاع آن‌ها به صفر برسد.
flex-grow
این ویژگی تعیین می‌کند که یک آیتم داخلی چند برابر آیتم های دیگر از فضای عنصر نگهدارنده سهم می برد. مثلا اگر مقدار همه آیتم ها ۱ باشد فضای Container به صورت برابر بین آیتم های داخلی تقسیم می شود اما اگر یکی از آن‌ها مقدار ۲ بگیرد سهم آن، دو برابر سهم دیگر آیتم های داخلی می شود.
flex-shrink
کاربرد این ویژگی زمانی است که جمع اندازه های آیتم های داخلی بیشتر از Container شود و سرریز داشته باشیم. حال باید آیتم های داخلی، کمی آب شوند (shrink) تا از سرریزی جلو گیری شود که این کم کردن اندازه آیتم های داخلی با توجه به این ویژگی انجام می گیرد.
اگر خاصیت flex-wrap را برای container برابر nowrap باشد، آیتم ها تا زمانی که عرضشان به ۰ برسد کوچک می‌شوند. حال اگر در این صورت مقدار flex-shrink یکی از آیتم ها را برابر ۲ قرار دهیم، آن آیتم ۲ برابر دیگر آیتم ها کوچک می‌شود.
در شکل زیر flex-shrink برای کلیه آیتم ها برابر با یک است و همه آیتم ها به تناسب پهنای آن ها کم می شوند.
اما در شکل زیر سومین آیتم flex-shrink آن برابر با صفر است و پهنای آن هیچ تغییری نمی کند.
Flex:
این خاصیت یک مختصر نویسی برای خاصیت های flex-grow ، flex-shrink و flex-basis است.
