ایجاد شده در ۰۷ شهریور ۱۳۹۹
سلام دوستان خلاصه مطالبی که استاد توی این جلسه گفتن رو قرار دادم اگه مطلب اضافه‌تری رو دارین که بنده جا انداختم
لطفا اضافه کنید
برای حل مشکل postioning که مجبور بودیم از floatها و postionها استفاده بکنیم
flexBox برای تراز المان‌ها در ردیف‌های یک عنصر یا container میاد و انجام میدهد که برای تراز المان در طول‌ها هم grid اومدن
( منظور از تراز المان‌ها در عرض یعنی عنصر والد ما در محدوده‌های عرض قابل تغیر هستش و عناصر فرزند اون میتونند هم در عرض و هم در طول عنصر والدشون تغیر بکنند )
مفاهیم مهم
contianer : عنصر والد عنصری که چندین فرزند داره درون خودش
item : فرزند‌های عنصر والدمون هستند
پراپرتی‌های که contianer میاد و میگیرد
در ابتدا مقدار display : flex که مشخص بکنیم که از این چینش میخایم بیایم و استفاده بکنیم
1- flex-direction : جهت فرزندانی که درون عنصر والد هستند به چه صورت باشد از سمت چپ به راست یا راست به چپ یا بالا به پایین و یا پایین به بالا باشد row row-reverce cloumn cloumn-reverce
2- flex-wrap : زمانی که فرزندان به انتهای عنصر والدشون رسیدند چکار بکنند اگر مثلا 5 تاشون عرض رو پر کرد بقیه چکار بکنند مشابه عنصر clear both , dispay : table
3- justify-content : برای جابه جایی فرزندان در راستای عرض در عنصر والدمون که مقادیر
flex-start flex-end center space-between space-around space-evenly
4- align-item : برای جابه جایی فرزندان در راستای ارتفاع در عنصر والدمون که مقادیر
flex-start flex-end center baseline stretch
5- align-content : اگر خواستیم فرزندانمون هم در راستای عرض و هم در راستای طول عنصر والدمون جابه جا بشوند از این پراپرتی استفاده میکنیم
flex-start flex-end center stretch space-between space-around
6- order : یک پراپرتی برای ایتم‌ها هست که میگوید در یک ردیف چه تعداد از عناصر بیاین و قرار بگیرند
7- flex-grow : پرورش یافتن به مقدار عددی که براشون قرار داده می‌شود بزرگ و کوچک بشوند تا بتونن سطر پر بکنند که مقدار پیش فرض آن 0 هستش
8- flex-shrink : تقسیم بندی هستش که بیا و عرض عناصر را با مقادیر عددی که میگیری بیا و تقسیم کن که مقدار پیش فرض اون برابر 0 هستش
9- align-self : یعنی تراز کردن نسبت به خودم