0

سبد خرید شما خالی است.

طراحی سایت در اصفهان, سئو سایت اصفهان, ساخت سایت اصفهان, طراحی حرفه ای سایت اصفهان, بهینه سازی سایت , بازاریابی و تبلیغات اینترنتی 09133886881 احمدپور

صفحات واکنش گرا با FlexBox و خاصیت Flex Container

نویسنده پشتیبانی وب یار
امتیاز مطلب
تعداد بازدید 334
تاریخ بروزرسانی 15 آوریل 2018

صفحات واکنش گرا با FlexBox و خاصیت Flex Container

امروز با یه مبحث برای طرح بندی المنت ها با نام Flex Box در خدمت شما هستم,یکی از موارد که باید برای المنت ها انجام بدهیم طرح بندی اونهاست,برای طرح بندی یا همون layout از مدل های مختلفی از قبیل display ، margin: auto، max-width ، position ، float ، clear ، media query استفاده میکنیم,اماخب امروز میخوایم با مبحث Flex Box که یه مدل طرح بندی محتوا است که نسبت به سایر خصوصیات طرح بندی جدید تر است همراه شما باشیم.
Flexbox یک مدل طرح بندی محتواست که در CSS3 معرفی شد و هدف آن چیدمان و تراز بندی آسان آیتم هایی درون یک container است که اندازه ی آنها نامشخص می باشد. مدل Flexbox همانطور که از نامش پیداست برای طرح بندی آیتم هایی پویا و انعطاف پذیر به‌وجود آمده است.

طراحی ریسپانسیو با flexbox و خصوصیات flexcontainer

طراحی ریسپانسیو با flexbox و خصوصیات flexcontainer

Flexbox

هدف از Flexbox چیدمان و درست قرار دادان و تراز کردن آیتم ها درون یک container است ,که اندازه ی آن دقیقا مشخص نیست اما خب خیلی واضحه اگر کمی به نام Flexbox دقت کنید,این خصوصیت برای طرح بندی و آیتم های پویا و انعطاف پذیر است.اما در میان خصوصیت هایی که همیشه به display نسبت میدادیم ,خاصیت display: box بوده است, که جدید تر آن که امروز میخوام درباره آن صحبت کنم, display: flexاست . یکی از مزایایflex box پشتیبانی اکثر مرورگرها از آن است.

قابلیت مهم Flexbox:

Flex box در واقع یک ماژول یا مجموعه ای از دستورات Property ها است,که با استفاده از property های آن میتوان Layout هایی قابل انعطاف ایجاد کرد.مهم ترین قابلیت Flex box که مورد محبوبیت قرار گرفته است این است که با استفاده از آن میتوان طرح هایی واکنش گرا responsive ایجاد کرد.

دستورات و خاصیت های Flexbox:

زمانی که از کد display: flex استفاده میکینیم,آن المنت بهflex container و بچه هایش به flex items تبدیل میشوند. خاصیت(property) هایی برای flex container و خاصیت هایی برای flex items وجود دارد.که یک به یک با آن ها آشنا میشویم.

در ادامه این مطلب با خاصیت های flex container با ما همراه باشید,و در جلسه ی آینده خاصیت های مربوط به flex items برای شما آموزش داده میشود,پس با مطالب مفید د رخصووص ریسپانسیو کردن و انعطاف پذیر کردن صفحات وب سایتتان با ما همراه باشید.

Flexbox فلکس باکس یک سری خاصیت ها مهم و جدیدی دارد که این خاصیت ها همانطور که در ابتدای مطلب گفتم هم برروی flex container و هم برروی flex items تاثیر میگذارد,و لی توجه کنید که هیچ کدام از این دو مورد بر روی هم تاثیر نمیگذارند.

 

خاصیت های Flex Container

برای اینکه یک المنت به flex container  و بچه هایش به flex item تبدیل شوند باید به المنت مورد نظر display:flex; یاdisplay: inline-flex; بدهیم.

.container {

  display: flex; /* or inline-flex */

}

 خاصیت flex-direction:

