اهمیت آموزش flexbox در css نسخه 3 بر کسی پوشیده نیست. در مقالهی آشنایی با FlexBox به همراه مثال کاربردی، با FlexBox آشنا شدیم. FlexBox، ابزاری است که با تکبعدی دیدن المانها، کمک میکند تا آیتمهای یک صفحهی وب را به آسانی، با سرعت بالا و به صورت واکنشگرا طراحی کنیم. مرورگرهای مختلفی FlexBox را پشتیبانی کرده و این موجب شده تا توسعهدهندگان زیادی علاقهمند به استفاده از این ابزار مفید و کاربری باشند. همچنین در مورد مزایای استفاده از FlexBox صحبت کردیم و در آخر با دو مثال، کدنویسی آن را شروع کردیم. حال در این مقاله قصد داریم تخصصیتر به آموزش FlexBox بپردازیم.
Flex Container
همانطور که در طراحی صفحه با CSS Grid، المانها در یک Grid مادر با نام Container قرار میگیرند، در FlexBox نیز یک المان نگهدارنده با عنوان flex-container داریم:
در FlexBox، مجموعهای از ویژگیها بهگونهای تعریف شدهاند که تنها به نگهدارنده نسبت داده میشوند. این خواص عبارتند از:
display
flex Direction
flex wrap
flex flow
justify content
align content
align items
در ادامهی مقالهی آموزش FlexBox هر کدام از این ویژگیها را توضیح میدهیم.
Display
در این قسمت آموزش FlexBox به توضیح ویژگی Display در فلکس باکس میپردازیم.
همانطور که در شکل زیر میبینید، بهصورت پیش فرض همه divها display: block هستند و به همین دلیل هر div، کل عرض صفحه را گرفته و موجب میشود که divهای بعدی به پایین رفته و در کنار یکدیگر قرار نگیرند:
برای شروع کار با Flexbox، باید نگهدارندهی مورد نظر خود را بهصورت Flexbox درآوریم. برای تعریف یک نگهدارنده از نوع FlexBox باید مقدار display را معلوم کنیم که از نوع flex یا inline-flex باشد:
.flex-container {
display: flex | inline-flex;
}
در این حالت المانها دیگر تمامی عرض صفحه را اشغال نکرده و در کنار یکدیگر بهصورت inline قرار میگیرند. شاید این تغییر ساده بهنظر برسد اما در حقیقت ما در پشت صحنه چیزی قدرتمند را فعال کردهایم.
Flex Direction
در این قسمت آموزش FlexBox به توضیح ویژگی Flex Direction در فلکس باکس میپردازیم.
نگهدارنده یا Container در FlexBox دارای دو محور است:
main axis : محور اصلی
cross axis : محور متقاطع
این محورها بهصورت پیشفرض در اولین تصویر این مقاله و در بخش نگهدارنده مشخص شدهاند.
در شکل بخش قبل، دیدیم که هنگامی که display را برابر با flex قرار میدهیم، همه divها افقی و از سمت چپ به راست کنار همدیگر قرار گرفتند. این نحوهی قرارگیری به این علت است که بهصورت پیشفرض آیتمها در طول محور اصلی یا Main axis از سمت چپ به راست قرار میگیرند و تزاربندی میشوند.
با استفاده از ویژگی Flex-direction میتوان محور main axis و حالت پیشفرض را تغییر داد. در حالت پیشفرض، مقدار این ویژگی row هست اما با تغییر مقدار این ویژگی به column داریم:
همانطور که در شکل مشخص شده، هنگامی که این ویژگی را به column تغییر میدهیم، divها عمودی و از بالا به پایین قرار میگیرند. نکتهای که در اینجا باید به آن توجه داشت این است که با قرار دادن مقدار column برای این ویژگی، المانها در جهت cross axis قرار نمیگیرند؛ این مقدار، باعث شده تا جای محورهای main و cross عوض شده و به همین دلیل است که المانها عمودی میشوند. مقادیر دیگری نیز برای ویژگی flex-direction وجود دارد؛ از جمله:
row-reverse : باعث شده تا المانها از راست به چپ قرار بگیرند.
column-reverse : باعث شده تا المانها از پایین به بالا قرار بگیرند.
در تصویر زیر تفاوت بین column و column-reverse قابل مشاهده است:
Flex wrap
در این قسمت آموزش FlexBox به توضیح ویژگی Flex wrap در فلکس باکس میپردازیم. همانطور که در بخشهای قبل دیدیم، بهصورت پیشفرض تمامی المانها در یک خط قرار میگیرند. با استفاده از خاصیت flex-wrap میتوان تعیین کرد که هرکدام از المانها در چند خط قرار بگیرند که به هر یک از این خطها flex line میگویند.
nowrap: (پیشفرض) آیتمها در یک خط و در کنار هم قرار میگیرند.
wrap: آیتمها در چند خط قرار میگیرند. در صفحات rtl از راست به چپ و در صفحات ltr از چپ به راست قرار میگیرند.
در این قسمت آموزش FlexBox به توضیح ویژگی Flex flow در فلکس باکس میپردازیم. میتوان دو مقدار flex-direction و flex-wrap را با استفاده از این مقدار تنظیم کرد. مقدار پیشفرض آن row nowrap است.
در این قسمت آموزش FlexBox به توضیح ویژگی Justify content در فلکس باکس میپردازیم. با استفاده از این ویژگی میتوان نحوهی ترازبندی المانها بر روی محور اصلی یا Main axis را کنترل کرد. در اینجا تفاوتهای میان Main و Cross axis واضحتر است. این ویژگی 5 مقدار اصلی را قبول میکند:
Flex-start : مقدار پیشفرض هست و باعث شده تا المانها در ابتدای محور اصلی قرار بگیرند. اگر مقدار flex-direction برابر با row باشد، پس از قرار دادن مقدار flex-start برای ویژگی justify-content، تمامی divها در سمت چپ ترازبندی میشوند.
Flex-end : تمامی المانها در سمت راست ترازبندی میشوند.
Center : المانها در وسط قرار میگیرند.
Space-between : میان تمامی المانها فضای یکسان قرار داده میشود. توجه داشته باشید که در ابتدا و انتها، فضایی قرار نمیگیرد.
Space-around : تقاوت این مورد با مورد قبل در این هست که به ابتدا و انتها هم فضا اضافه خواهد شد.
در این قسمت آموزش FlexBox به توضیح ویژگی Align content در فلکس باکس میپردازیم.
این خاصیت هنگامی که flex container دارای فضای بیشتر از flex line هاست، میتواند نحوهی چینش آنها را تعیین کند. مقادیر خاصیت align-content برابر مقادیر خاصیت justify-content میباشد و تنها یک مقدار بیشتر از justify-align دارد. این مقادیر عبارتند از:
flex-start: با این مقدار flex lineها در ابتدای flex container جمع میشوند.
flex-end: با این مقدار flex lineها در انتهای flex container جمع میشوند.
center: با این مقدار flex lineها در وسط flex container جمع میشوند.
space-between: فضای خالی به طور مساوی بین flex lineها توزیع میشود. خط اولی در ابتدا و خط آخری در انتهای flex container قرار میگیرد.
space-around: فضای خالی به طور مساوی بین flex lineها تقسیم میشود.
stretch: (پیشفرض) flex lineها کشیده میشوند و فضای خالی را پر میکنند.
در این قسمت آموزش FlexBox به توضیح ویژگی Align items در فلکس باکس میپردازیم. اگر ویژگی justify-content را به خوبی متوجه شده باشید، با این ویژگی هم مشکلی نخواهید داشت. این خاصیت بسیار شبیه به justify-content است. justify-content، المانها را بر اساس محور اصلی یا Main axis و ویژگی align-items، المانها را بر اساس Cross axis ترازبندی میکند. مقادیری که align-items عبارتند از:
flex-start: آیتمها در نقطه شروع عرضی(cross start) قرار میگیرند.
flex-end: آیتمها در نقطه اتمام عرضی (cross end) قرار میگیرند.
center: آیتمها در وسط flex line قرار میگیرند.
baseline: آیتمها با توجه به خطهایشان همتراز میشوند.
stretch: (پیشفرض) در صورتی که ارتفاع(height) آیتمها مشخص نشده باشد، آیتمها کشیده میشوند و flex line را پر میکنند.
در این کد با استفاده از ویژگیها و خصوصیات Flexbox کاری کردیم که محتویات درون body بهصورت وسط چین قرار داده شوند. برای اینکار در ابتدا display را برابر با flex و ترازبندیها را هم برابر با center یا مرکز قرار داده و Vendor Prefixها را برای پشتیبانی بیشتر گذاشتیم.
نکته مربوط به مقدار Stretch
اگر بخواهیم مقدار Stretch عمل کرده و المان مورد نظر تمامی فضای Cross axis را اشغال کند، دو راه داریم:
از ویژگی height برای المانهای مورد نظر استفاده نکنیم.
در صورت استفاده از height، مقدارش را برابر با auto قرار بدهیم. توجه داشته باشید که اگر ویژگی height را برای المان مورد نظر تعریف کنیم، مقدار stretch را بازنویسی (override) خواهد کرد و در این صورت المان تمامی فضا را اشغال نمیکند.
نکته مربوط به مقدار baseline
زمانی که مقدار ویژگی را برابر با baseline قرار میدهیم، المانها طوری تنظیم میشوند که پایین پاراگراف درون div ها، در یک خط قرار گرفته و تراز شود. اگر درون divها پاراگرافی وجود نداشته باشد، divها نسبت به موقعیت پایین خودشان تراز خواهند شد. مانند شکل زیر:
Flex Item
در این قسمت آموزش FlexBox به توضیح ویژگی Flex Item در فلکس باکس میپردازیم.
به المانهایی که درون نگهدارنده و بهعنوان فرزند قرار میگیرند Flex Item گفته میشود. برای Flex شدن فرزندان کافی است مانند کد زیر در تگ HTML آنها را درون یک div نگهدارنده قرار دهیم و نیازی به تعریف کلاس خاصی در استایل نیست:
البته توجه داشته باشید که آیتمها هم مانند نگهدارنده، دارای ویژگیهای مخصوص به خود هستند که در بخشهای بعدی مقالهی آموزش FlexBox آنها را مرور خواهیم کرد.
خواص فرزندان (Flex Items)
همانطور که گفتیم در FlexBox، مجموعهای از ویژگیها بهگونهای تعریف شدهاند که تنها به فرزندان نسبت داده میشوند. این خواص عبارتند از:
order
flex grow
flex shrink
flex basis
flex
align self
در ادامه هر کدام از این ویژگیها را توضیح میدهیم.
Order
در این قسمت آموزش FlexBox به توضیح ویژگی Order در فلکس باکس میپردازیم. این مقدار میتواند مکان قرارگیری آیتم در کنار دیگر آیتمها را مشخص کند. مقدار پیشفرض 0 است. اگر تنها مقدار order یکی از آیتمها تعیین شود، آن آیتم بعد از تمامی آیتمها قرار میگیرد؛ ولی اگر این خاصیت برای همهی آیتمها تعریف شود، میتوان جایگاه قرارگیری آیتمها را مشخص کرد. این خاصیت یکی از کاربردیترین خاصیتها هنگام طراحی واکنشگرا (responsive) هست. برای مقداردهی order میتوان برای هر آیتم در استایل کلاس جداگانه تعریف کرد یا به صورت مستقیم در HTML آن را همانند زیر مشخص نمود:
در این قسمت آموزش FlexBox به توضیح ویژگی Flex grow در فلکس باکس میپردازیم. این خاصیت توانایی بزرگ شدن یک آیتم را تعیین میکند. flex-grow یک مقدار عددی بدون واحد میپذیرد. مقدار پیشفرض آن 0 است؛ یعنی آیتمها توانایی بزرگ شدن را ندارند. در صورتی که flex container یا نگهدارنده فضای خالی داشته باشد و به یک آیتم flex-grow: 1 بدهید، آن آیتم تا جایی بزرگ میشود که فضای خالی درون نگهدارنده از بین برود.
دقت داشته باشید که هنگامی که خاصیت flex-direction نگهدارنده برابر با row باشد، flex-grow بر عرض (width) آیتم اعمال شده و اگر مقدار آن خاصیت برابر column باشد، flex-grow بر ارتفاع (height) اعمال میشود.
اگر به همه ی فلکس آیتمها flex-grow: 1; بدهید، همهی آنها به یک اندازه بزرگ میشوند. اگر در همین حالت مقدار flex-grow یکی از آیتم هارا 2 قرار دهید، آن آیتم 2 برابر دیگر آیتم خواهد شد.
Flex shrink
در این قسمت آموزش FlexBox به توضیح ویژگی Flex shrink در فلکس باکس میپردازیم. این خاصیت توانایی کوچک شدن یک آیتم را در صورت لزوم تعیین میکند. مقدار پیشفرض آن 1 است، یعنی آیتمها میتوانند کوچک شوند. اگر خاصیت flex-wrap نگهدارنده برابر nowrap باشد، آیتمها تا زمانی که عرضشان به 0 برسد کوچک میشوند:
حال اگر در این صورت مقدار flex-shrink یکی از آیتمها را برابر 2 قرار دهیم، آن آیتم 2 برابر دیگر آیتمها کوچک میشود.
در این قسمت آموزش FlexBox به توضیح ویژگی Flex basis در فلکس باکس میپردازیم. این خاصیت مقدار پایهی عرض یا ارتفاع آیتم را تعیین میکند. یعنی عرض یا ارتفاع (به ستونی یا ردیفی بودن آیتمها بستگی دارد) از این مقدار پایه نمیتواند کمتر شود. این خاصیت مانند min-height و min-width عمل میکند. مقدار پیشفرض این خاصیت auto میباشد، یعنی فلکس آیتمها میتوانند تا جایی کوچک شوند که عرض یا ارتفاع آنها به صفر برسد.
در این قسمت آموزش FlexBox به توضیح ویژگی Flex در فلکس باکس میپردازیم. این خاصیت در واقع یک امکان برای مختصر نویسی برای خاصیتهای flex-grow ، flex-shrink و flex-basis میباشد. در کد زیر مقادیر flex به ترتیب در کامنت مشخص شده است. مقادیر دوم و سوم (flex-shrink و flex-basis) اختیاری هستند.
در این قسمت آموزش FlexBox به توضیح ویژگی Align self در فلکس باکس میپردازیم. بهعنوان آخرین خاصیت باقیمانده از مبحث FlexBox، ویژگی align-self را معرفی میکنیم. این ویژگی موقعیت و ترازبندی یک المان را بهصورت جداگانه مشخص کرده و ویژگی align-items را برای المان مورد نظر، بازنویسی میکند. مقادیر مورد استفاده برای این ویژگی مشابه با ویژگی align-items است. مقدار پیش فرض auto میباشد که در این حالت موقعیت از ویژگی align-items تبعیت میکند. برای نمونه با اعمال این کد، فقط مربع اول در وسط قرار گرفته و بقیهی موارد در ابتدا قرار میگیرند:
حال فرض کنید که 4 مربع دارید و برای 2 مورد از ویژگی align-self استفاده کرده و برای سایر موارد ویژگیهای align-items: center و flex-direction: row را تنظیم میکنیم. با این کار دو المان سمت راست ثابت در مرکز قرار میگیرند و دو مورد سمت چپ با استفاده از ویژگی align-self تغییر موقعیت میدهند. در نتیجه خروجی بهصورت زیر خواهد شد:
صفحهی واکنشگرا با FlexBox
بعد از آموزش FlexBox ، در این بخش میخواهیم یک صفحه ی واکنشگرا ساده با فلکس باکس طراحی کنیم.
اگر با CSS کار کرده باشید، حتما جاهای زیادی به این مشکل برخوردید که بخواهید تا تعدادی المان را در کنار هم قرار داده و با استفاده از margin فاصلهی بین آنها را تنظیم کنید. این مورد اغلب در کنار هم قراردادن اعضای یک منو رخ میدهد. مشکل به این صورت است که برای اضافه کردن فاصلهی بین آیتمها، یک ویژگی همانند margin-right را تنظیم کرده ولی یک فاصلهی اضافه در سمت راست آخرین المان منو ایجاد شده و مورد مشکل ساز همین فاصلهی اضافه است. برای مثال کد زیر را در نظر بگیرید:
میبینید که یک منو با 4 li قرار دادیم و درون style هم عرض هر کدام را 23 درصد تنظیم کرده و با استفاده از margin-right فاصلهی بین آنها را مشخص کردیم. خروجی کنونی شکل بالایی بهصورت زیر خواهد بود:
همانطور که در شکل مشخص است، بهدلیل مشکل فاصلهی اضافهی بیان شده در بالا، آیتم آخر پایین آمده است. روش متداول برای حل این مشکل این است که فاصلهی اضافه برای المان آخر را حذف کنیم تا به شکل پایین در تصویر دست یابیم:
میبینید که یک کلاس کاذب last-child گذاشته و مقدار margin-right را برای آن 0 قرار دادیم. در نتیجه فاصلهی اضافه از بین رفته و همهی آیتمها درون منو قرار گرفتند. همچنین یک راه سادهتر برای حذف کلاسهای کاذب مثل nth- و first- و last-child وجود دارد و آن استفاده از FlexBox هست. میتوان با قرار دادن مقدار space-between برای ویژگی justify-content، به راحتی بین المانها فاصله قرار داده و بهصورت زیر عمل کرد:
در این کد برای کلاس list استایل display برابر با flex قرار دادیم و برای کلاس person هم ویژگی flex-basis را برابر با 23% گذاشتیم.
معرفی چند منبع خوب تکمیلی:
کدهای سازندهی این بخش تعاملی بهدلیل حجم زیاد بارگذاری شدهاند و میتوانید از اینجا آنها را دانلود کنید.
در پایان چند منبع آنلاین برای تکمیل آموزش فلکس باکس معرفی میکنیم:
ابزار: یک ابزار آنلاین با استفاده از آن میتوان قالب و چارچوب مورد نظر خود را بر اساس flexbox به وجود آورد و کدهای CSS را در خروجی تحویل گرفت.
فریم ورک بولما: یک فریم ورک قوی و بروز برای CSS بر پایهی FlexBox برای ساخت طرحهای واکنشگرا و گریدبندی پیشرفته.
سایت: یک سایت برای طراحی و ساخت طرحهای واکنشگرا و ساختارهای پیچیده.
سایت اول و سایت دوم: دو سایت انگلیسی با آموزش کامل و تصویری مطالب بیان شده.
سایت بازیگونه: یک سایت بسیار جذاب برای آموزش موارد گفته شده همراه با بازی.
جمع بندی:
در این مقاله به آموزش FlexBox پرداختیم و سپس یک صفحهی واکنشگرا طراحی کردیم. مشکلات معمول در CSS را با کمک FlexBox رفع کرده و در نهایت چند منبع آنلاین تکمیلی را معرفی کردیم. اگر تجربه یا سوالی در رابطه با این مقالهی آموزشی و کار با FlexBox دارید با ما و کاربران سون لرن به اشتراک بگذارید.
اگر به یادگیری بیشتر در زمینهی فرانتاند علاقه دارید، شرکت در دورهی آموزش طراحی وب را پیشنهاد میکنیم، با شرکت در این دوره در کمتر از یکسال به یک طراح وب همه فن حریف تبدیل میشوید که آمادهی استخدام، دریافت پروژه و کسب درآمد هستید.
واقعا سایت سون لرن در حوزه برنامه نویسی جز بهترین سایت هایی اموزشی تو کل نت هستش که صورت ساده و اسان اموزش میده - تشکر از سایت خیلی خوبتون
نازنین کریمی مقدم۲۲ شهریور ۱۴۰۲، ۰۹:۴۸
ممنون که با ما همراه هستید.
۰۷ شهریور ۱۴۰۲، ۱۱:۵۵
سلام دفعه اول عکسها به صورت انیمیشن جابه جا میشد
بعد که دوباره وارد سایت شدم
ثابت موند چرا
نازنین کریمی مقدم۰۸ شهریور ۱۴۰۲، ۰۵:۲۷
درود
هنوز هم همینطور هست. احتمالا مرورگرتون کش میکنه و اینترنت تون کمی ضعیف هست. برای اطمینان میتونید تصاویر رو دانلود کنید.
۰۷ تیر ۱۴۰۲، ۱۷:۰۹
سلام ، ببخشید من وقتی از flex-grow روی چند عنصر استفاده میکنم و در اون متن مینویسم، عرض اون عنصر به اندازه متنی که مینویسم بزرگتر میشه و همه چیز به هم میریزه و flex-grow عمل نمیکنه!
نازنین کریمی مقدم۰۹ تیر ۱۴۰۲، ۲۱:۱۹
درود
بله اگر متن رو در یک ناحیه که با flex-grow مقداردهی شده استفاده کنید، میبینید که مجدد سایز تغییر میکنه و این بخاطر نوع طراحی سیستم flex هست.
در اینجور موارد برای سایزدهی پهنا پیشنهاد میکنم از درصد استفاده کنید که دقیقتر هست.
۱۵ آذر ۱۴۰۰، ۰۸:۱۴
سلام
ممنون از اموزش خوبتون
یه سوال داشتم
اگر ما المان هامون چند ردیف بود و باید از align-content استفاده کنیم ولی ارتفاع آنها متغیر است و مثل مثالهای بالا ثابت نیست ولی میخواهیم المان ردیف پایین به فاصله یکسانی از المان ردیف بالایی خودش قرار بگیره چیکار باید کنیم؟
مثل سایت پینترست که هر عکس ارتفاع خودشو داره و عکس ردیف پایینی به فاصله مشخص از عکس ردیف بالایی خودش قرار گرفته نه اینکه با بلندترین ارتفاع المان ردیف بالایی خودش تراز شه
Nazanin KarimiMoghaddam۱۵ آذر ۱۴۰۰، ۰۹:۳۲
درود
تاجایی که بنده چک زدم پینترست از فلکس باکس استفاده نمیکنه. منطق نمایش تصاویرش اینطوریه که میاد صفحه رو به چند ستون تبدیل میکنه و بعد باکس تصویر و دکمهها رو درونش قرار میده. مثلا عرض مکان باکس فعلی از عرض باکس قبلی بدست میاد. فواصل رو هم با مارجین و پدینگ مدیریت میکنه.
داخل این باکس که میشه تصویر مربوطه و دکمه لایک و... با فلکس ست شدند.
برای اطلاعات بیشتر با زدن دکمه f12 روی صفحه تصاویرش و انتخاب المانها میتونید کدهاشو ببینید.
dorsa۱۸ مهر ۱۴۰۰، ۱۸:۲۳
سلام ، اول یه تشکر میکنم از اموزش خوبتون ؛ دوم اینکه یه سوال دیسپلی :فلکس با فلکس دایرکشن: رُ چه فرقی داره جفتشون که یکیه
مارسل۱۶ مرداد ۱۴۰۰، ۱۱:۰۸
سالها بود که یه سایت فارسی خوب برای اموزش طراحی سایت نداشتیم ممنون از زحماتتون اینشالا کاربرها حمایت مالی کنن که این راهو شما ادامه بدید
نازنین کریمی مقدم۱۷ مرداد ۱۴۰۰، ۱۲:۱۵
ممنون که با ما همراه هستید :)
انشالله با حمایتهای شما کاربران عزیز همچنان این مسیر رو ادامه میدیم.
programer۱۳ خرداد ۱۴۰۰، ۰۸:۵۳
یک سایت عالی با کلی مطلبهای عالی
sobhan۰۳ خرداد ۱۴۰۰، ۰۷:۰۰
عالی بود مخصوصا سایتهای معرفی شده
reza۲۹ دی ۱۳۹۹، ۲۱:۳۷
کاش قیمتها بایینتر بود
Karbar۱۶ دی ۱۳۹۹، ۰۹:۲۰
سلام.کاش یه توضیحی راجع به کلاس هایی که واسه اون مثال صفحه واکنشگرا میدادین.بعضی کلاسا item1 یا item2 اسمشونه که توی کدهای بخش استایل همچین کلاسایی نداریم.و چرا انقدر کلاس item تکرار شده؟
بازم ممنون
نازنین کریمی مقدم۱۶ دی ۱۳۹۹، ۱۰:۱۸
سلام.
حقیقتا کلاسای item1 و... رو برای این نوشتم که اگر کسی میخواست شخصی سازی بیشتری انجام بده، خودش کلاسشو تو استایل تکمیل کنه. چون معمولا در ابتدای کار خیلیا میان و کدهاشون رو تو کلاس ما مینویسن، بعد کدشون اجرا نمیشه و اشتباها کدهای قبلی رو دست میزنند یا فکر میکنند که مشکل از کد ماست. اما شما میتونید ازشون استفاده نکنید. علاوه بر اون، اضافه کردن یه دلیل دیگه غیر آموزشی هم داشت. یکی از سایتها به صورت غیرقانونی در حال کپی مطالب ما بود که با اینکار براشون تله گذاشتیم :))
کلاس item استایل عمومی همه المانهاست که باید بر هر کدومشون جدا اعمال بشه و برای همین به تک تک شون در بخش html اضافه شده. همچنین همونطور ک گفتم هر کدوم از این المانها ویژگیهای غیرمشترک با هم دارند (مثل اندازه و..) که تو استایل مثلا با شیوه .item.header مقداردهی شدند.
ممنون که با ما همراه هستید.
پوریا۱۴ خرداد ۱۳۹۹، ۰۸:۴۲
خیلی خوب توضیح داده بودین,ممنون.
نازنین کریمی مقدم۱۷ خرداد ۱۳۹۹، ۰۹:۴۹
سلام. ممنون که با ما همراه هستید.
حامد۱۱ خرداد ۱۳۹۹، ۲۰:۲۸
خیلی مقاله خوبی بود واقعن مرسی. اما یه جاهایی از flex-grow و flex-basis همزمان استفاده کرده بودید که اصلن نیازی به استفاده از flex-grow نبود.
نازنین کریمی مقدم۱۷ خرداد ۱۳۹۹، ۰۹:۵۳
سلام. حق با شماست. هدف ما از اینکار، تکرار در استفاده از ویژگیها برای یادگیری افرادی هست که ممکنه تازه شروع کرده باشند.
Zahra Salehi۰۹ خرداد ۱۳۹۹، ۱۴:۰۱
سلام اون layout ی که قرار دادین که واکنش گرا نیست !! اسکرول میخوره
نازنین کریمی مقدم۱۰ خرداد ۱۳۹۹، ۱۱:۵۱
سلام.
اگر مراحل رو به درستی انجام داده باشید نباید دارای اسکرول افقی باشید.
البته ممکن هست مشکل از مرورگرتان باشد که پیشنهاد میکنم بخش مرورگر در <a href="https://7learn.com/blog/what-is-flexbox">این مقاله</a> رو مطالعه کنید.