منوی افقی وردپرس css flexbox. Flexbox برای رابط: الگوهای اساسی. ایجاد یک کانتینر HTML5

به طور خلاصه، طرح بندی با Flexbox به ما می دهد راه حل های سادهیک بار کارهای دشوار به عنوان مثال، زمانی که باید یک عنصر را به صورت عمودی تراز کنید، یا فوتر را به پایین صفحه فشار دهید، یا به سادگی چندین بلوک را در یک ردیف قرار دهید تا تمام فضای خالی را اشغال کنند. کارهای مشابه بدون انعطاف حل می شوند. اما به عنوان یک قاعده، این راه حل ها بیشتر شبیه "عصا" هستند - ترفندهایی برای استفاده از css برای اهداف دیگر. در حالی که با flexbox، چنین وظایفی دقیقاً همانطور که مدل flex تصور می کند حل می شود.

CSS Flexible Box Layout Module (ماژول CSS برای طرح‌بندی‌هایی با بلوک‌های انعطاف‌پذیر)، به طور خلاصه flexbox، برای حذف معایب در هنگام ایجاد طیف گسترده‌ای از ساختارهای HTML، از جمله ساختارهایی که با عرض و ارتفاع‌های مختلف تطبیق داده شده‌اند، ایجاد شده است، و طرح‌بندی را منطقی و ساده می‌کند. . و رویکرد منطقی، به عنوان یک قاعده، در مکان های غیرمنتظره کار می کند، جایی که نتیجه بررسی نشد - منطق همه چیز ما است!

Flexbox به شما این امکان را می دهد که طیف گسترده ای از پارامترها را برای عناصر درون یک ظرف کنترل کنید: جهت، ترتیب، عرض، ارتفاع، تراز در امتداد و عرض، توزیع فضای آزاد، کشش و کوچک شدن عناصر.

دانش عمومی

یک FlexBox از یک ظرف و عناصر کودک (اقلام) آن (اقلام انعطاف پذیر) تشکیل شده است.

برای فعال کردن flexbox، هر کسی عنصر HTMLکافی است ویژگی css را اختصاص دهید display:flex; یا display:inline-flex; .

پس از فعال کردن ویژگی flex، دو محور در داخل ظرف ایجاد می شود: اصلی و عرضی (عمود (⊥)، محور متقاطع). تمام عناصر تو در تو (سطح اول) در امتداد محور اصلی تراز شده اند. به طور پیش فرض، محور اصلی افقی است و جهتی از چپ به راست دارد (↓) و محور متقاطع به ترتیب عمودی و از بالا به پایین هدایت می شود (↓).

محورهای اصلی و متقاطع را می توان تعویض کرد، سپس عناصر از بالا به پایین (↓) قرار می گیرند و وقتی دیگر در ارتفاع قرار نمی گیرند، از چپ به راست حرکت می کنند (→) - یعنی محورها به سادگی تعویض می شوند. در این حالت، ابتدا و انتهای چیدمان عناصر تغییر نمی کند - فقط جهت ها (محورها) تغییر می کند! به همین دلیل باید به تبرهای داخل ظرف فکر کنید. با این حال، نباید فکر کرد که محورهای "فیزیکی" در آنجا وجود دارد و آنها بر چیزی تأثیر می گذارند. محور در اینجا فقط جهت حرکت عناصر داخل ظرف است. به عنوان مثال، اگر تراز عناصر را به مرکز محور اصلی مشخص کنیم و سپس جهت این محور اصلی را تغییر دهیم، تراز نیز تغییر می کند: عناصر به صورت افقی در وسط قرار داشتند و به صورت عمودی در وسط قرار گرفتند. مثال را ببینید.

یکی دیگر از ویژگی های مهم فلکس باکس وجود ردیف هایی در جهت عرضی است. برای درک آنچه در مورد آن صحبت می کنیم، بیایید تصور کنیم که یک محور افقی اصلی، تعداد زیادی عناصر وجود دارد و آنها به داخل ظرف "صعود" نمی کنند، بنابراین به ردیف دیگری حرکت می کنند. آن ها ظرف شبیه این است: یک ظرف، در داخل آن دو ردیف وجود دارد، هر ردیف دارای چندین عنصر است. نمایندگی؟ و اکنون به یاد داشته باشید که ما می توانیم نه تنها عناصر، بلکه ردیف ها را نیز به صورت عمودی تراز کنیم! نحوه عملکرد آن به وضوح در مثال برای . و از نظر شماتیک به این صورت است:

ویژگی های CSSکه می تواند بر مدل ساختمان چیدمان تأثیر بگذارد: شناور، شفاف، تراز عمودی، ستون ها در سازه های انعطاف پذیر کار نمی کنند. یک مدل طرح بندی متفاوت در اینجا استفاده می شود و این ویژگی های css به سادگی نادیده گرفته می شوند.

ویژگی های Flexbox CSS

Flexbox شامل انواع مختلفی است قوانین cssبرای مدیریت کل ساختار فلکس. برخی باید روی ظرف اصلی اعمال شوند و برخی دیگر به عناصر این ظرف.

برای ظرف

نمایش دادن:

ویژگی flex را برای عنصر فعال می کند. خود عنصر و عناصر تودرتو در آن تحت این ویژگی قرار می گیرند: فقط فرزندان سطح اول تحت تأثیر قرار می گیرند - آنها به عناصر ظرف انعطاف پذیر تبدیل می شوند.

• خم شدن- المان به عرض کامل خود کشیده می شود و فضای کامل خود را در بین بلوک های اطراف دارد. در ابتدا و انتهای بلوک یک خط شکست وجود دارد.
• درون خطی فلکس- عنصر توسط عناصر دیگر به اطراف پیچیده شده است. در همان زمان، قسمت داخلی آن به عنوان یک عنصر بلوک و خود عنصر به عنوان یک عنصر درون خطی فرمت می شود.

flex و inline-flex از این جهت متفاوت هستند که با عناصر اطراف تعامل متفاوتی دارند، مشابه display:block و display:inline-block.

جهت انعطاف پذیری:

جهت محور اصلی ظرف را تغییر می دهد. محور عرضی بر این اساس تغییر می کند.

• ردیف (پیش فرض)- جهت عناصر از چپ به راست (→)
• ستون- جهت عناصر از بالا به پایین (↓)
• ردیف معکوس- جهت عناصر از راست به چپ (←)
• ستون معکوس- جهت عناصر از پایین به بالا ()

پوشش انعطاف پذیر:

بسته بندی عناصری که در ظرف جا نمی شوند را کنترل می کند.

• nowrap (پیش فرض)- عناصر تو در تو در یک ردیف (با جهت=ردیف) یا در یک ستون (با جهت=ستون) بدون توجه به اینکه در یک ظرف قرار می گیرند یا نه، چیده شده اند.
• بسته بندی کردن- شامل انتقال عناصر به ردیف بعدی در صورتی که در ظرف جا نشوند. این امکان حرکت عناصر را در امتداد محور عرضی فراهم می کند.
• پیچیدن معکوس- همان wrap فقط انتقال پایین نخواهد بود، بلکه بالا (در جهت مخالف) خواهد بود.

فلکس جریان: پیچ جهت

ترکیبی از هر دو ویژگی جهت انعطاف پذیری و پیچش انعطاف پذیر است. آنها اغلب با هم استفاده می شوند، بنابراین ویژگی flex-flow برای نوشتن کد کمتر ایجاد شده است.

flex-flow مقادیر این دو ویژگی را که با یک فاصله از هم جدا شده اند می گیرد. یا می توانید یک مقدار واحد برای هر ویژگی مشخص کنید.

/* flex-direction only */ flex-flow: row; flex-flow: row-reverse; flex-flow: ستون; flex-flow: column-reverse; /* flex-wrap only */ flex-flow: nowrap; flex-flow: wrap; flex-flow: wrap-reverse; /* هر دو مقدار به طور همزمان: flex-direction و flex-wrap */ flex-flow: row nowrap; فلکس جریان: پوشش ستون. flex-flow: ستون-reverse wrap-reverse; justify-content:

عناصر را در امتداد محور اصلی تراز می کند: اگر جهت = ردیف، سپس به صورت افقی، و اگر جهت = ستون، سپس به صورت عمودی.

• شروع انعطاف پذیر (پیش فرض)- عناصر از ابتدا خواهند رفت (ممکن است در انتها فضا وجود داشته باشد).
• انتهای انعطاف پذیر- عناصر در انتها تراز می شوند (مکان در ابتدا باقی می ماند)
• مرکز- در مرکز (مکان در سمت چپ و راست باقی می ماند)
• فاصله بین- عناصر شدید به لبه ها فشرده می شوند (فضای بین عناصر به طور مساوی توزیع می شود)
• فضای اطراف- فضای آزاد به طور مساوی بین عناصر توزیع می شود (عناصر افراطی روی لبه ها فشرده نمی شوند). فاصله بین لبه ظرف و بیرونی ترین عناصر نصف فضای بین عناصر در وسط ردیف خواهد بود.
• فضا به صورت یکنواخت

تراز کردن محتوا:

ردیف های حاوی عناصر را در امتداد محور عرضی تراز می کند. همان justify-content اما برای محور مخالف.

توجه: زمانی کار می کند که حداقل 2 ردیف وجود داشته باشد، یعنی. اگر فقط 1 ردیف وجود داشته باشد، هیچ اتفاقی نمی افتد.

آن ها اگر flex-direction: row , آنگاه این ویژگی ردیف های نامرئی را به صورت عمودی تراز می کند ¦ . در اینجا ذکر این نکته ضروری است که ارتفاع بلوک باید به صورت صلب تنظیم شود و باید از ارتفاع ردیف ها بیشتر باشد، در غیر این صورت خود ردیف ها ظرف را کشیده و هر تراز آنها معنای خود را از دست می دهد، زیرا فضای خالی وجود ندارد. بین آنها... اما وقتی flex-direction: column ، سطرها به صورت افقی حرکت می کنند → و عرض ظرف تقریباً همیشه از عرض ردیف ها بیشتر است و تراز ردیف ها بلافاصله معنی می یابد ...

• کشش (پیش فرض)- ردیف ها کشیده می شوند تا ردیف کاملاً پر شود
• شروع انعطاف پذیر- ردیف ها در بالای ظرف گروه بندی شده اند (ممکن است در انتها جا وجود داشته باشد).
• انتهای انعطاف پذیر- ردیف ها در پایین ظرف گروه بندی می شوند (محل در ابتدا باقی می ماند)
• مرکز- ردیف ها در مرکز ظرف گروه بندی می شوند (محل در لبه ها باقی می ماند)
• فاصله بین- ردیف های افراطی روی لبه ها فشرده می شوند (فضای بین ردیف ها به طور مساوی توزیع شده است)
• فضای اطراف- فضای آزاد به طور مساوی بین ردیف ها توزیع می شود (عناصر افراطی روی لبه ها فشرده نمی شوند). فاصله بین لبه ظرف و بیرونی ترین عناصر نصف فضای بین عناصر در وسط ردیف خواهد بود.
• فضا به صورت یکنواخت- مانند فضای اطراف، فقط فاصله عناصر افراطی تا لبه های ظرف مانند بین عناصر است.

تراز کردن موارد:

عناصر را در امتداد محور عرضی در یک ردیف تراز می کند (ردیف نامرئی). آن ها خود سطرها از طریق align-content و عناصر داخل این ردیف ها (ردیف ها) از طریق align-اقلام و همه اینها در امتداد محور عرضی تراز می شوند. چنین جدایی در امتداد محور اصلی وجود ندارد، هیچ مفهومی از ردیف وجود ندارد و عناصر با استفاده از justify-content تراز می شوند.

• کشش (پیش فرض)- المان ها کشیده می شوند تا خط کاملاً پر شود
• شروع انعطاف پذیر- عناصر به ابتدای ردیف فشار داده می شوند
• انتهای انعطاف پذیر- عناصر تا انتهای ردیف فشرده می شوند
• مرکز- عناصر در مرکز ردیف قرار گرفته اند
• خط پایه- عناصر با خط پایه متن تراز می شوند

برای عناصر ظرف

رشد انعطاف پذیر:

ضریب افزایش عنصر را در صورت وجود فضای خالی در ظرف مشخص می کند. پیش‌فرض flex-grow: 0 یعنی. هیچ یک از عناصر نباید رشد کنند و فضای خالی ظرف را پر کنند.

پیش‌فرض flex-grow: 0

• اگر flex-grow:1 را برای همه عناصر مشخص کنید، همه آنها به یک شکل کشیده می شوند و تمام فضای خالی ظرف را پر می کنند.
• اگر flex-grow:1 را برای یکی از عناصر مشخص کنید، آنگاه تمام فضای خالی ظرف را پر می کند و تراز کردن از طریق justify-content دیگر کار نخواهد کرد: فضای خالی برای تراز کردن وجود ندارد...
• با رشد انعطاف پذیر: 1. اگر یکی از آنها flex-grow:2 داشته باشد، 2 برابر بزرگتر از بقیه خواهد بود
• اگر همه جعبه‌های فلکس داخل ظرف فلکس دارای flex-grow:3 باشند، آن‌گاه اندازه آنها یکسان خواهد بود.
• با رشد انعطاف پذیر: 3 . اگر یکی از آنها flex-grow:12 داشته باشد، 4 برابر بزرگتر از بقیه خواهد بود

چگونه کار می کند؟ فرض کنید ظرف 500 پیکسل عرض دارد و شامل دو عنصر است که هر کدام با عرض پایه 100 پیکسل است. بنابراین 300 پیکسل رایگان در ظرف باقی مانده است. حال اگر عنصر اول را روی flex-grow قرار دهیم:2; و دومین فلکس رشد: 1; ، سپس بلوک ها کل عرض موجود ظرف را می گیرند و عرض بلوک اول 300 پیکسل و بلوک دوم 200 پیکسل خواهد بود. این با این واقعیت توضیح داده می شود که 300 پیکسل فضای خالی موجود در ظرف بین عناصر به نسبت 2:1، +200 پیکسل به اول و +100 پیکسل به دوم توزیع شده است.

توجه: می توانید اعداد کسری را در مقدار مشخص کنید، به عنوان مثال: 0.5 - flex-grow:0.5

فلکس شرینک:

ضریب کاهش را برای عنصر مشخص می کند. این خاصیت برعکس flex-grow است و تعیین می کند که اگر فضای خالی در ظرف باقی نماند چگونه عنصر باید کوچک شود. آن ها ویژگی زمانی شروع به کار می کند که مجموع اندازه همه عناصر از اندازه ظرف بزرگتر باشد.

انعطاف پذیری پیش فرض: 1

فرض کنید ظرف 600 پیکسل عرض دارد و شامل دو عنصر است که هر کدام 300 پیکسل عرض دارد - flex-basis:300px; . آن ها دو عنصر به طور کامل ظرف را پر می کند. اجازه دهید flex-shrink را مشخص کنیم: 2 برای عنصر اول. و فلکس شرینک دوم: 1; . حالا بیایید عرض ظرف را 300 پیکسل کاهش دهیم، یعنی. عناصر باید 300 پیکسل کوچک شوند تا در داخل ظرف قرار گیرند. آنها در نسبت 2:1 فشرده خواهند شد، یعنی. بلوک اول 200 پیکسل و بلوک دوم 100 پیکسل کوچک می شود و اندازه عناصر جدید 100 پیکسل و 200 پیکسل خواهد بود.

توجه: می توانید اعداد کسری را در مقدار مشخص کنید، به عنوان مثال: 0.5 - flex-shrink:0.5

پایه انعطاف پذیر:

عرض پایه عنصر را تنظیم می کند - عرض قبل از هر شرایط دیگری که بر عرض عنصر تأثیر می گذارد محاسبه می شود. مقدار را می توان در px، em، rem، ٪، vw، vh و غیره مشخص کرد. عرض نهایی به عرض پایه و مقادیر flex-grow، flex-shrink و محتوای داخل بلوک بستگی دارد. با خودکار، عنصر یک عرض پایه نسبت به محتوای داخل آن می گیرد.

پیش فرض: خودکار

گاهی اوقات بهتر است که پهنای یک عنصر را با استفاده از ویژگی آشنای width کدگذاری کنید. به عنوان مثال، عرض: 50%؛ به این معنی است که عنصر داخل ظرف دقیقاً 50٪ خواهد بود، با این حال، ویژگی های flex-grow و flex-shrink همچنان کار می کنند. این ممکن است زمانی مورد نیاز باشد که عنصر توسط محتوای داخل آن کشیده شود، بیش از مبنای انعطاف پذیر مشخص شده. مثال.

اگر کشش و جمع شدن روی صفر تنظیم شود، flex-basis "سخت" خواهد بود: flex-basis:200px; flex-grow:0; flex-shrink:0; . همه اینها را می توان به صورت flex نوشت: 0 0 200px; .

flex: (بر اساس رشد کوچک)

خلاصه سه ویژگی: flex-grow flex-shrink flex-bases.

پیش فرض: flex: 0 1 خودکار

با این حال، می توانید یک یا دو مقدار را مشخص کنید:

فلکس: هیچ. /* 0 0 خودکار */ /* تعداد */ flex: 2; /* flex-grow (flex-basis به 0 می رود) */ /* عددی نیست */ flex: 10em; /* flex-bases: 10em */ flex: 30px; /* flex-bases: 30px */ flex: auto; /* flex-basis: auto */ flex: content; /* flex-basis: content */ flex: 1 30px; /* flex-grow and flex-basis */ flex: 2 2; /* flex-grow and flex-shrink (flex-bases به 0 می رود) */ flex: 2 2 10%; /* flex-grow و flex-shrink و flex-basis */ align-self:

به شما امکان می‌دهد ویژگی align-item را فقط برای یک عنصر تغییر دهید.

پیش‌فرض: از آیتم‌های تراز کردن ظرف

• کش آمدن- المان کشیده می شود تا خط کاملاً پر شود
• شروع انعطاف پذیر- عنصر به ابتدای خط فشرده می شود
• انتهای انعطاف پذیر- عنصر تا انتهای خط فشرده می شود
• مرکز- عنصر در مرکز خط تراز شده است

خط پایه- عنصر با خط پایه متن تراز شده است

سفارش:

به شما امکان می دهد ترتیب (موقعیت، موقعیت) یک عنصر را در ردیف کلی تغییر دهید.

پیش فرض: سفارش: 0

به طور پیش فرض، عناصر دارای ترتیب: 0 هستند و به ترتیب ظاهرشان در کد HTML و جهت ردیف قرار می گیرند. اما اگر مقدار خاصیت order را تغییر دهید، عناصر به ترتیب مقادیر ردیف می شوند: -1 0 1 2 3 ... . به عنوان مثال، اگر ترتیب: 1 را برای یکی از عناصر مشخص کنید، ابتدا همه صفرها و سپس عنصر با 1 خواهند رفت.

بنابراین می توانید برای مثال اولین عنصر را تا انتها پرتاب کنید، در حالی که جهت حرکت عناصر باقیمانده یا کد HTML را تغییر ندهید.

یادداشت

فلکس بیس چه تفاوتی با عرض دارد؟

در زیر تفاوت های مهم بین پایه انعطاف پذیر و عرض / ارتفاع وجود دارد:

flex-base فقط برای محور اصلی کار می کند. این بدان معنی است که با flex-direction:row flex-basis عرض (عرض) را کنترل می کند و با flex-direction:column ارتفاع (ارتفاع) را کنترل می کند. .

مبتنی بر flex فقط برای اقلام فلکس اعمال می شود. یعنی اگر flex روی کانتینر را غیرفعال کنید، این خاصیت هیچ تاثیری نخواهد داشت.

عناصر کانتینر مطلق در ساختارهای فلکس شرکت نمی‌کنند... این بدان معناست که اگر موقعیت مطلق باشند، مبنا انعطاف‌پذیری بر عناصر انعطاف‌پذیر ظرف تأثیر نمی‌گذارد: مطلق. آنها باید عرض / ارتفاع را مشخص کنند.

• هنگام استفاده از ویژگی flex 3، مقادیر (flex-grow/flex-shrink/flex-basis) را می توان ترکیب کرد و کوتاه نوشت، در حالی که برای width grow یا shrink باید جداگانه نوشته شود. به عنوان مثال: flex:0 0 50% == عرض:50%; flex-shrink:0; . گاهی اوقات فقط ناخوشایند است.

در صورت امکان، باز هم مبتنی بر انعطاف پذیری را ترجیح دهید. فقط زمانی از عرض استفاده کنید که پایه انعطاف پذیر مناسب نباشد.

آیا تفاوت بین فلکس پایه و عرض یک اشکال است یا یک ویژگی؟

محتوای داخل یک عنصر انعطاف پذیر آن را گسترش می دهد و نمی تواند از آن فراتر رود. با این حال، اگر عرض را از طریق عرض یا حداکثر عرض تنظیم کنید نه بر اساس فلکس، عنصر داخل ظرف انعطاف‌پذیر می‌تواند به خارج از این ظرف برود (گاهی اوقات این رفتار مورد نیاز است). مثال:

نمونه های طرح بندی فلکس

در مثال‌ها، پیشوندهای سازگاری بین مرورگرها در هیچ کجا استفاده نمی‌شوند. من این کار را برای خواندن آسان css انجام دادم. بنابراین، نمونه هایی را در آخر ببینید نسخه های کرومیا فایرفاکس

#1 مثال تراز عمودی و افقی ساده

بیایید از خیلی شروع کنیم یک مثال ساده- تراز عمودی و افقی در همان زمان و در هر ارتفاع بلوک، حتی لاستیک.

یا مانند این، بدون بلوک در داخل:

#1.2 جداسازی (شکاف) بین عناصر بلوک فلکس

برای قرار دادن عناصر کانتینر در لبه ها و انتخاب خودسرانه عنصری که پس از آن یک شکاف وجود دارد، باید از ویژگی margin-left:auto یا margin-right:auto استفاده کنید.

#2 منوی پاسخگو در flex

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

# 3 پاسخگو 3 ستون

این مثال نحوه ساخت سریع و راحت 3 ستون را نشان می دهد که وقتی باریک شوند به 2 و سپس به 1 تبدیل می شوند.

لطفاً توجه داشته باشید که این کار را می توان بدون استفاده از قوانین رسانه انجام داد، همه چیز در حالت انعطاف پذیر است.

به jsfiddle.net رفته و عرض قسمت "نتیجه" را تغییر دهید

شماره 4 بلوک های پاسخگو در flex

فرض کنید باید 3 بلوک، یکی بزرگ و دو بلوک کوچک را نمایش دهیم. در عین حال، لازم است که بلوک ها با صفحه نمایش های کوچک سازگار شوند. ما انجام می دهیم:

به jsfiddle.net رفته و عرض قسمت "نتیجه" را تغییر دهید

گالری شماره 5 در مورد انعطاف و انتقال

این مثال نشان می‌دهد که با چه سرعتی می‌توانید یک آکاردئون زیبا با تصاویر روی فلکس درست کنید. به ویژگی transition برای flex توجه کنید.

#6 Flex to Flex (فقط یک مثال)

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

برای حل این مشکل، خود بلوک ها توسط فلکس کشیده می شوند و حداکثر عرض ممکن برای آنها تعیین می شود. هر یک واحد داخلیهمچنین یک ساختار انعطاف پذیر است، با محور چرخش flex-direction:column; و عنصر در وسط (جایی که متن است) با flex-grow:1 کشیده می شود. برای پر کردن تمام فضای آزاد، بنابراین نتیجه حاصل می شود - متن با یک خط شروع شد ...

نمونه های بیشتر

پشتیبانی از مرورگر - 98.3٪

البته پشتیبانی کاملی وجود ندارد، اما تمام مرورگرهای مدرن از ساختارهای flexbox پشتیبانی می کنند. برخی هنوز به پیشوند نیاز دارند. برای یک تصویر واقعی، بیایید نگاهی به caniuse.com بیندازیم و ببینیم که 96.3٪ از مرورگرهای مورد استفاده امروز بدون پیشوند و با 98.3٪ پیشوند کار می کنند. این یک شاخص عالی برای استفاده جسورانه از flexbox است.

برای دانستن اینکه کدام پیشوندها امروز (ژوئن 2019) مرتبط هستند، من یک مثال از تمام قوانین انعطاف پذیری با پیشوندهای لازم:

/* کانتینر */ .flex (نمایش:-webkit-box; display:-ms-flexbox; display:flex; display:-webkit-inline-box; display:-ms-inline-flexbox; display:inline-flex; -webkit-box-orient:عمودی؛ -webkit-box-direction: normal. -flex-flow:column wrap؛ flex-flow:column wrap؛ -webkit-box-pack: justify؛ -ms-flex-pack: justify; justify-content:space-between؛ -ms-flex-line-pack: توزیع; align-content:space-around; ) /* Items */ .flex-item ( -webkit-box-flex:1; -ms-flex-positive:1; flex-grow:1; -ms-flex- negative:2؛ flex-shrink:2؛ -ms-flex-preferred-size:100px؛ flex-basis:100px؛ -ms-flex:1 2 100px؛ flex:1 2 100px؛ -ms-flex-item-align :center؛ align-self:center؛ -webkit-box-ordinal-group:3؛ -ms-flex-order:2؛ order:2؛ )

بهتر است خواص با پیشوند قبل از ویژگی اصلی باشد.
هیچ پیشوند غیرضروری برای امروز (طبق گفته caniuse) در این لیست وجود ندارد، اما به طور کلی پیشوندهای بیشتری وجود دارد.

کروم	سافاری	فایرفاکس	اپرا	IE	اندروید	iOS
20- (قدیمی)	3.1+ (قدیمی)	2-21 (قدیمی)		10 (توینر)	2.1+ (قدیمی)	3.2+ (قدیمی)
21+ (جدید)	6.1+ (جدید)	22+ (جدید)	12.1+ (جدید)	11+ (جدید)	4.4+ (جدید)	7.1+ (جدید)

• (جدید) - نحو جدید: نمایش: flex; .
• (tweener) - نحو غیر رسمی 2011 قدیمی: نمایشگر: flexbox. .
• (قدیمی) - نحو قدیمی 2009: نمایش: جعبه.

ویدیو