خاصیت flex-direction نحوه ی قرار گرفتن flex item هارا به صورت ستونی و یا ردیفی تعیین میکند. این خاصیت چهار مقدار میگیرد.

.container {

  flex-direction: row | row-reverse | column | column-reverse;

}

 

  •  row:مقدار پیشفرض فلکس آیتم ها را به صورت ردیفی در کنار هم قرار میدهد. اگر direction  صفحه rtl  باشد، فلکس
  • آیتم ها از راست به چپ و در غیر اینصورت از چپ به راست در کنار همدیگر قرار میگیرند.
  • row-reverse: این مقدار مانند مقدار row هست با این تفاوت که چیدمان فلکس ایتم هارا معکوس میکند. اگر direction صفحه rtl باشد، فلکس آیتم ها از چپ به راست در کنار هم قرار میگیرند و در غیر اینصورت فلکس آیتم ها از راست به چپ قرار میگیرند.
  • column : با این مقدار فلکس آیتم ها به صورت ستونی و از بالا به پایین در کنار هم قرار میگیرند.
  • column-reverse : با این مقدار فلکس آیتم ها از پایین به بالا در کنار هم قرار میدهد.

خاصیتflex-warp

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

.container{

  flex-wrap: nowrap | wrap | wrap-reverse;

}

  •  nowrap: پیشفرض آیتم ها در یک خط و در کنار هم قرار میگیرند.
  •  wrap آیتم ها در چند خط  قرار میگیرند. در صفحات rtl از راست به چپ و در صفحات ltr از چپ به راست قرار میگیرند.
  • wrap-reverseاین مقدار معکوس مقدار wrap است.

 خاصیت flex-flow:

میتوانید دو مقدار flex-direction و flex-wrap را با استفاده از این مقدار تنظیم کنید. مقدار پیشفرض آن row nowrap است.

flex-flow: <flex-direction> || <flex-wrap>

خاصیت justify-content:

.container {

  justify-content: flex-start | flex-end | center | space-between | space-around;

}

  •  flex-start:پیشفرض آیتم ها در آغاز flex line قرار میگیرند.
  • flex-end: آیتم ها در پایان flex-line قرار میگیرند.
  • center :آیتم ها در وسط flex line قرار میگیرند.
  • space-between: آیتم اول در ابتدا و آیتم آخر در انتهای flex line قرار میگیرند و بقیه آیتم ها در بین آنها با یک فاصله ی برابر قرار میگیرند.
  • space-around:آیتم ها با فضای برابر در کنار یکدیگر قرار میگیرند.

 خاصیت align-items:

این خاصیت نحوه چینش فلکس‌آیتم هارا در محور عرضی(cross axis) مشخص میکند. این خاصیت مانند justify-content است تنها تفاوت آنها در مقادیرشان است.

.container {

  align-items: flex-start | flex-end | center | baseline | stretch;

}

 

  •  flex-start: آیتم‌ها در نقطه شروع عرضی(cross start) قرار میگیرند.
  • flex-end: آیتم ها در نقطه اتمام عرضی (cross end) قرار میگیرند.
  • center: آیتم ها در وسط flex line قرار میگیرند.
  • baseline: آیتم ها با توجه به خط هایشان هم‌تراز میشوند.
  • stretch: (پیشفرض) در صورتی که ارتفاع(height) آیتم‌ها مشخص نشده باشد، آیتم ها کشیده میشوند و flex line را پر میکنند.

 خاصیت align-content:

این خاصیت هنگامی که flex container دارای فضای بیشتر از flex line هاست، میتواند نحوه ی چینش آنها را تعیین کنید. مقادیر خاصیتalign-content برابر مقادیر خاصیت justify-content میباشد. تنها align-content یک مقدار بیشتر از justify-align دارد.

.container {

  align-content: flex-start | flex-end | center | space-between | space-around | stretch;

}

  •  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 ها کشیده میشوند و فضای خالی را پر میکنند.

این بود آموزش ساخت صفحات ریسپانسیو با استفاده از فلکس باکس flex box و استفاده از خصوصیات flex container

مطالب مرتبط
دریافت ساب اسکرایب get free subscribe
مطالعه :

در روش آموزش دریافت subscribe YouTube ساب اسکرایب رایگان یوتیوب ابتدا در پنل زیر عضو میشوید و با کلیک بروی گزینه پنل رایگان ساب اسکرایب یوتیوب های خود را دریافت می کنید.   آموزش دریافت ممبر کانال یوتیوب و subscribe YouTube ساب اسکرایب رایگان یوتیوب free subscribe افزایش ساب اسکرایب دریافت ساب اسکرایب ساب اسکرایب رایگان آموزش دریافت ساب اسکرایب دریافت subscribe youtube آموزش دریافت ساب اسکرایب رایگان آموزش دریافت subscribe ازسایت youtube ساب اسکرایب یوتیوب subscribe youtube free subscribe youtube get subscribe youtube site get youtube subscribe pannel افزایش subscribe یوتیوب فروش subscribe youtube خرید ساب اسکرایب یوتیوب خرید subscribe youtube subscribe youtube رایگان طبق فیلم آموزشی جلو بروید.     YouTube یکی از وب سایت های می باشد برای کسب درآمد می توان در آن ویدئو ها را آپلود کنید. با آپلود ویدئو ها در سایت یوتیوب ، یوتیوب در میان ویدئو های شما تبلیغاتی را به نمایش می‌گذارد که این امر باعث افزایش درآمد شما به دلار می‌شود. یوتیوب در ازای هر ویدئو می‌تواند به شما بین یک تا چند هزار دلار پرداخت کند. این امر بستگی به تعداد بازدید ها و سابسکرایب های شما دارد. برای آن که درآمد خوبی از یوتیوب داشته باشید بهتر است برای هر ویدیو یک تصویر یا تامنیل زیبا انتخاب کنید. برای ساختن تامنیل های زیبا در محیط فتوشاپ و نرم […]

آموزش رشد و موفقیت در مشاغل اینترنتی
مطالعه :

سلام با آموزش رشد و موفقیت در مشاغل اینترنتی از توانایی های خودتون در کنار شما هستم. لطفا با حوصله این آموزش کسب درآمد با ارزش و رایگان را تا آخرش بخونین و حتما یاداشت برداری کنین .     همیشه دوست داریم که کار کم استرس، کم فشار، کم خطر و پر درآمد داشته باشیم یا حتی بعد از این همه سال دیگه خیلی کم کار نکنیم و یا اگر کار می کنیم با توجه به این وضعیت اقتصادی برای خودمون کار کنیم و پول زحماتی که میکشیم تو جیب خودمون بره، ! که این طرز فکر اگر درست برداشت نشه کاملا اشتباه ، چون موفقیت تو کار گروهی یا به اصطلاح تیم ورک هستش . دلیلش را بعدا بهتون میگم بریم سراغ ادامه آموزش. لقمه آماده پول ساز دوره آموزش قدم به قدم رشد و کسب درآمد ! خیلی فکر کردم به برخی از مشتریان سال‌های اخیرم، به حرف هایی که میزدن.. وقتی موفقیت دیگران را در کسب درآمد از اینترنت میدیدند با اینکه همیشه باهاش مخالف بودن میان و درخواست یک سایت کامل و آماده که لینک یک گوگل باشه و از فرداش پر مشتری باشه یا به اصطلاح لقمه آماده پول ساز می کنند. 😉 این افراد مایلن لقمه آماده بزارم دهنشون و میدونن چون برای این کار زحمت نکشیدند و جرء اهدافشون نبوده و براش […]

serial-licens-Windows-10-pro-retail
مطالعه :

فروش سریال نامبر ویندوز ده پرو Windows 10 Pro Retail لایسنس ویندوز ۱۰ نسخه اورجینالفروش لایسنس ویندوز ۱۰ اورجینال،  آخرین محصول ویندوز از شرکت مایکروسافت فقط 900 هزار تومان

نمایشگاه ایران پلاستیک
مطالعه :

دانلود لیست شرکت کنندگان نمایشگاه پلاستیک ایران پلاست شامل اطلاعات دانلود لیست صنایع پلاستیک نام مدیر نام شرکت شماره موبایل آدرس سایت ایمیل موبایل نماینده

فروش دامنه
مطالعه :

خرید و فروش دامنه زیبا برای راه اندازی سایت و فروشگاه اینترنتی یکی از خدمات با ارزش مجموعه وب یار است که کار راه اندازی سایت و انتخاب نام دامنه را بسیار راحت تر کرده و مدیران سایت با خرید و فروش دامنه به راحتی میتوانند دامنه با ارزش مد نظر خود را خرید کنند. همیشه داشتن نام دامنه زیبا در بازدید کننده تاثیر مثبت می گذارد. مثلاً اگر شما اسم سایتتون web-yar-net ir باشه خیلی فرق میکنه تا اینکه نام سایتتون WEBYAR.NET کوتاه و زیبا باشه . تعداد حروف و کاراکتر ها، معنی کلمات، و هماهنگی آهنگ اسم دامنه تاثیر بسیار زیادی بر روی خود سایت و کاربران سایت و برندینگ سایت دارد. وقتی نام سایت زیبا باشد کاربران سایت به راحتی اون رو به خاطر می سپارند ولی وقتی نام دامنه طولانی باشدیا  بی معنی باشد یا از حروف مختصر بی معنی طولانی تشکیل شده باشد. به سختی می شوند جستجو کرد یا آن را به حافظه سپرد مگر اینکه از تعداد حروف خیلی کمی درست شده باشد . مثلا فروش دامنه 3 حرفی تا به راحتی بشود ان را در ذهن سپرد. وقتی سایتی نام دامنه بسیار با ارزشی دارد، ان برند و ان سایت خود به خود با ارزش و قوی به حساب میاد .پس حتماً دامنه ای زیبا برای سایتتون انتخاب کنید و در خرید […]

سئو فروشگاه اینترنتی
مطالعه : 8 دقیقه

 اصول بهینه سازی فروشگاه اینترنتی سئو سایت فروشگاهی سئو سایت و بهینه سازی سایت بر اساس اصول استاندارد و سئو شده یکی از مهم ترین مراحل طراحی سایت است.اما سئو فروشگاه اینترنتی و اصول بهینه سازی فروشگاه اینترنتی نیز برای افزایش فروش و درآمد مشتریان به شدت حائز اهمیت می باشد . دارندگان فروشگاه های اینترنتی مهم ترین هدفی که از راه اندازی فروشگاه های اینترنتی دارند سوق دادن مشتریانشان به سمت فروشگاه اینترنتی و خرید مشتریانشان از سایتشان می باشد، به همین دلیل سئو سایت فروشگاهی از سئو کد نویسی سئو کانتنت گرفته تا سئو یوزر فرندلی (کاربر پسندانه بودن ظاهر سایت) سئو اکسترنال و دیگر مراحل سئو حائز اهمیت میباشد.     بهینه سازی یا سئو یکی از مهمترین موضوعات قابل توجه برای طراحی سایت فروشگاهی می باشد ، اما اصول بهینه سازی فروشگاه اینترنتی آن قدر حائز اهمیت است که فروشگاه اینترنتی شما را دچار رکود یا سقوط میکند، در حالی که در بسیاری از فروشگاه های مبتنی بر وب نادیده گرفته می شود. سئو فروشگاه اینترنتی می تواند ترافیک بیشتری را برای شما به ارمغان آورد ، بنابراین لازم نیست شما تنها بر تبلیغات و لینک ها تمرکز کنید. با انجام تکنیک های عمومی بهینه سازی می توانید تا حدودی به سطحی از سئو دست یابید و جایگاه فروشگاه خود را در نتایج جستجو ارتقاء دهید و […]

دیدگاه ها

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *