فرق grid ,flex در طرح کدام بهتر است انتخاب کنم
flex یک بعدی ولی grid دو بعدی
فرض بگیرید یک صفحه کل وب width 100% قرار دادید و دو عکس دارید که width هر کدام ۵۰ است در flex دو تا راه حل دارید
یک سکشن div کلی که width درصد 100 است درست می کنید و یک div که 50 درصد است درست می کنید و div دوم هم ۵۰ درصد قرار می دهید
راه حل دوم از سینتکس flex در css استفاده می کنید
flex basis flex grow flex shrink
.div {flex:1 50٪ 0 }
در حالت flex basis شما می توانید مثل width عمل کنید در تیلویند ۱.۲،۲.۳ ۳.۴ ۵.۶ تا اونجایی که می دانم دارد
ولی در گرید این مسئله کاملا فرق دارد همه ضلع وب کلا ۱۲ قسمت است که اگر دو تصویر ۵۰ % است اینطوری است دو تا div grid cols 6 درست می کنید
فرض می گیرم دو تا الامنت بغل هم درست کنیم هم با grid flex چه طوری
با flex
یک دیو کلی درست می کنید جای justify یا align مشخص می کنید و آن ها بغل هم درست می کنید
در grid چه طوری
گرید درست که دیفالت زیر هم قرار می گیرید ولی وقتی،از flow که بغل هم و column که اون به ۱۲ قسمت تبدیل کنید استفاده می کنید و بغل هم قرار می دهید ولی در flex این column به row تبدیل می شود و در گرید برعکس هم است مثلا
grid grid rows از یک تا ۱۲ زیر هم
grid cols از یک تا ۱۲ بغل هم قرار می گیرند
بعد هم می توانید از align justify یا همه اینها با place درست کنید و در گرید راه حل بعدی وجود دارد
grid template columns
که برای همه px rem em استفاده می کنید که بغل هم چقدر باشد
grid template rows
که زیر هم چقدر باشد و حتی می توانید grid کوتاه بنویسد مثلا گرید دو قسمتی دارید
یک div کلی grid grid cols 2
div 1 justify start
div 2 span
این یعنی آخر قرار بگیرید
پس شما می توانید هم با flex و گرید طرح درست کنید این طور نیست که فقط یک راه حل داشته باشید وقتی تجریه تحلیل می کنید دو راه حل دارید که هر کدام کلی راه حل دارد که با توجه به طرح ها کلی راه حل نشان می دهد
من تو شرکت هاکوپیان یک همکار فرانت اند دولوپر داشتم اون بین همکاران یک رقابت درست کرد که شما هر طرحی با flex در همه رزولیشن مدیا کوئری درست کنید من همان با grid در همه رزولیشن مدیا کوئری،درست می کنم
position in css
قسمت دوم همین پست
در قسمت اول در مورد grid flex صحبت کردم در این قسمت position ,float صحبت می کنم
کلا position به ۵ قسمت تقسیم بندی می شوند
1) static 2) sticky 3) fixed 4) relative 5)absolute
1) static
عملا شما سایتی استایل ندهید position static در مروگر نشان می دهد حتی شما از آن استفاده نکنید
2) sticky
فرض بگیرید یک هدر و متن دارید و قصد دارید مروگر وب اسکرول می گیریم همه جا اون ببینم از position sticky استفاده می کنم
3) fixed
از fixed در دو جا استفاده می کنیم مثل sticky استفاده می شود یعنی اگر هدر و متن داشته باشید و قرار باشید هدر در همه جای صفحه نشان داده شود از fixed استفاده می کند بیشترین استفاده position fixed در مدال است
استفاده دوم من می خواهم یک چیز،پایین ترین حالت ممکن سمت راست یا چپ قرار دهم از fixed استفاده می کنم مثلا با این position navigation bar یا bottom navigation درست کنید
4) absolute,5)relative
این دوتا به هم خیلی مربوط هستند
فرض بگیرید ۵ تا رادیوباتن دارید که ازهم فاصله داشته باشند که از relative absolute چند حالت می دهید
right left bottom top
که در کلاس تیلیوند اینها inset خلاصه کرده است
و استفاده دوم این فرض بگیرید دو تصویر بغل هم قرار دهیم اولی relative دومی absolute قرار می دهیم فرض بگیریم متن در تصویر قرار بگیریم دو راه حل داریم absolute relative یا relative index است
https://lnkd.in/dqshjd8u
حالت float
فرض بگیریم می خواهیم دو تا متن داریم یکی سمت راست سمت چپ
<div class position relative >
<div class float left >
سلام سمت چپ حالت ممکن قرار بگیرید
</div>
div class float right >
سلام در سمت راست حالت ممکن قرار بگیرید
</div>
</div>
که این سینتکس شبیه به حالت flex justify content between می باشد
