SayeyeZohor
5 سال پیش توسط SayeyeZohor مطرح شد
8 پاسخ

تبدیل float به flexbox

با سلام

میخواستم این تست رو با flexbox طراحی کنم ممنون می شم دوستان کمک کنند

@hesammousavi


ثبت پرسش جدید
حسام موسوی
تخصص : طراح و برنامه نویس
@hesammousavi 5 سال پیش مطرح شد
3

سلام دوره flexbox رو ببینید بعد یادگیری میتونید اینکارو به سادگی انجام بدید


میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 5 سال پیش مطرح شد
1

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


SayeyeZohor
تخصص : برنامه نویس
@SayeyeZohor 5 سال پیش آپدیت شد
0

ممنون می شم این فایل رو بررسی کنید ببینین اوکی هست و اگه راهنمایی ای هست بیزحمت اینجا برای استفاده من و دوستان قرار بدید ممنون

@hesammousavi
@milad


میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 5 سال پیش مطرح شد
0

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

من چندتا مورد کوچیک رو بهش اضافه کردم:

 /* For desktop: */
      .col-1  {width: 8.33%;}
      .col-2  {width: 16.66%;}
      .col-3  {width: 25%;}
      .col-4  {width: 33.33%;}
      .col-5  {width: 41.66%;}
      .col-6  {width: 50%;}
      .col-7  {width: 58.33%;}
      .col-8  {width: 66.66%;}
      .col-9  {width: 75%;}
      .col-10 {width: 83.33%;}
      .col-11 {width: 91.66%;}
      .col-12 {width: 100%;}

      @media only screen and (max-width: 768px) {
        /* For mobile phones: */
        main {
          flex-direction:   column;       
        }
        [class*="col-"] {
            width: 100%;
          }
      }

میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 5 سال پیش آپدیت شد
0

چسباندن footer به انتهای صفحه:

.container {
        min-height:             100vh;
        margin:                   auto;
        display:                  flex;
        flex-direction:       column;
      }

main {
        display:            flex;
        flex-direction:     row;
        flex: 1;        
      }     

میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 5 سال پیش آپدیت شد
0

محتواتون انگلیسی هستش، بهتره همون چپ به راست باشه، نه راست به چپ.

body, html {
        direction:          ltr;
      }

میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 5 سال پیش مطرح شد
0

در کل، به زیبای نوشتید و مشخصه که درک خوبی پیدا کردین ازین مبحث، مواردی که من نوشتم جزئی بودند.

موفق باشید.


SayeyeZohor
تخصص : برنامه نویس
@SayeyeZohor 5 سال پیش مطرح شد

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام