هک و امنیت هک و امنیت | flexbox در css

[Vana~]

چیست ؟
FlexBox عنوانی اختصاری و برگرفته از Flexible Box یا جعبه‌ی منعطف است. به این معنی که آیتم‌ ها ( تگ های html ) با هر اندازه‌ ای می‌ توانند درون آن، جا بگیرند.

ماژول flexbox یا همان ویژگی flex یکی از موار بسیار کاربردی است که بعد از مشکلات فراوان در چینش المان ها در ورژن های قبلی CSS به ورژن CSS3 اضافه شد. همانطور که در مقالات قبلی CSS توضیح داده شده قبل از روی کار آمادن flexbox از ویژگی float برای چینش المان ها در کنار هم استفاده می شد که با افزایش تعداد المان ها مخصوصا تگ های تودرتو کار با ویژگی float نیز سخت می شد.

در واقع FlexBox در طراحی‌ صفحات واکنش‌گرا یا همان Responsive کارایی زیادی دارد، چرا که با چیدن آیتم‌ ها (Flex Item) درون یک سطر یا ستون در قالب نگه‌...

لطفا برای مشاهده کامل مطالب در انجمن ثبت نام کنید.

 

[Vana~]

شیوه کار با display flex در css
در مقالات قبل در مورد display block و display inline صحبت کردیم. display Felx توانایی های پیچیده تر و بیشتری نسبت به این دو ویژگی داشته و می‌تواند عناصر موجود در صفحه وب را با بدون هیچ دردرسری در کنار هم قرار دهد. طراحی ریسپانسیو با flexbox خیلی ساده تر خواهد شد.

برای استفاده از flexbox، باید به عنصر پدری که سایر عناصر را در خود جای داده مثلا تگ div، دستور display:flex اختصاص بدهیم. با اختصاص دادن این دستور CSS دست ما برای استفاده از مقادیر مرتبط با ویژگی display flex باز شده و امکان چدیمان صفحه آرایی حرفه ای صفحات وب در اختیار ما قرار می گیرد.

برای درک بهتر ماجرا به مثال زیر توجه کنید.

نکته: در مثال های زیر ما برای انتقال سریع تر و همچنین در...

لطفا برای مشاهده کامل مطالب در انجمن ثبت نام کنید.

 

[Vana~]

همانطور که می بینید، در کد های فوق چهار تگ div داریم که به علت بلاکی بودن تگ ها، هر چهار تگ زیر هم قرار گرفته اند. برای تغییر آرایش و صفحه آرایی این عناصر چه کنیم؟

برای این کار کافی است به کد های css خود یک Display:felx اضافه کنید. اما کجا؟ سوال مهم اینجاست. مقداری display flex را باید برای عنصر والد یا پدر در نظر گرفت. البته به این عنصر عنصر نگهدارنده یا container نیز گفته می شود.

در مثال بالا تگ div با کلاس container همان تگ والدی است که چهار تگ دیگر را در دل خود جای داده است. بنابراین اگر در کد های css فوق که در تگ style نوشته شده کد زیر را اضافه کنید حالت زیر اتفاق می افتد.

همانطور که می بینید، عناصر داخلی، برخلاف block بودنشان، inline رفتار کرده و در راستای یک خط یا...

لطفا برای مشاهده کامل مطالب در انجمن ثبت نام کنید.

 

[Vana~]

مقادیر row و row-reverse هم به شکل همین مثال عمل می کنند، اما در راستای سطر.

اگر هنوز html , css را به طور کامل بلد نیستید و میخواهید یک وبمستر حرفه ای بشید و به راحتی تمام امور یک سایت را مدیریت کنید میتوانید در دوره آموزش وبمستر آریا تهران شرکت کنید. در این دوره html , css , javascript و سئو و نحوه کار با ابزار های تخصصی سئو مانند سرچ کنسول و گوگل آنالیتیکس به شما آموزش داده میشود و تمام این آموزش ها متناسب با نیاز بازار کار میباشد. شما در انتهای این دره میتوانید با مهارت های کسب شده خود به راحتی جذب بازار کار شده و به عنوان یک وبمستر کسب درآمد چندین برابری داشته باشید. استخدام شدن شما با مهارت های کسب شده این دوره جامع قطعی میباشد.

justify-content در css
زمانی که...

لطفا برای مشاهده کامل مطالب در انجمن ثبت نام کنید.

 

[Vana~]

در کد پایین با استفاده از دستور display: flex و در ادامه دستور justify-content: flex-start به عناصر فرزند فرمان داده شده که با همان ترتیبی که در کد HTML آمده در ابتدای فضای متعلق به عنصر پدر قرار بگیرند.

منظور از ابتدای عنصر پدر، نقطه‌ ای است که محتوا از آنجا شروع به تولید شدن می‌کند. به عبارتی دیگر، وقتی در یه صفحه، جهت نوشتار ما چپ چین باشد، تولید محتوا از سمت چپ شروع می شود و در صورت راست چین بودن، برعکس این اتفاق می افتد.
برای کسب اطلاعات بیشتر در مورد جهت نوشتاری صفحه حتما مقاله ویژگی direction را مطالعه کنید تا در مورد مقادیر RTL (راست به چپ) و LTR (چپ به راست) اطلاعات بیشتری کسب کنید.

justify-content: flex-end
این مقدار کاملا شبیه به مقدار flex-start است، منتهی به...

لطفا برای مشاهده کامل مطالب در انجمن ثبت نام کنید.