جلسه ۴۱ – طبقه بندی به روش flexbox

مقاله جامع آشنایی با Flexbox

آموزش جامع flexbox
آموزش جامع flexbox

Flexbox چیست؟ فلکس باکس چیست؟ در این مقاله می‌خواهیم به آموزش کامل Flexbox بپردازیم و به مقایسه فلکس باکس و گرید می‌پردازیم.

flexbox، توانایی های پیچیده تر و بیشتری از inline‌ و block داره و می‌تونه عناصر موجود در صفحه وب رو به راحتی پشت سر هم بچینه.

برای استفاده از flexbox، باید به عنصر پدری که عناصر رو در می‌گیره، دستور display:flex اختصاص بدیم. طراحی ریسپانسیو با flexbox خیلی ساده تر خواهد شد.

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

مقدار flex

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

کد های flexbox

<div id="parent">
   <div id="div1"></div>
   <div id="div2"></div>
   <div id="div3"></div>
   <div id="div4"></div>
</div>
#parent{
   display:flex;
}

#parent div{
   width:100px;
   height:100px;
   margin:10px;
}

#div1{
   background-color:red;
}

#div2{
   background-color:green;
}

#div3{
   background-color:blue;
}

#div4{
   background-color:orange;
}

همونطور که میبینیم، ۴ عنصر div داریم که داخل یه عنصر div پدر جا داده شدن.

برای اینکه بین عناصر داخلی، طبقه بندی flexbox رو برقرار کنیم، display:flex رو به عنصر پدرشون اختصاص دادیم.

هرکدوم از عناصر داخلی، رنگ متفاوتی دارن و برای مجزا بودن، ۱۰ پیکسل از اطراف فاصله گرفتن.

نتیجه رو به فرم زیر مشاهده می‌کنیم:

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

پس اولین تاثیر display:flex، اینه که عناصر داخلی رو، هر چی هم که باشن، در راستای یک خط مرتب می‌کنه.

حالا چطور عناصر داخلی رو دلخواه مرتب کنیم؟ ستونیشون کنیم؟ از هم فاصلشون بدیم؟ تمام این مشکلات توسط دستوراتی که display:flex برای ما آزاد می‌کنه، حل می‌شن. درباره flex در ادامه بیشتر صحبت می‌کنیم.

دستورات مربوط به flexbox

در ادامه آموزش جامع فلکس باکس ،به  دستورات مربوط به فلکس باکس می‌پردازیم که عبارتند از:

  • flex-direction
  • justify-content
  • align-content
  • align-items
  • flex-wrap
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex-flow

با استفاده از این دستورات می‌توانیم به طراحی صفحه با flexbox نزدیک تر شویم.

خاصیت flex-direction

گفتیم که دستور display:flex یا ویژگی Flex ، عناصر فرزند رو در راستای یه خط مرتب می‌کنه. حال می‌خواهیم در رابطه با Flex direction در css صحبت کنیم. توسط این خاصیت می‌تونیم سطر رو به ستون تبدیل کنیم!

خاصیت مورد نظر، می‌تونه ۴ مقدار رو قبول کنه. این ۴ مقدار عبارتند از:

  • row: عناصر رو در راستای سطر قرار میده.
  • column: عناصر رو در راستای ستون قرار میده.
  • row-reverse: عناصر رو در راستای سطر، اما از انتها قرار میده.
  • column-reverse: عناصر رو در راستای ستون، اما از انتها قرار میده.

برای مثال، مقدار column و column-reverse رو با هم امتحان می‌کنیم. به کد زیر توجه کنین:

کد HTML:

<div id="parent">
   <div id="div1">1</div>
   <div id="div2">2</div>
   <div id="div3">3</div>
   <div id="div4">4</div>
</div>

کد CSS آموزش فلکس باکس :

#parent{
   display: flex;
   flex-direction: column;
}

#parent div{
   width:100px;
   height:100px;
   margin:10px;
   color:white;
} 

#div1{
   background-color:red;
}

#div2{
   background-color:green;
}

#div3{
   background-color:blue;
}

#div4{
   background-color:orange;
}

نتیجه یکی دیگر از فلکس باکس در سی اس اس :

دستور flex-direction: columnهمونطور که میبینیم، تونستیم عناصر فرزند رو در راستای ستونی توسط دستور flex-direction:column از ویژگی flexbox مرتب کنیم.
حالا کد CSS رو اینبار با flex-direction:column-reverse می‌نویسیم.

کد CSS:

#parent{
   display: flex;
   flex-direction: column-reverse;
}

نتیجه این مثال از ویژگی فلکس باکس به صورت زیر تغییر می‌کنه:

دستور flex-direction: column-reverseتوسط مقدار column-reverse تونستیم ترتیب عناصر فرزند رو کاملا وارونه کنیم.

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

خاصیت flex-grow

به مثال زیر که شبیه به مثال های قبله، یه نگاهی بندازین: ( Flex grow در css )

کد HTML آموزش Flexbox :

<div id="parent">
   <div id="div1">1</div>
   <div id="div2">2</div>
   <div id="div3">3</div>
   <div id="div4">4</div>
</div>

کد CSS:

#parent{
   display: flex;
   flex-direction: row;
}

#parent div{
   width:100px;
   height:100px;
   margin:10px;
   color:white;
}

#div1{
   background-color:red;
}

#div2{
   background-color:green;
}

#div3{
   background-color:blue;
}

#div4{
   background-color:orange;
}

تو نتیجه این کد، یه فضای خالی به وجود میاد که به فرم زیره:

فضای خالی آیتم های flexbox

به وجود اومدن چنین فضایی، چه در حالتی که جهت flex ما سطر و چه ستون باشه، کاملا طبیعیه و به دو دلیل به وجود میاد:

  • یا اندازه عنصر پدر رو خیلی بزرگ گرفتیم.
  • یا اندازه عناصر فرزند کوچیکه.

خب، خاصیت flex-grow اینجا به کمک ما میاد، به این صورت که با دادن این خاصیت به هر عنصر، می‌تونیم اونارو مجبور کنیم که این جای خالی رو پر کنن. حالا چطوری؟

این خاصیت، اعداد رو به عنوان مقادیر قبول می‌کنه و جای خالی ایجاد شده رو به عنوان عدد ۱ در نظر می‌گیره.

به عبارتی اگه به div دوم، دستور flex-grow:1 رو اختصاص بدیم، با چنین نتیجه ای طرف خواهیم بود:

کاربرد خاصیت flex-grow در پوشاندن فضا های خالیبنا بر این منطق، ما می‌تونیم جای خالی ایجاد شده رو توسط چند div هم پر کنیم، پس کد CSSای که چندی پیش نوشتیم رو در چند جا تغییر میدیم.

#div2{
   background-color:green;
   flex-grow:0.3;
}

#div3{
   background-color:blue;
   flex-grow:0.7;
}

نتیجه:

مفهوم خاصیت flex-grow

خاصیت flex-wrap

خاصیت Flex wrap در CSS به درد این می‌خوره که عناصر رو بین سطر ها و ستون های مختلف تقسیم کنه و اجازه نده همشون فقط تو یه سطر و ستون فشرده بشن.

فرض کنین تو مثال قبل، مجبور بشیم که تعداد عناصر فرزند رو بالا ببریم.

یا مجبور بشیم که عرض اون هارو زیاد کنیم، پس کد رو به شکل زیر تغییر می‌دیم:

#parent div{
   width:500px;
   height:100px;
   margin:10px;
   color:white;
}

نتیجه به شکل زیر درمیاد:

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

ما اگه عرض رو از ۵۰۰ پیکسل، به ۱۰۰۰ پیکسل هم برسونیم، باز همین نتیجه رو می‌گیریم و هیچ تغییری مشاهده نمی‌کنیم!

در اینجا ما از flex-wrap استفاده می‌‌کنیم، دستوری که باعث می‌شه عناصر رو در خطوط یا ستون های مجزا تقسیم کنیم.

این دستور ۳ مقدار رو قبول می‌کنه:

  • no-wrap: مقدار پیش فرضی که عناصر رو در یک خط یا ستون میچینه.
  • wrap: مقداری که عناصر رو، به ترتیب بین خطوط و ستون ها تقسیم می‌کنه.
  • wrap-reverse: مقداری که عناصر رو، بر خلاف ترتیب بین خطوط و ستون ها تقسیم می‌کنه.

