علیرضا

وبلاگ شخصی

۹ مطلب با موضوع «کامپیوتر» ثبت شده است

تفاوت میان Flexbox و Grid در CSS

توسط : علیرضا آهنی

در تاریخ : شنبه, ۱۱ تیر ۱۴۰۱، ۰۱:۱۱ ب.ظ

Flexbox و Grid دو شیوه نمایش و جایگذاری المان ها در CSS هستند. یکی از مشکلات در CSS جایگذاری المان ها در صفحه به شیوه واکنش گرا و مناسب برای هر صفحه نمایشگری هست، برای حل این مشکل چندین روش هست: 

در اینجا چندین روش رو بررسی میکنیم. فرض کنید میخواهیم صفحه ای با سه ستون بسازیم، بطوری که در تلفن همراه به شیوه مناسبی نمایش داده بشه. 

استفاده از float و width

 

در این روش با استفاده از ویژگی float ستون ها را در سمت چپ قرار میدهیم. سپس اندازه عرض هر بخش را بطور مساوی تقسیم میکنیم و با ویژگی width تغییر میدهیم، برای واکنش گرا سازی آن با استفاده از media query مقدار عرض را 100 درصد قرار میدهیم:

* {
  box-sizing: border-box;
}

.column {
    float: left;
    width: 33.33%;
    padding: 1em;
    border: 0.1em solid black;
    background-color: #f1f1f1;
}

.row:after {
    content: "";
    display: table;
    clear: both;
}

@media (max-width: 800p) {
    .column {
        width: 100%;
    }
}

این روش برای موارد کوچک و ساده به خوبی کار میکنه، اما با جایگذاری ها و طراحی های پیچیده تر سخت تر میشود. 

نکته طراحی واکنش گرا: از واحد em یا rem بجای px استفاده کنید! این مقادیر بطور خودکار توسط مرورگر به مقادیر px مناسب برای هر صفحه نمایشگر تبدیل میشوند. 

16px = 1em 

استفاده از Flexbox

Flexbox برای جایگذاری المان ها به شیوه یک بعدی ( یا ستونی یا سطری ) ساخته شده. برای استفاده از Flexbox شما نیاز به یک المان پدر و چند المان فرزند دارید. 

المان پدر شیوه قرار گیری هر المان فرزند رو تایین میکنه. همچنین المان پدر تایین میکنه المان ها به شیوه ستونی باشند یا سطری. برای اطلاعات بیشتر از المان پدر در Flexbox از این آموزش W3Schools استفاده کنید.

المان های فرزند میتونند ترتیب قرار گیری خود، اندازه نسبت به المان های فرزند و طول اولیه خود رو تایین کنند. برای اطلاعات بیشتر از المان فرزند در Flexbox از این آموزش W3Schools استفاده کنید. 

* {
    box-sizing: border-box;
}

body {
    margin: 0;
}

.column {
    flex: 33.33%;
    padding: 1em;
    border: 0.1em solid black;
    background-color: #f1f1f1;
}

.row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    background-color: DodgerBlue;
}

@media (max-width: 800px) {
    .column {
        flex: 100%;
    }
}

استفاده از Grid

Grid برای جایگذاری المان ها به شیوه دو بعدی ( ستونی و سطری ) ساخته شده. برای استفاده از Grid شما نیاز به یک المان پدر و چند المان فرزند دارید. بر خلاف Flexbox برای ایجاد چندین ردیف، نیازی به چندین المان پدر نیست و برخلاف float نیازی به سروکله زدن با position نیست. 

 

body {
    margin: 0;
}

.column {
    padding: 1em;
    border: 0.1em solid black;
    background-color: #f1f1f1;
}

.row {
    display: grid;
    grid-template-columns: auto auto auto;
}

@media (max-width: 800px) {
    .row {
        grid-template-columns: auto;
    }
}

قدرت اصلی Grid در طراحی قالب ها هست که نیاز به ردیف ها با طول متفاوت و متغییر هست. همچنین میزان کد نوشته شده برای Grid کمتر است ( فقط کلاس row مهم است ) 

بطور کلی این مطلب رو میشه اینطور خلاصه کرد: 

شیوه های مختلف چینش در CSS
شیوه مزایا معایب
Float سادگی، پشتیبانی بیشتر قدیمی، سخت برای طراحی های پیچیده تر
Flexbox مدرن و واکنشگرا تک بعدی
Grid دو بعدی، المان های فرزند با اندازه های مختلف و چینش مختلف تعداد زیاد ویژگی ها

 

من خودم در پروژه های جدیدترم از Grid و یا bootstrap استفاده میکنم، اما float در قالب های قدیمی تر خیلی استفاده شده ( همین قالبی که این مطلب رو نمایش میده با float نوشته شده ) و بیشتر مواقع مشکلی ایجاد نمیکنه.

 

