فصل flexBox خلاصه قسمت 1
سلام دوستان خلاصه مطالبی که استاد توی این جلسه گفتن رو قرار دادم اگه مطلب اضافه تری رو دارین که بنده جا انداختم
لطفا اضافه کنید
برای حل مشکل 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 : یعنی تراز کردن نسبت به خودم
