جلسه یازدهم: flex box
دستیابی به یک layout که دارای دو ستون با ارتفاع برابر می تواند توسط Flexbox ها هم نشان داده می شود. قابل ذکر است که در Flexbox نیازی نیست که از یک div دیگری برای wrapper استفاده کنید. به صورت پیش فرض استفاده از Flexbox برای شما المنت هایی با ارتفاع یکسان ایجاد می کد. هم چنین نیازی نیست در موردnegative margin ها نگران نباشید.
توجه! همواره بهتر است به جای table از Flexboxاستفاده کنید.البته اگر شما از IE9 یا قدیمی تر استفاده نمیکنید !
در قسمت قبلی به کد خود wrapper را اضافه کردید.اکنون آن ها را از کد خود حذف کنید و استایل خود را مطابق کد زیر تغییر دهید .اگر در مورد flex ها اطلاعات چندانی ندارید این کد می تواند مقدمه خوبی باشد.
.container {
display: flex;
}
.main {
width: 70%;
background-color: #fff;
border-radius: .5em;
}
.sidebar {
width: 30%;
padding: 1.5em;
margin-left: 1.5em;
background-color: #fff;
border-radius: .5em;
}با اضافه کردن کد display:flex به flex container تبدیل می کنید.فرزندان آن هم به صورت پیش فرض به اندازه های یکسان در خواهند آمد.شما می توانید عرض ها و حاشیه ها را تنظیم کنید. حتی اگر مقدار آن ها بیش تر از 100 درصد باشد، باز هم flex آن ها را مرتب خواهد کرد.
Flexbox گزینه های زیادی را برای شما فراهم خواهد کرد که در ادامه به آن ها خواهیم پرداخت.همه آنچه که شما نیاز دارید تا اولین طرح مبتنی بر flex خود را بسازید در این مثال به شما نشان داده می شود.
هشدار ! هرگز ارتفاع یک عنصر را به صورت وابسته به عناصر دیگر تعیین نکنید. اینکار برای شما مشکلات زیادی را در اینده برای شما ایجاد خواهد کرد.پس به دنبال یک روش جایگزین باشید.
Min-height and Max-height
دو ویژگی که می توانند همواره برای شما بسیار مفید باشند ، عبارت است از Min-height و Max-height به جای اینکه ارتفاع را به صورت صریح تعیین کنید ، شما می توانید از این ویژگی ها حداقل یا حداکثر را مقدار آن را تععین کنید. اجازه دهید اندازه المنت به صورت طبیعی تعیین شود اما برای آن محدودیت تعیین کنید.
فرض کنید که می خواهید تصویری را در پشت یک پاراگراف بزرگتر از متن قرار دهید و نگران Overflow هستید. به جای اینکه ارتفاع را به صورت صریح تعیین کنید ، شما میتوانید به کمک min-height کمترین مقدار ارتفاع را تعیین کیند. این بدین معنی است که ارتفاع از آن چه که شما تعیین کرده اید کمتر نخواهد شد و اگر محیط متناسب نباشد مرورگر به آن اجازه خواهد داد که به صورت طبیعی رشد کند تا از سرریز شدن آن جلوگیری کند. به همین شکل max-height هم به المنت اجازه میدهد که به صورت طبیعی رشد کند تا به نقطه مورد نظر برسد. اگر به نقطه موردنظر و از آن بیشتر شد سرریز خواهد شد. به طور مشابه در ویژگی های Min-height و Max-height محدوده ی ارتفاع یک عنصر را تعیین می کنند.
یکی دیگر از مشکلات موجود در css مسئله Vertical centering میباشد. از نظر تاریخی راه های متعددی وجود دارد که به مرکزیت عمودی دست پیدا کرد که هر کدام در شرایط خاص کار می کند.هنگام استفاده از css پاسخ مسئله ها معمولا “بستگی دارد” می باشد ، پس در اینجا هم پاسخ همین است.
نکته ! معمولا هنگامی که توسعه دهندگان از vertical-align استفاده می کنند توسط مرورگر نادیده گرفته می شود. این ویژگی معمولا در مواردی که عناصر inline هستند یا داخل جدول هستند کار می کند. در عناصر inline چیدمان در مورد عناصر موجود در یک سطر بررسی می شود . برای مثال شما می توانید این مورد را برای کنترل اینکه یک عکس را چه گونه در کنار متن قرار می گیرد امتحان کنید.
header {
padding-top: 4em;
padding-bottom: 4em;
color: #fff;
background-color: #0072b0;
border-radius: .5em;
}توجه ! این راه حل زمانی کار می کند که محتوا داخل container به صورت inline باشند.
با این حال گاهی اوقات ممکن است که شما بخواهید به یک container ارتفاع مشخص تعیین کنید. این یکی از مشکلاتی است که در هنگام استفاده از دو ستون با ارتفاع یکسان رخ میدهد و رایج است.مخصوصا اگر شما از تکنیک های قدیمی استفاده کنید. خوشبختانه css tableها و flexbox ها این مسئله را به راحتی حل می کنند.
با مطالعه مواردی که در ادامه ذکر خواهد شد شما قطعا خواهید توانست در مقابل مشکلات و حالت های مختلفی که پیش می آید تصمیم درست را بگیرید.
انتخاب اینکه از چه روشی برای مرکزیت عمودی استفاده می کنیم به فاکتورهای مختلفی بستگی دارد.برای این تصمیم گیری می توانید از روش ها و پرسش هایی که در پایین گفته خواهد شد استفاده کنید.
*آیا می توانید از اندازه طبیعی container استفاده کنید؟ به آن از بالا و پایین padding یکسان بدهید. در این حالت در وسط خواهد بود.
*آیا شما باید اندازه container خود را صریح اعلام کنید ؟ و یا اینکه از استفاده از padding باید خودداری کنید؟ از کدهای زیر برای container استفاده کنید:
Display: table-cell;
Vertical-align: middle;*آیا می توانید از flexbox استفاده کنید؟ اگر شما نیازی به پشتیبانی IE9 ندارید شما می توانید به کمک flexbox مرکزیت را بدست آورید.
*آیا محتوای inline شما فقط یک نوشته دارد؟یک ارتفاع بلند برابر با ارتفاع container مورد نظر خود تعیین کنید. در این حالت container مجبور می شود تا رشد کند .اگر عناصر inline نباشد ممکن است مجبور شوید مقدار inline-block را به آن ها اختصاص دهید.
*آیا شما ارتفاع container و محتویات آن را دقیق میدانید؟ موقعیت آن ها را absolute تعیین کنید.
در مقاله بعدی در مورد Negative margin ها صحبت خواهیم کرد.
دیدگاهتان را بنویسید