پ.ن: ادیتور فعلی بیان افتضاحه و من حتی اون رو به یک textarea با فرمت Markdown هم ترجیح نمیدم indecision

کد قالب DarkBlue نسخه ۰٫۸

توسط : علیرضا آهنی

در تاریخ : دوشنبه, ۲۱ مهر ۱۳۹۹، ۱۰:۲۲ ق.ظ

HTML - ساختار قالب

CSS

با پروانه : گنو جی پی ال نسخه ۳

گیتهاب ( جهت دریافت نسخه های جدیدتر )

نمودار مبتلایان به کرونا در ایران

توسط : علیرضا آهنی

در تاریخ : چهارشنبه, ۲ مهر ۱۳۹۹، ۰۳:۴۹ ب.ظ

اطلاعات توسط این سایت جمع آوری شده اند.

ادامه مطلب

رسم دایره با متوازی الاضلاع

توسط : علیرضا آهنی

در تاریخ : پنجشنبه, ۲۷ شهریور ۱۳۹۹، ۰۸:۱۵ ب.ظ

ادامه مطلب

ابزار Backup از پست های بلاگ بیان

توسط : علیرضا آهنی

در تاریخ : دوشنبه, ۱۰ شهریور ۱۳۹۹، ۰۲:۱۶ ب.ظ

از منوی فهرست مطالب گزینه دریافت بایگانی مطالب را انتخاب کنید. سپس برنامه زیر را دریافت کنید:

دریافت

برنامه را باز کنید و به آن آدرس فایل xml دانلودی را بدهید، به عنوان مثال:

C:/users/.../export.xml

برنامه در یک پوشه به نام posts برای شما بر اساس id پست های دریافتی پرونده های html تولید خواهد کرد. پس از پایان کار میتوانید فایل های html را با مروگر خود باز کنید.

ادامه مطلب

استفاده از textarea بدون نیاز به خرید جاوا اسکریپت

توسط : علیرضا آهنی

در تاریخ : يكشنبه, ۱۹ مرداد ۱۳۹۹، ۰۷:۴۰ ب.ظ

css زیر رو وارد قالبتون بکنید :

ادامه مطلب

معمای ساده و کامپیوتری

توسط : علیرضا آهنی

در تاریخ : چهارشنبه, ۱۱ تیر ۱۳۹۹، ۰۷:۴۹ ب.ظ

من یه معما براتون دارم ! معما اینه :

فرق بین این دوتا عکس چیه ( از نظر حجم نه ) و آیا در یکی ار اونها چیزی قایم شده؟

کمک۱:از hexeditor اگه بخواید میتونید استفاده کنید.

کمک۲:بهتره یکم قبل فکر روی این معما با tar کار کنید.

کمک۳:قبل از حد دادن وقتتون فایلو دانلود کنید.

ببینم کی برنده میشه ((:

باگ اندروید:‌ خرابی برخی گوشی ها با عکس پس زمینه

توسط : علیرضا آهنی

در تاریخ : سه شنبه, ۱۳ خرداد ۱۳۹۹، ۱۱:۵۶ ق.ظ

جدیدا به باگ خیلی مخرب و جالب توی گوشی های اندروید پیدا شده که وقتی شما عکسی به شکل sRGB ذخیره شده باشن رو به عنوان والپیپر قرار بدید گوشی مورد نظر دچار ارور در یک متغییر میشه گوشی کرش میکنه و وقتی که راه اندازی میشه دوباره همون متغییر دچار مشکل میشه و این اتفاق همینطور تکرار میشه.

این عکسی که میزارم یک مدل کانورت شده از عکس مورد نظره ،‌ و من لینک دانلود عکس اصلی رو نمیزارم همچنین من هیچ مسئولیتی دربرابر خراب شدن گوشی شما ندارم

این باگ در گوشی های اندروید ۱۱ به بالا دیده نمیشه و همچنین توی گوشی های وان پلاس ،‌ نوکیا و شیائومی آسیب پذیری بیشتری وجود داره . همچنین این باگ در گوشی های گوگل که از اپلیکیشن  Google Wallpaper استفاده میکردن ، قبلا دیده شده .

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

( البته توی گوشی های روت شده میشه با کاستوم ریکاوری میشه فایل رو حذف کرد و البته این توی گوشی هایی هست که نسخه کپی از والپیپر نگه نمیدارن و با حذف فایل والپیپر به والپیپر پیش فرض برمیگردن )

به هرحال مواظب گوشی هاتون باشید

منبع : زومیت

تجربه نصب و استفاده از Lubuntu

توسط : علیرضا آهنی

در تاریخ : شنبه, ۲۷ ارديبهشت ۱۳۹۹، ۱۲:۳۷ ب.ظ

سلام !

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

ادامه مطلب