حالا به عنصر پدر، دستور flex-wrap:wrap رو اضافه می‌کنیم.

#parent{
   display: flex;
   flex-direction: row;
flex-wrap: wrap;
}

نتیجه به فرم زیر تغییر می‌کنه:

تاثیر خاصیت flex-wrap بر چینش آیتم های flexحالا مقدار wrap-reverse رو بررسی می‌کنیم.

#parent{
   display: flex;
   flex-direction: row;
   flex-wrap: wrap-reverse;
}

نتیجه صفحه آرایی با فلکس باکس :

کاربرد دستور flex-wrap: wrap-reverseهمونطور که میبینیم، عناصر فرزند، به ترتیب معکوس چیده شدن.

خاصیت flex-shrink

خاصیت Flex shrink در css ، کاملا معکوس خاصیت flex-grow رفتار می‌کنه.

به این معنا که با کوچکتر شدن صفحه، عنصر فرزندی که دارای مقدار flex-shrink بیشتری هست، به نسبت بقیه عناصر فرزند، عرض کوچکتری رو به خودش می‌گیره.

خاصیت flex-flow

خاصیت flex flow در CSS ، خلاصه شده flex-direction و flex-wrap هست. توسط این خاصیت می‌تونیم دو کاربرد رو در یک دستور خلاصه کنیم.

برای استفاده از این دستور، کافیه مقدار flex-direction رو اول نوشته و بعد مقدار flex-wrap رو بنویسیم، به مثال زیر توجه کنین:

#parent{
   display: flex;
   flex-flow: row wrap;
}

و نتیجه دقیقا شبیه مثال خاصیت flex-wrap خواهد بود:

خاصیت flex-flow

خاصیت flex-basis

خاصیت flex basis در CSS ، اندازه و ابعاد یک آیتم flex رو مشخص می‌کنه.

از این خاصیت می‌تونیم به جای width، زمانی که جهت flex ما خطیه، و به جای height، زمانی که جهت flex ما ستونیه استفاده کنیم.

مقادیر مورد قبول این خاصیت عبارتند از:

  • auto: مقدار پیش فرض (ابعاد عنصر متناسب با محتوای آن خواهد بود)
  • مقدار عددی بر حسب واحد های نامتغیر
  • مقدار درصدی

تراز افقی با خاصیت justify-content

اگه بخوایم عناصر فرزند رو در راستای افقی، تراز کنیم، باید ازخاصیت justify-content در CSS استفاده کنیم.

مقادیر مورد قبول این خاصیت به ترتیب زیر هستن:

  • center: عناصر فرزند رو به وسط عنصر پدر میاره.

فرض کنیم که کد CSS مثال های قبل رو به فرم زیر تغییر بدیم:

#parent{
   display: flex;
   flex-direction: row;
   justify-content: center;
}

نتیجه این مثال از آموزش flexbox در css به فرم زیر مشاهده میشه:

کاربرد justify-content: centerدر اینجا میبینیم که طبق تعریف، عناصر فرزند به وسط عنصر پدر ( با عرض 100% ) هدایت شدن.

 

  • flex-start: عناصر فرزند رو به ابتدای عنصر پدر می‌بره.

حالا کد رو توسط این مقدار، تغییر میدیم تا ببینیم منظور از ابتدای عنصر پدر چیه؟

#parent{
   display: flex;
   flex-direction: row;
   justify-content: flex-start;
}

نتیجه این مثال از خاصیت flex در CSS :

justify-content: flex-startخب، میشه گفت منظور از ابتدای عنصر پدر، نقطه‌ و جهتی هست که محتوا از اونجا شروع به تولید شدن می‌کنه.

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

نکته: جهت تولید محتوا در یک صفحه،‌توسط خاصیت و دو مقدار زیر اتفاق میفته:

body{
direction: ltr;
}
/* --- یا --- */
body{
direction: rtl;
}

 

  • flex-end: عناصر فرزند رو به انتهای عنصر پدر می‌بره.

کاملا مشابه مقدار flex-start در فلکس باکس در CSS3 ، منتهی به صورت معکوس.

توضیح در مورد flexbox : بدین ترتیب که تولید محتوا از هرطرفی که باشه، توسط این مقدار، می‌تونیم برخلاف اون جهت تولید محتوا رو انجام بدیم.

justify-content: flex-end

 

  • space-between: متناسب با عرض عنصر پدر، عناصر رو تقسیم می‌کنه.

ساده بگیم، بدون دست زدن به عرض عناصر، به شکلی مرتبشون می‌کنه که تمام عرض عنصر پدر رو در بر بگیرن. نتیجه این مقدار رو در شکل زیر میبینیم:

justify-content: space-between

 

  • space-around: مشابه مقدار space-betweem، با این تفاوت که دور عناصر ابتدا و انتها فضا ایجاد می‌کنه.

با یک عملکرد مشابه space-between، و با این تفاوت که فاصله بین عناصر رو ملایم تر تنظیم می‌کنه و دور هرکدوم از اون‌ها یه فاصله ایجاد می‌کنه:

justify-content: space-around

اگه جایی از مثال ها رو متوجه نمی‌شید، حتما تو قسمت نظرات پایگاه دانش میزفا بپرسین تا کمکتون کنیم 🙂

تراز عمودی با خاصیت align-items

این خاصیت، کاملا شبیه به خاصیت justify-content اما در راستای محور عمودی هست.

نکته: این خاصیت تنها زمانی کار می‌کنه که عنصر پدر مورد نظر، دارای ارتفاعی بیشتر از ارتفاع عناصر فرزند خودش باشه.

مقادیر مورد قبول این خاصیت عباتند از:

  • center: محتوا رو در راستای ارتفاع عنصر پدر، وسط چین می‌کنه.

کافیه کد CSS عنصر پدر رو به فرم زیر تغییر بدیم:

#parent{
   display: flex;
   flex-direction: row;
   align-items: center;
   height: 500px;
}

نتیجه رو به فرم زیر مشاهده می‌کنیم:

align-items: center

  • flex-start: محتوا رو از بالای عنصر پدر تولید می‌کنه.

کافیه مقدار خاصیت align-items رو به flex-start تغییر بدیم:

#parent{
   display: flex;
   flex-direction: row;
   align-items: flex-start;
   height: 500px;
}

align-items: flex-start

  • flex-end: محتوا رو از پایین عنصر پدر تولید می‌کنه.
#parent{
   display: flex;
   flex-direction: row;
   align-items: flex-end;
   height: 500px;
}

align-items: flex-end

  • stretch: محتوا در راستای ارتفاع عنصر پدر، گسترش میده.

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

#parent{
   display: flex;
   flex-direction: row;
   align-items: stretch;
   height: 500px;
}

align-items: stretch

  • baseline: عناصر فرزند، در راستای خط مبدا خودشون تراز میشن.

برای استفاده از این مقدار، اول باید بدونیم که baseline یا خط مبدا به چه معنیه؟

این مفهوم تعریف دقیقی نداره، اما در یک تعریف ساده، به خطی اطلاق میشه که “زیر محتوای عنصر کشیده میشه”

بر اساس همین تعریف، کافیه که محتوای هر عنصر رو یکم تغییر بدیم و ببینیم که این مقدار چطور رفتار میکنه:

align-items: baseline

نکته بسیار مهم: اگه جهت flex رو به صورت column قرار بدیم، کاربرد justify-content و align-items باهم عوض می‌شه. خاصیت اول عناصر فرزند رو به صورت عمودی، و خاصیت دوم اون ها رو به صورت افقی تراز می‌کنه.

 

قبل از اینکه بریم سراغ بخش بعدی :‌ تا الان متوجه شدین که flexbox با جدول در css متفاوته دیگه نه ؟

تراز محتوا با خاصیت align-content

این خاصیت، مخلوطی از دو خاصیت align-items و justify-content هست و همزمان کمی با اون ها متفاوت رفتار می‌کنه.

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

  • center – سنتر
  • flex-start – فلکس استارت (شروع فلکس)
  • flex-end – فلکس اند (پایان فلکس)
  • stretch – استرچ
  • space-around – اسپیس اروند (فاصله از اطراف)
  • space-between – اسپیس بیت وین (فاصله از هم یا فاصله بین)

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

#parent{
   display: flex;
   flex-wrap: wrap;
   align-content: space-around;
   height: 500px;
}

نتیجه:

align-content: space-aroundو همونطور که انتظار داشتیم،‌ تونستیم مقدار space-around رو بین خطوط دربرگیرنده عناصر فرزند اعمال کنیم.

نکته: این خاصیت زمانی عمل می‌کنه که عناصر فرزند ما در بیشتر از یک خط چیده شده باشن.

نکته: خاصیت های align-items، justify-content و align-content با توجه به جهت flex عنصر پدر (flex-direction) رفتار می‌کنن. برای مثال، اگه عناصر flex ما در راستای ستونی باشن، خاصیت justify-content تراز دهی عمودی رو انجام می‌ده. دو خاصیت دیگه هم به این منوال تغییر می‌کنن.

پایان ترم

[box type=”info” class=”question-from-users” width=””]

سوال:

تو مثال زیر، با نوشتن چه کدی تو جای مشخص شده، می‌تونیم عناصر حاوی لینک رو به صورت زیر مرتب کنیم؟

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

 

36873

به ایمیل کسانی که پاسخ درست و کامل رو در نظرات بگن ۱۰ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه. (البته باید در آکادمی میزفا ثبت‌نام کنید تا بتونید از این امتیاز استفاده کنید.)

[/box]

نتیجه گیری

تو این مقاله آموزش css3 ، با خاصیت flex و خاصیت های کوچک تر مربوط به اون آشنا شدیم و یک جورایی آموزش کامل فلکس باکس را با همدیگه داشتیم، در این مقاله نشد که مقایسه Flexbox و Grid را بررسی کنیم ولی در یک مقاله جداگانه حتما این موضوع مهم را بررسی خواهیم کرد.

  • flex-direction: فلکس دایرکشن وظیفه مشخص کردن ترتیب قرارگیری عناصر flex را دارد
  • justify-content: جاستیفای کانتنت وظیفه تراز عناصر flex را دارد
  • align-content: الاین کانتنت وظیفه تراز خطوط حاوی عناصر flex را دارد
  • align-items: الاین آیتمز وظیفه تراز عناصر flex را دارد
  • flex-wrap: فلکس رپ (ورپ خونده نمیشه) وظیفه فرستادن عناصر flex به خطوط و ستون های بعد را دارد
  • flex-grow: فلکس گرو وظیفه تنظیم بیشترین حجم یک عنصر flex را دارد
  • flex-shrink: فلکس شرینک وظیفه تنظیم کمترین حجم یک عنصر flex را دارد
  • flex-basis: فلکس بیسیس وظیفه تنظیم ابعاد عناصر flex را دارد
  • flex-flow: فلکس فلو خاصیت کوتاه شده flex-direction و flex-wrap می‌باشد

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

مدیر و سئو محتوا: علی اسمعیلی

فیلم آموزشی asp.net core 2

نوید معدن نژاد
یک عدد دانشجوی مهندسی مکانیک، که راه رسیدن به رویاهاش رو تو علوم کامپیوتری پیدا می‌کنه و سعی می‌کنه هیچوقت از یادگیری دست نکشه!
آموزش CSS
پایین سرفصل های CSS هست، روی منم کلیک کنی میتونی ببینی.

فیلم آموزشی asp.net core 2

23 نظر

23 پاسخ

  1. Flexbox quiz

    #parent{
    height:500px;
    width:200px;
    background-color:#f4f4f4;
    box-shadow:0px 1px 5px #b8b8b8;
    display: flex;
    flex-flow: column wrap;
    align-items: center;
    justify-content: space-around;

    }

    #parent div{
    width:100px;
    height:50px;
    }

    #child{
    width:50px;
    height:50px;
    background-color:#5c5c5c;
    color:white;
    display:flex;
    justify-content:center;
    align-items:center;
    }

    if (document.location.search.match(/type=embed/gi)) {
    window.parent.postMessage(“resize”, “*”);
    }

    لینک اول
    لینک دوم
    لینک سوم
    لینک چهارم

  2. سلام استاد میخواستم یه سوال بپرسم من یه همچین چیزی رو با فلکس باکس طراحی کردم ولی یه چیزی خیلی اذیتم میکنه اونم تغییر فضای بین پست هاست زمانی که یه پست ارتفاعش تغییر میکنه توی تصویری که فرستادم واضح هست میخوام اون بخش سبز از بین بره نمیدونم چیکار کنم .میشه لطف کنید کمک کنید باید چیکار کنم!

    1. سلام فرهان. امیدوارم خوب باشی. ببین اصولا انجام اینطور کاری یه مقدار خارج از روال طبیعیه. اجازه بده من یکم راجبش مطالعه کنم ببینم چی دستگیرم میشه که بهت بگم. اما درکل خیلی کم این کار انجام میشه چرا که در این صورت انگار داری به یک پست خاص در صفحت ارزش بیشتری نسبت به بقیه پست ها میدی. خب برای اینکار میتونی به سادگی یه container جدا برای پست با ارزش تر طراحی کنی و برای پست های دیگه یک container دیگه، که در اون ارتفاعاتشون یکسانن (برای یکسان کردن ارتفاع میتونی با overflow یا حتی پیشرفته تر، جاوااسکریپت محتوای داخل پستت رو محدود کنی. مثلا اگه مثل عکسی که دادی زیاد بود، به سه نقطه منتهی شه که ارتفاعات همه یکسان باشه)

  3. سلام
    کد ها رو همونطور که گفتید داخل یه فایل زیپ گذاشتم و آپلود کردم

    1. سلام حسین. کد های کوییز این مقاله؟ چون چیزی آپلود نشده

      1. هر فرمتی جز زیپ میخوام آپلود کنم ارور میده، زیپ هم که کردم آپلود کردم گویا به دستتون نرسیده
        نمیدونم قوانین سایت اجازه میده لینک بدم به یه منبع دیگه یا نه ولی خب اینجا هم آپلود کردم: https://b2n.ir/r70327 (اگه می‌خواین مثل قدیم عکس بگیرم از کدا، چون خودتون گفته بودید فایلشو بفرستم سراغ این روشا رفتم)

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

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

  5. سلام خسته نباشید
    #parent div{
    width:100px;
    height:100px;
    margin:10px;
    }
    ببخشید من قسمت بالای اینو متوجه نمی شم یعنی بخشی که مربوط به آیدی یا کلاس دادن به عناصر فرزند میشه میشه یه توضیحی بدید یا مقاله ای رو معرفی کنید که توضیح داده باشه
    تشکر

    1. سلام امیرحسین عزیز.
      ببین parent اسم یک آیدی هست و parent اینجا صرفا اسم هست و داخل parent ما یک div داریم و قرار هست مقادیری که زیرش نوشته شده روی اون div داخل ایدی parent اعمال بشه.
      مقاله کلاس و آیدی بخونی

    1. سلام بابک. قربونت. خوشحالیم که برات مفید بوده ?

  6. سلام ببخشید من در حال کد زدن یه قالب اختصاصی هستم و کارفرما به من گفته به جای بوت استرپ با فکس باکس کار ریسپانسیو شدن رو انجام بدم.
    با فلکس باکس به تنهایی میشه این کارو انجام داد یا از مدیاکوئری هم باید استفاده کرد؟

    1. سلام شبنم. ببین با خاصیت flex-wrap میتونی ریسپانسیو شدن های ساده رو انجام بدی بدون اینکه از مدیا کوئری استفاده کنی. اما برای ریسپانسیو شدن های پیچیده تری مثل استفاده از یک عرض خاص در تغییر چیدمان صفحه حتما باید از مدیا کوئری استفاده شه.
      برای مطالعه بیشتر ارجاعت میدم به مقاله 73 همین آموزش https://mizfa.com/blog/css-method-responsive/#-Flexbox
      اگه باز برات ابهامی پیش اومد حتما بپرس

  7. سلام خسته نباشید
    ما اگه display رو حالت flex بذاریم طبیعتا عناصر به حالت inline در میان و ما اگه بخواهیم به حالت block یا ستونی باشن باید از خاصیت flax-direction استفاده کنیم که البته به صورت پیشفرض روی حالت row قرار داره
    خب سوال من اینه که اصن چرا باید این روشو استفاده کنیم؟! مگه نمیشه از اول display رو حالت inline یا inline-block داشته باشیم؟!! دقیقا کاربرد flex چیه؟ در طراحی سایت چه جاهایی باید ازش استفاده کرد؟

    1. سلام محمد وقتت بخیر
      خب ببین سوالت خیلی کلیه، از flexbox همه جا میشه استفاده کرد 🙂 اما چرا به جای flex از block و inline استفاده نمیکنیم؟
      نکته مهم اینجاس که خیلی اوقات flex کار ما رو راحت تر میکنه. برای مثال فرض کن یه div داریم و داخلش یسری گزینست. میخوایم بین تمام گزینه ها فاصله یکسان باشه و همزمان در کل طول div پخش بشن. با flex و justify-content به سادگی میشه این کار رو انجام داد در حالی که اگه از flex استفاده نکنیم ممکنه به کلی دردسر و سختی بخوریم.
      یه نمونه دیگه بخوام برات بگم تو بحث طراحی واکنش گراست که flex-wrap وارد کار میشه و به صورت خودکار چیدمان عناصر رو ستونی و سطری تنظیم میکنه.
      اما یسری جا ها هم هست که flex به کار نمیاد، مثل زمانی که فقط با یکی دو تا عنصر کار داری. در اون صورت میتونی فقط با یه خط کد از inline یا block کارت رو انجام بدی.

  8. #parent{
    height:500px;
    width:200px;
    background-color:#f4f4f4;
    box-shadow:0px 1px 5px #b8b8b8;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    }

  9. سلام ی سوال کلی از طراحی وب دارم
    اگر لطف کنید واضح بهم توضیح بدید
    اگر یک صفحه اصلی بسازم این میشه تک صفحه ای درسته؟
    برای اینکه چند صفحه داشتم باشم باید چیکار کنم؟ینی برای مثلا ۲۰ صفحه محتوا همه اون ۲۰ صفحه رو دوباره کد بزنم یا راه دیگه ای داره؟
    توی سرچ دنبال عبارت ساخت سابت چند صحفه ای زدم ولی نتیجه ای نگرفتم…
    تشکر

    1. سلام علی.
      اگه درست متوجه شده باشم منظورت اینه اگه تو یه سایت ۲۰ تا مقاله نوشته باشی باید برای تمامی بیست صفحه جداگونه کد بزنی.
      اینطور چیزی وجود نداره، برای محتوا ها عموما از سیستم های مدیریت محتوا مثل وردپرس یا جوملا استفاده میشه. یه قالب کلی میزنیم برای تمامی مقالات و تنها چیزی که تغییر میکنه، مقاله ایه ک داخل سایتت مینویسی. پس با کد زدن یه صفحه مختص به مقالات و بلاگ می‌تونی بی شمار مقاله داخلش بنویسی.

      اگه مشکلت حل شد بهم اطلاع بده 🙂

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

