انعطاف پذیری عناصر در css3

با عرض سلام و احترام خدمت شما

امروز تصمیم گرفتم نحوه ی انعطاف پذیری عناصر در css3 رو توسط خاصیت dispaly:flex که تو css3 اضافه شده رو توضیح بدم .

مطمئنم این آموزش کاربرد زیادی براتون خواهد داشت ، من خودم یه مدت دنبال یه کدی می گشتم که بتونه ارتفاع دو تا باکس رو برابر کنه تا تو طراحی قالب ازش استفاده کنم ، که این خاصیت رو پیدا کردم .

البته این یکی از کاربردهاش بود .

خوب همین اول کار یه تگ div با کلاس container و چهار تا تگ div دیگه در داخلش به عنوان عناصر داخلی ، ایجاد کنید و استایل زیر رو براش تعریف کنید :
کد html :

<div class="container">
    <div class="item1"></div>
    <div class="item2"></div>
    <div class="item3"></div>
    <div class="item4"></div>
</div>

کد css :

.container{ display:flex }

خروجی :

کاربرد display:flex

مقدار flex که به خاصیت display دادیم باعث میشه عناصر داخل container انعطاف پذیر بشن و همه عناصر داخلی دارای ارتفاع یکسان بشن و کنار هم قرار بگیرن ، البته این که کنار هم تو یه ردیف قرار می گیرن به خاطر خاصیت flex-direction هست که توضیحش در پایین داده شده.

خاصیت بعدی که باید به container بدید flex-direction هست . این خاصیت ، جهت انعطاف پذیری عناصر داخلی رو تعیین می کنه و چهار مقدار زیر رو میگیره :

Row : مقدار پیشفرض – باعث میشه تمامی عناصر داخلی فقط تو یه ردیف قرار بگیرن و به پایین سرازیر نشن

Row-reverse : مثل قبلی کار می کنه با این تفاوت که ترتیب نمایش عناصر داخلی رو معکوس می کنه یعنی اگه اولین عنصر سمت چپ container بوده حالا میاد سمت راست . البته باز هم بستگی به مقادیر ltr یا rtl داره که میتونید به خاصیت direction بدید .

Column : عرض عناصر داخلی کلاس container رو برابر همدیگه قرار میده و باعث میشه همه تو یه ستون قرار بگیرن .

کاربرد flex-direction:column در css

Column-reverse : مثل column عمل می کنه و ترتیب نمایش رو عکس می کنه ، با کمک direction هم می تونید ترتیبش رو عوض کنید .

خاصیت flex-direction:column-reverse در css

خاصیت سوم flex-wrap هست . کاربردش رو از روی مقادیری که میگره براتون توضیح میدم راستی اگه مقدار flex-direction رو برابر column یا column-reverse گذاشتید این خاصیت به کار نمیاد و کاربردی نخواهد داشت :

No-wrap : مقدار پیشفرض – اگه متن یکی از عناصر داخل container زیاد بشه ، عرض اون عنصر رو تا جایی که عناصر دیگه اجازه بدن زیاد می کنه و اگه بازم متن زیاد بود شکست سطری ایجاد می کنه .

Wrap : اگه متن داخل عنصر داخلی زیاد شد خود عنصر شکست سطری می خوره ، یعنی به پایین عنصر قبلی خود میاد و کل عرض container رو به خود اختصاص میده و بقیه متن را داخل خود شکست سطری میده

Wrap-inverse : همان کار wrap رو انجام میده با این تفاوت که ترتیب نمایش عناصر رو عوض میکنه .

حالا اگه متن ما انقدر زیاد نباشه که نیاز به این خاصیت داشته باشه ، flex-wrap خودش رو کنار میکشه و دیگه کار نمی کنه ، خوب معلومه اگه به کارگری نیاز نباشه اخراجش می کنید دیگه 😀

آخرین خاصیتی که تو این آموزش براتون توضیح میدم خاصیت order هست که مخصوص عناصر داخلی هست و واسه مقدارش فقط می تونید عدد صحیح وارد کنید .

به طور پیشفرض ترتیب نمایش عناصر به همان صورتی هست که در کدنویسی تعریف کردید حالا اگه خواسته باشیم ترتیب رو به هم بریزیم یا عوض کنیم این خاصیت به ما کمک می کنه . اولویت نمایش با کمترین مقادیر برای order هست . به مثال زیر و خروجی اون توجه کنید :
کد html :

<div class="container">
    <div class="item1"></div>
    <div class="item2"></div>
    <div class="item3"></div>
    <div class="item4"></div>
</div>

کد css :

.container{display:flex;}
.item1 {order:0;}
.item2 {order:-4}
.item3 {order:-3}
.item4 {order:2}

خروجی :

خاصیت order در css3

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

فرادرس

برچسب ها : ، ، ، ، ، ، ،