طرح بندی های CSS flexbox را بررسی و اشکال زدایی کنید

جسلین ین

این راهنما به شما نشان می‌دهد که چگونه عناصر flexbox را در یک صفحه کشف کنید، همچنین طرح‌بندی‌های flexbox را در پانل Elements بررسی و اصلاح کنید.

تصاویر نمایش داده شده در این مقاله از این صفحه وب هستند: وسط یک عنصر متنی با Flexbox .

CSS flexbox را کشف کنید

هنگامی که یک عنصر HTML در صفحه شما دارای display: flex یا display: inline-flex روی آن اعمال می شود، می توانید یک نشان flex را در کنار آن در پانل Elements مشاهده کنید.

فلکس باکس را کشف کنید

طرح بندی ها را با ویرایشگر flexbox تغییر دهید

با ویرایشگر flexbox می توانید طرح بندی های flexbox را به صورت بصری تغییر دهید. به عنوان مثال، در اینجا نحوه قرار دادن متن <h1> این صفحه نمایشی در محفظه آن <div class="container"> آمده است.

  1. عنصر ظرف را بررسی کنید .
  2. در قسمت Styles ، می‌توانید دکمه ویرایشگر flexbox را در کنار display: flex Declaration. دکمه ویرایشگر flexbox
  3. روی آن کلیک کنید تا ویرایشگر flexbox باز شود. ویرایشگر لیستی از ویژگی های flexbox را نمایش می دهد. گزینه های ارزش هر ویژگی به صورت دکمه های نماد نمایش داده می شوند. ویرایشگر flexbox
  4. برای وسط متن روی صفحه، می‌توانید روی دکمه‌های justify-content: center و align-items: center کلیک کنید. متن را در محفظه خود وسط قرار دهید
  5. اکنون متن در مرکز قرار دارد. به justify-content: center و align-items: center در قسمت Styles اضافه می شوند.

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

می‌توانید ماوس را روی عنصر flexbox در پانل Elements نگه دارید تا طرح‌بندی را تجسم کنید. روکش روی عنصر ظاهر می شود، با خطوط نقطه چین برای نشان دادن موقعیت محتوا و موارد آن.

ماوس را روی یک عنصر flexbox نگه دارید

همچنین، می‌توانید روی نشان کلیک کنید تا نمایش همپوشانی flexbox را تغییر دهید.

justify-content را به flex-end تغییر دهید

سعی کنید مقدار را به justify-content: flex-end . روکش بر این اساس تغییر می کند.

justify-content: flex-end

نمادهای موجود در ویرایشگر flex از متن آگاه هستند. با توجه به جهت طرح تغییر خواهد کرد. به عنوان مثال، هنگامی که flex-direction به column تغییر می دهید، نمادهای موجود در ویرایشگر flex بر این اساس چرخانده می شوند. پوشش نیز بلافاصله به روز می شود.

رنگ پوشش فلکس باکس را تنظیم کنید

پنجره Layout را باز کنید و به قسمت Flexbox بروید. می توانید تمام عناصر flexbox صفحه را در اینجا مشاهده کنید.

صفحه چیدمان

می توانید همپوشانی هر عنصر flexbox را با چک باکس کنار آن تغییر دهید. همانطور که روی badge در درخت DOM کلیک می کنید.

جدا از آن، می توانید با کلیک بر روی نماد رنگ کنار آن، رنگ همپوشانی را تغییر دهید. به عنوان مثال، رنگ پوشش container به مشکی تغییر یافته است.

تغییر رنگ پوشش

برای رفتن به یک عنصر flexbox در درخت DOM، می‌توانید روی نماد انتخابگر کنار آن کلیک کنید.