نشانی ایمیل شما منتشر نخواهد شد.

حداکثر حجم فایل برای آپلود: 1 مگابایت. فایل‌های مجاز برای آپلود: عکس, ویس, ویدیو, ورد یا پی دی اف, فایل متنی, زیپ. شما می‌تونید برای بهتر پرسیدن سوالتون، عکس یا ویس یا حتی فیلم در بخش نظرات میزفا آپلود کنید. برای ضبط ویس می‌تونید از خود واتس آپ استفاده کنید و بعد اینجا آپلود کنید و برای ارسال عکس هم کافی هست اسکرین شات بگیرید. Drop file here

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

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
فیلم آموزشی asp.net core 2
ترک میزفا خوب نیست!
معرفی جامع‌ترین ابزار سئو در ایران
بالای ۱۰ هزار عضو
PHZpZGVvIHdpZHRoPSI2MDAiIGhlaWdodD0iMzUwIiBwb3N0ZXI9Imh0dHBzOi8vbWl6ZmEuY29tL2Jsb2cvd3AtY29udGVudC91cGxvYWRzLzIwMjMvMDUvcG9zdGVyLW1pemZhLXRvb2xzLXZpZGVvLW1pbi5wbmciIGNvbnRyb2xzIHByZWxvYWQ9Im5vbmUiPiANCiAgIDxzb3VyY2Ugc3JjPSJodHRwczovL21pemZhLmNvbS9ibG9nL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDIzLzA1L21pemZhX3Rvb2xzXzcyMHAubXA0IiB0eXBlPSJ2aWRlby9tcDQiPg0KPC92aWRlbz4=