خوب، ویدیو را فراموش نکنید، گاهی اوقات آن نیز جالب و قابل درک است. در اینجا چند مورد محبوب وجود دارد:

پیوندهای مفید فلکس

flexboxfroggy.com - بازی یادگیری flexbox.

Flexplorer یک سازنده کد انعطاف پذیر بصری است.

در این پست، من می خواهم یک راه برای پیاده سازی یک منوی افقی پاسخگو با استفاده از Flexbox را نشان دهم. این روشپیاده سازی منو در وب سایت Warface Hub استفاده می شود، اما با ساختار و استفاده کمی متفاوت است در بارهسوت های بیشتر

حدود یک سال پیش، وارد شرکتی شدم که در آن عبارت فوق‌العاده‌ای به من گفتند: «اول ما همه چیز را با آن انجام می‌دهیم با استفاده از CSSو سپس جاوا اسکریپت را اضافه کنید." به نظر می رسد توصیه خوب است و من آن را دنبال کردم. اما همانطور که اتفاق افتاد، من رانده شدم. حالا به من برگشت که همه چیز لازم نیست با این رویکرد انجام شود.

و بنابراین، بیشتر به نقطه. شروع به مطالعه و اجرا کردم.

اهداف

1. کسب مهارت های اساسی در کار با ویژگی های Flexbox؛
2. یک منوی تطبیقی ​​افقی ایجاد کنید.
3. راه حل حاصل برای اعمال در پروژه

ابزار و مستندات

1. NPM - به عنوان مدیر بسته (اکنون به طور فعال به سمت Yarn حرکت می کند)
2. Grunt ابزاری است که به شما در ساخت پروژه کمک می کند.
3. مستندات Flexbox (نگاه کنید به لینک های مفید);

می توانید از جعبه ابزار خود استفاده کنید

ساختار

برای سازماندهی ساختار سبک برای منو، از مفهومی که شرح داده شده است استفاده کردم. نویسنده این مفهوم پیشنهاد می کند که تمام توصیفات سبک به چند قسمت تقسیم شود:

• چیدمان- موقعیت اجزا و عناصر را در صفحه توصیف می کند.
• جزء- نمایش و رفتار عناصر موجود در جزء را توصیف می کند.
• عنصر- نمایش و رفتار یک عنصر را توصیف می کند.

بنابراین درک من از مفهوم من را به این ساختار هدایت کرد:

• پایه- توصیف ثابت ها، سبک های اساسی (مانند normalize.css)
• مولفه- شرح اجزای برنامه در مورد ما، جزء "منو".
• عنصر- شرح سبک برای عناصری مانند دکمه، پیوند و غیره.
• چیدمان- شرح مکان بلوک ها در صفحه
• style.scss- در این فایل همه چیز را با هم جمع می کنیم

برچسب‌های ورودی و برچسب‌گذاری CSS و HTML

قبل از شروع ترسیم نشانه‌گذاری HTML، می‌خواهم برخی از رفتارهای جالب انتخابگر CSS را یادآوری یا نشان دهم که مفید خواهند بود.

متن 1 متن 1
AT این مثالممکن است متوجه شوید که وقتی روی برچسب کلیک می کنید، ورودی انتخاب شده را دریافت خواهید کرد. هیچ چیز خاصی در این مورد وجود ندارد (نگاه کنید به )، اما جالب ترین چیز از سمت انتخابگرهای CSS است.

ورودی: بررسی شده (رنگ حاشیه: قرمز؛ )
این انتخابگر CSS فقط زمانی پردازش می‌شود که ورودی انتخاب شده باشد (نگاه کنید به: بررسی شده)

دومین موردی که در انتخابگرهای CSS باید به آن توجه کرد، انتخاب عنصر بعدی است (به انتخابگرهای خواهر و برادر مجاور و انتخابگرهای خواهر و برادر عمومی مراجعه کنید). یعنی می توانیم بعد از عنصر فعلی عنصر بعدی را انتخاب کنیم.

ورودی: علامت زده + برچسب (رنگ: قرمز؛ )
در این مثال، رفتار زیر را دریافت کردیم: وقتی عنصری با کلاس ورودی انتخاب می‌شود، عنصر بعدی با کلاس برچسب مطابق با سبک‌های توصیف شده تغییر می‌کند.

حالا همه چی جمع شده

ساختار منو با یک آیتم

در این مثال، من برخی از عناصر ورودی و برچسب را برای دستیابی به رفتار زیر اضافه کرده ام:

1. هر عنصر name=menu-item-trigger، به جز اولین مورد، در حالت :checked، دید و موقعیت عناصر label.menu-item-close و div.menu-sub بعدی را تغییر می دهد به طوری که label.menu-item عنصر -close کاملاً روی عنصر label.menu-item-label پوشانده شده است و div.menu-sub زیر عنصر label.menu-item-label ارائه شده است. یعنی یک زیر منو باز می کنیم و با کلیک روی منوی اصلی رفتار را تغییر می دهیم.
2. اولین عنصر name=menu-item-trigger فقط برای لغو همه تغییرات اعمال شده در پاراگراف قبلی استفاده می شود، یعنی بستن منوی فرعی.

هیچ موردی از منو انتخاب نشده است:

یک مورد از منو انتخاب شده است:

پس از چنین دستکاری ها، تنها پنهان کردن عناصر ورودی باقی می ماند.

فلکس باکس

حالا باید استایل ها را به آن اضافه کنیم این منوبه خوبی در رزولوشن های مختلف و مرورگرهای مختلف. در حال حاضر، ما تلاش خود را بر روی پشتیبانی از مرورگرهایی متمرکز کرده ایم که بیشترین استفاده را توسط بازدیدکنندگان منبع ما دارند. نتیجه یک لیست کوچک است: کروم، فایرفاکس، IE Edge، IE 11 و نسخه های موبایل آنها آخرین نسخه ها.

پشتیبانی با افزودن پیشوندها (postcss) و سبک های نوشتن جداگانه برای یک مرورگر خاص ارائه می شود.

رسیدن به پاسخگویی در Flexbox بسیار آسان است. برای توصیف ظرف کافی است، اما گاهی اوقات نیاز به حل مشکلات محتوای داخل خواهد بود. مثلا:

• آیتم های منو با کلمات طولانی، مانند "پایه دانش" و ترجمه آلمانی آن "Wissensdatenbank". در این حالت، یک عنصر بسته بندی برای متن اضافه می شود که سبک های زیر به آن اعمال می شود:

  Label-text (// @link: http://htmlbook.ru/css/text-overflow overflow: پنهان؛ سرریز متن: بیضی؛ عرض: 100%؛ نمایش: inline-block؛ )

• تصاویری که باید در عرض کشیده شوند، اما هنگام تنظیم عرض: 100٪. آنها از بلوک والد خارج می شوند. این جایی است که اندازه جعبه: border-box; برای این عنصر؛
• همچنین ممکن است مشکلاتی وجود داشته باشد که عناصر کودک کل طول ممکن را اشغال نکنند یا به طور مساوی توزیع نشده باشند. اینجاست که flex: 1 1 auto ممکن است کمک کند.

در این مثال، محفظه عنصر به شرح زیر است:

منو (نمایش: خم شدن، تراز کردن آیتم ها: مرکز، انعطاف پذیر: بسته بندی، )
برای هر عنصر در کانتینر، باید به آن استایل بدهید تا تمام فضای ممکن را پر کند و محتوای درون خود را در مرکز به صورت عمودی تراز کند:

آیتم منو ( انعطاف: 1 1 خودکار؛ نمایشگر: خم شدن؛ جهت خم شدن: ستون؛ تراز کردن موارد: کشش؛ )

با استفاده از آن می توان به نمایش منوی زیباتری دست یافت

در این نسخه، ما افکت منوی افقیدر شناور بیایید با نمادهای فونت ارتباط برقرار کنیم، حالت ترکیب لایه ها را با حالت mix-blend-mode فعال کنیم: ضرب کنید، از کلاس های شبه :hover استفاده کنید و با desplay:flax آشنا شویم، همه اینها در CSS3 خالص انجام شده است.

قاب منو در HTML

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

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

برچسب بدن را بنویسید

، در آن یک div با کلاس .dws-menu، سپس ul با کلاس .dws-ul، سپس پنج لیست li با کلاس .dws-li می نویسیم. یک لینک در لیست ها قرار دهید، سپس I با کلاس .fa و کلاس fa، جایی که نام آیکون ها را می نویسیم، سپس ویژگی aria-hidden=”true” را کلیک کنید، روی اعمال کلیک کنید.

Div.dws-menu>ul.dws-ul>li.dws-li*5>a>i.fa.fa-

نام نماد:

• سبد خرید
• سرور
• پوشه باز می شود
• روزنامه-o

• خانه
• نمره
• خدمات
• نمونه کارها
• اخبار

یک ظاهر طراحی CSS

هنگامی که نشانه گذاری را انجام دادیم، به سمت استایل می رویم. style.css را در بدنه باز کنید و پس زمینه و فونت Verdana را تنظیم کنید.

Body( پس‌زمینه-تصویر: url("../img/escheresque_ste.png")؛ font-family: Verdana; )

ما پس زمینه بلوک را با منو تنظیم می کنیم، 100 قله را از بالا ایجاد می کنیم. و عرض تمام صفحه

منوی Dws (رنگ پس‌زمینه: سفید؛ حاشیه بالا: 100 پیکسل؛ عرض: 100 درصد؛ )

در بلوک های Ul، لیست ها را به صورت افقی با desplay:flax ردیف می کنیم، padding را حذف می کنیم و عناصر خود را با justify-content:center در مرکز قرار می دهیم.

Ul.dws-ul(نمایشگر: انعطاف پذیر؛ بالشتک: 0؛ توجیه محتوا: مرکز؛ )

ما نشانگر را از لیست های LI حذف می کنیم و از همه طرف 10 پیک تورفتگی می کنیم.

Li.dws-li (سبک لیست: هیچکدام؛ بالشتک: 10 پیکسل؛ )

خط زیر را از لینک ها حذف می کنیم، متن را به 18 قله افزایش می دهیم. و آن را سیاه کنید.

Li.dws-li a (تزیین متن: هیچ، اندازه قلم: 18 پیکسل، رنگ: #000؛ )

نماد را کمی به سمت راست با margin-right: 10px حرکت دهید.

Li.dws-li a i( حاشیه-راست: 10px؛ )

انیمیشن در حالت شناور

بعد از اینکه طراحی اولیه را انجام دادیم، بیایید انیمیشن را روی شناور شروع کنیم.

بیایید عناصر شبه اضافی ایجاد کنیم که هنگام شناور کردن، زیر نام عنصر خط بکشند.

بیایید سمت چپ را توصیف کنیم، پیوندها را انتخاب کنیم و به آنها یک عنصر شبه اختصاص دهیم li.dws-li a::before، یک محتوای خالی بنویسیم:''; 20 عکس عرض و ارتفاع 3 بیل. کافی. بیایید رنگ را تنظیم کنیم و برای اینکه بلوک ظاهر شود، موقعیت پیوندها را تعیین کنیم: relative; و آن را کاملاً روی پیوندها قرار دهید، آن را به پایین منتقل کنید، آن را به لبه سمت چپ فشار دهید.

li.dws-li a(... موقعیت: نسبی؛ ) li.dws-li a::قبل (... موقعیت: مطلق؛ بالا: 100%؛ سمت چپ: 0؛ )

این بلوک را کپی کرده و شبه عنصر ::after را به آن اختصاص دهید. پارامتر را از چپ به راست تغییر دهید، رنگ دیگری را انتخاب کنید #ff2117.

Li.dws-li a::after( محتوا: ""؛ عرض: 20 پیکسل؛ ارتفاع: 3 پیکسل؛ رنگ پس زمینه: #ff2117؛ موقعیت: مطلق؛ بالا: 100%؛ سمت راست: 0؛ )

سپس انیمیشن را در حالت شناور می سازیم. li را انتخاب کنید و پس زمینه کمی تیره تر به آنها بدهید.

Li.dws-li:hover( پس زمینه رنگ: #e5eae8; )

برای این کار لیست های موجود در hover را انتخاب می کنیم و یک شبه عنصر با عرض 50 درصد به آنها اضافه می کنیم و تبدیل را در امتداد محور X از چپ به راست تنظیم می کنیم. این باعث حرکت او می شود.

Li.dws-li:Hover a:before(عرض: 50%؛ تبدیل: translateX(100%)؛ )

همین کار را برای عنصر :: بعد از شبه تکرار می کنیم، فقط اکنون حرکت را از راست به چپ تنظیم می کنیم.

Li.dws-li:Hover a:after( عرض: 50%؛ تبدیل: translateX(-100%)؛ )

در. : تکثیر کردن؛ )

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

Li.dws-li a:hover(رنگ: #e62117؛ )

li.dws-li a(... padding: 5px; ) li.dws-li a::before(... top: 90%; ) li.dws-li a::after(... top: 90 %؛)

در اصل، آنچه را که می خواستم به شما نشان دادم، منوی بسیار خوبی بود.

این درس توسط گورلوف دنیس تهیه شده است.

در این مقاله می‌خواهیم نگاهی دقیق‌تر به استفاده از flexbox در CSS3 به عنوان یکی از راه‌های پیشرفته برای رسیدن به پاسخ‌گویی در یک وب‌سایت داشته باشیم.

در ایجاد CSSپیچیدگی طرح‌بندی‌ها آن چیزی نبود که امروز است. پیش از این، طرح‌بندی‌ها با عرض ثابت و با تغییرات کوچک در قرارگیری بلوک‌ها بودند، اما امروزه طرح‌بندی‌های سایت می‌توانند تقریباً هر شکلی را به خود بگیرند. همه اینها توسعه دهندگان را مجبور می کند تا هک های CSS را ارائه دهند تا محتوا کم و بیش درست نمایش داده شود.

فلکس باکس (جعبه های انعطاف پذیر) نسبی است حالت جدیدنشانه گذاری در CSS3 برای بهبود هم ترازی، جهت و ترتیب عناصر در یک ظرف، حتی اگر پویا یا با ابعاد ناشناخته باشد، طراحی شده است. این بیشترین است ویژگی مهم- امکان تغییر عرض یا ارتفاع عناصر فرزند در بلوک به منظور پر کردن فضای موجود در اندازه های مختلف صفحه نمایش.

فلکس باکس چیست؟

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

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

در این لحظه فلکس باکستقریباً توسط تمام مرورگرهای مدرن از جمله اندروید و iOS پشتیبانی می شود.

چه زمانی از Flexbox برای چیدمان استفاده کنیم

در یکی از مقالات قبلی در مورد روشی برای طراحی واکنشگرا نوشتیم. در حالی که از نظر فنی امکان ایجاد یک طرح بندی کامل برای یک سایت با Flexbox وجود دارد، اما صرفاً برای این منظور در نظر گرفته نشده است. در عوض، برای یک ظاهر طراحی ظروف جداگانه مانند محفظه اصلی، بهتر است. پنل کناری(نوار کناری)، هدر و سایر بخش های مشابه. با این حال، شبکه‌ها برای ایجاد کل طرح‌بندی بهتر هستند.

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

به عبارت دیگر، برای کسری از ثانیه، کاربر طرح کاملا متفاوتی را که برنامه ریزی شده بود، مشاهده می کند. اما پس از بارگذاری کامل صفحه، البته همه چیز تراز می شود.

ظروف، کودکان، و فلکس

قبل از شروع نوشتن کد CSS با استفاده از flexbox، ابتدا باید با چند مفهوم مهم آشنا شوید:

• flexbox - ظرف می شود فلکس باکسپس از اینکه ویژگی display با مقدار flex یا inline-flex متصل شد
• آیتم flex - عنصر فرزند در flexbox
• محور اصلی - این محور اصلی است که عناصر در امتداد آن تراز می شوند
• محور متقاطع - یک محور عمود بر محور اصلی. محور متقاطع نیز نامیده می شود
• شروع اصلی/پایان اصلی (شروع اصلی/پایان اصلی) - اقلام انعطاف پذیر در ظرفی قرار می گیرند که از سمت شروع اصلی شروع می شود و به انتهای اصلی ختم می شود.
• شروع و پایان متقاطع (شروع/پایان متقاطع) - خطوط فلکس با آیتم‌ها (عناصر) پر شده و در ظرفی قرار می‌گیرند که از سمت شروع متقاطع ظرف فلکس شروع می‌شود و تا انتهای متقاطع می‌رود.
• ویژگی اندازه اصلی - عرض یا ارتفاع آیتم فلکس، بسته به اینکه چه چیزی در بعد اصلی محور اصلی است، اندازه اصلی عنصر است. ویژگی اندازه اصلی یک آیتم flex یا ویژگی عرض یا ارتفاع است، هر کدام که در بعد اصلی باشد
• ویژگی cross size - عرض یا ارتفاع آیتم flex، هر کدام در بعد محور متقاطع باشد، اندازه متقاطع مورد است. ویژگی ابعاد متقاطع به عرض یا ارتفاعی که در بعد متقاطع است بستگی دارد

ویژگی‌های خاصی در CSS وجود دارد که تحت تأثیر ویژگی flexbox قرار نمی‌گیرند، زیرا در واقع جعبه‌های کانتینر را نمی‌سازند:

Column-* float واضح عمودی-align::first-line and:: first-letter

ایجاد یک کانتینر HTML5

اکنون می توانیم با استفاده از flexbox شروع به ساخت طرح بندی کنیم. برای انجام این کار، ستون فقرات یک صفحه html (یا اگر از CMS استفاده می کنید در php) ایجاد کنید.

یک div کانتینر والد در داخل بدنه ایجاد کنید:

در داخل این ظرف می توانید هر محتوایی را اضافه کنید.

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

بلوک اطلاعات شماره 1

بلوک اطلاعات شماره 2

بلوک اطلاعات شماره 3

در اینجا محتوای اصلی است.

حال، برای اینکه به این ستون فقرات کمی رنگ بدهیم، اجازه دهید چند سبک اصلی CSS اضافه کنیم (شما می توانید این کار را با یک افزونه جداگانه انجام دهید). فایل cssسبک ها، یا این سبک ها را در تگ قرار دهیددر قسمت سر).

ایجاد و یک ظاهر طراحی شده Flexbox

خلق كردن فلکس باکس، باید یک خاصیت نمایش برای آن تعریف کنیم ظرف مورد نظر. در مثال ما، این ویژگی برای عنصر والد است:

محتوا (نمایش: انعطاف پذیر؛ )

این مرحله یک flexbox در سطح بلوک ایجاد می کند. روش دیگر (اگر می خواهید سبک های درون خطی را اعمال کنید) می توانید به جای flex از inline-flex استفاده کنید.

حالا بیایید یک استایل CSS اضافه کنیم تا flexbox جدید ایجاد شده خود را آزمایش کنیم.

سبک هایی برای پاسخگویی

ویژگی‌های زیادی وجود دارد که می‌توانیم در flexbox فعال کنیم تا یک طرح‌بندی واکنش‌گرا ایجاد کنیم.

برای قرار دادن اقلام flex به ترتیب مناسب، فقط ویژگی order و مختصر خاصیت flex را اضافه کنید.

Blok (سفارش: 1؛ انعطاف: 1 1 30%؛ ) مقاله ( سفارش: 2؛ انعطاف: 1 1 خودکار؛ )

در ابتدا ممکن است همه اینها کمی دشوار به نظر برسد، اما تمرین همه چیز را در جای خود قرار می دهد.

ویژگی order یک عدد ارسال می‌شود تا به مرورگر بگوید کدام مورد انعطاف‌پذیر را قبل از دیگران نمایش دهد. برای سفارش شماره 1 ابتدا عنصر flex نشان داده می شود. برای 2 - دوم، برای 3 - سوم، و غیره.

می توانید از اعداد منفی نیز استفاده کنید. اگر در حین چیدمان ناگهان متوجه شدید که باید یک عنصر flex را قبل از اولین عنصری که قبلاً قرار داده شده است اضافه کنید، می توانید ویژگی order عنصر flex جدید را روی -1 تنظیم کنید. .

مختصر فلکس از سه ویژگی تشکیل شده است:

• flex-grow - تعیین می کند که ظرف چه مقدار از فضای آزاد را در رابطه با سایر ظروف می تواند بگیرد. فقط می تواند یک عدد مثبت باشد
• flex-shrink خاصیتی است که ضریب انقباض عنصر flex را مشخص می کند. موارد فلکس ظرف را با مقدار flex-shrink پر می‌کنند که عرض پیش‌فرض اقلام فلکس از ظرف انعطاف‌پذیر بیشتر باشد. اعداد منفی هیچ تاثیری ندارند
• flex-basis - اندازه اولیه یک آیتم فلکس قبل از اعمال هر اندازه فلکس و قبل از اشغال فضای آزاد یا عدم وجود فضای کافی. را می توان بر حسب پیکسل یا درصد مشخص کرد

چند توضیح برای ورود کوتاهخواص:

• flex: fillestar یا flex: 0 1 auto - این تنظیم اندازه عنصر flex را نسبت به محتوایی که در داخل آن است می‌سازد. اگر محتوا زیاد باشد افزایش می یابد و اگر محتوا زیاد نباشد کاهش می یابد.
• flex: auto یا flex: 1 1 auto - هر یک از این گزینه ها به عنصر flex اجازه می دهد تا در صورت نیاز کوچک شده و رشد کند تا متناسب با هر اندازه صفحه نمایش باشد.
• flex: none یا flex: 0 0 auto - این انعطاف پذیری اندازه را غیرفعال می کند و اندازه مورد انعطاف پذیر را ثابت می کند و برای کاربر در هر اندازه صفحه نمایش قابل تنظیم نیست.
• اندازه فلکس نسبی با فلکس: 1 % px. یک عدد مثبت ابتدا مقدار فضای خالی را که یک آیتم انعطاف پذیر نسبت به سایر اقلام فلکس اشغال می کند را تعیین می کند. عدد دوم به شما امکان می دهد اندازه عنصر را در صفحه های کوچکتر کاهش دهید. مقدار سوم در پیکسل (یا درصد) اندازه اولیه مورد فلکس را تعیین می‌کند، اما توجه داشته باشید که این مقدار ویژگی flex-basis را نیز غیرفعال می‌کند، به این معنی که این اندازه اولیه تضمین نمی‌شود. اگر فضای کافی برای نمایش این اندازه اولیه وجود داشته باشد، نمایش داده می شود، اما اگر فضای کافی وجود نداشته باشد، نمایش داده نمی شود. این امر به ویژه در صورتی صادق است که ترتیب نمایش عنصر در لیست پایین‌تر باشد و سایر عناصر قبلی که بالاتر از ترتیب قرار دارند، بیشتر فضا را اشغال کنند. نمونه ای از این تنظیم می تواند انعطاف پذیر باشد: 2 1 0% .

برای اینکه هر یک از این گزینه ها کار کند، ابتدا باید اندازه فلکس باکس را با ارتفاع و عرض تنظیم کنید.

بر اساس مثال سبک CSS در بالا، در اینجا ممکن است به نظر برسد: سبک های cssبرای فلکس باکس با اندازه اضافه شده:

محتوا (نمایش: انعطاف پذیر، عرض: 75٪، ارتفاع: 450 پیکسل، )

با این سبک ها، تمام موارد انعطاف پذیر در مثال در یک خط نمایش داده می شوند. از آنجایی که می‌خواهم آیتم‌های flex را در یک ردیف و محتوای اصلی را در زیر آن‌ها نمایش دهم، باید ویژگی flex-flow را اضافه کنم و مقدار آن را طوری تنظیم کنم که محتوا را در ردیف‌ها قرار دهد.

برای انجام این تنظیمات، باید این ویژگی را به ظرف flexbox اضافه کنم:

محتوا (نمایش: انعطاف‌پذیر؛ جریان انعطاف‌پذیر: بسته‌بندی ردیف؛ /* موارد انعطاف‌پذیر یک ردیف (ردیف) را پر می‌کنند */ عرض: 75%؛ ارتفاع: 450 پیکسل؛ )

هنگامی که یک یا چند آیتم فلکس تمام طول فلکس باکس را اشغال می کند، بقیه موارد فلکس بعد از آنها به خط جدیدی منتقل می شوند.

حالا برای اینکه کم و بیش بفهمیم یک بلوک کجاست و چه ابعادی دارد، اجازه دهید چند استایل اضافی اضافه کنیم. همچنین، ما تمام محتوای متن را در یک تگ p قرار دادیم و چند سبک به این تگ اضافه کردیم:

بلوک اطلاعات شماره 1

بلوک اطلاعات شماره 2

بلوک اطلاعات شماره 3

در اینجا محتوای اصلی است.

سبک های CSS:

محتوا (نمایش: انعطاف‌پذیر؛ جریان انعطاف‌پذیر: بسته‌بندی ردیف؛ /* موارد انعطاف‌پذیر ردیف را پر می‌کنند (ردیف) */ عرض: 75٪؛ ارتفاع: 450 پیکسل؛ حاشیه: خودکار؛ رنگ پس‌زمینه: #333؛ .blok (سفارش : 1؛ فلکس: 1 1 30%؛ رنگ پس‌زمینه: #cccc؛ حاشیه: 5 پیکسل؛ ) مقاله (سفارش: 2؛ انعطاف: 1 1 خودکار؛ رنگ پس‌زمینه: #bbb؛ حاشیه: 5 پیکسل توپر #333؛ بالشتک: 7px؛ ) p (رنگ: #fff؛ بالشتک: 15 پیکسل؛ اندازه قلم: 22 پیکسل؛ )

و فراموش نکنید که اگر تصمیم دارید یک ویژگی min-width را به موارد flexbox یا flex اضافه کنید، ممکن است باعث شود flexbox به درستی کار نکند. همچنین برای پاسخگویی طراحی بهتر است از عرض ظرف اصلی با استفاده از درصد استفاده شود. اگر مقادیر پیکسل سخت را تنظیم کنید، پاسخگویی برای صفحه نمایش های کوچک کار نمی کند.

در زیر یک نسخه نمایشی از نتیجه نهایی است:

سعی کنید با سبک های مختلف بازی کنید تا درک بهتری از نحوه عملکرد فلکس باکس در عمل داشته باشید.