چیدمان

پادکست CSS - 009: Layout

تصور کنید که به عنوان یک توسعه دهنده کار می کنید و یک همکار طراح طراحی یک وب سایت کاملاً جدید را به شما می دهد. این طرح دارای انواع چیدمان ها و ترکیب بندی های جالب است: چیدمان های دو بعدی که به عرض و ارتفاع درگاه دید توجه می کنند، و همچنین طرح هایی که باید روان و انعطاف پذیر باشند. چگونه بهترین راه برای استایل دادن به اینها با CSS را انتخاب می کنید؟

CSS راه‌های مختلفی را برای حل مسائل طرح‌بندی، در محور افقی، محور عمودی یا حتی هر دو در اختیار ما قرار می‌دهد. انتخاب روش چیدمان مناسب برای یک زمینه ممکن است سخت باشد، و اغلب ممکن است برای حل مشکل خود به بیش از یک روش چیدمان نیاز داشته باشید. برای کمک به این امر، در ماژول‌های زیر، با ویژگی‌های منحصربه‌فرد هر مکانیزم طرح‌بندی CSS برای اطلاع از آن تصمیم‌ها آشنا می‌شوید.

چیدمان: تاریخچه مختصر

در روزهای اولیه وب، طرح های پیچیده تر از یک سند ساده با عناصر <table> طراحی می شدند. جداسازی HTML از سبک های بصری زمانی که CSS به طور گسترده توسط مرورگرها در اواخر دهه 90 مورد استفاده قرار گرفت، آسان تر شد. CSS راه را برای توسعه دهندگان باز کرد که بتوانند ظاهر و احساس یک وب سایت را بدون دست زدن به HTML کاملاً تغییر دهند. این قابلیت جدید الهام‌بخش پروژه‌هایی مانند The CSS Zen Garden است که برای نشان دادن قدرت CSS برای تشویق توسعه‌دهندگان بیشتر به یادگیری آن ایجاد شده است.

CSS با توجه به نیازهای ما برای طراحی وب و فناوری مرورگر تکامل یافته است. می‌توانید در این مقاله توسط ریچل اندرو مطالعه کنید که چگونه طرح‌بندی CSS و رویکرد ما به چیدمان در طول زمان تکامل یافته است.

چیدمان: حال و آینده

CSS مدرن دارای ابزار طرح بندی فوق العاده قدرتمندی است. ما سیستم‌های اختصاصی برای چیدمان داریم و قبل از بررسی جزئیات بیشتر Flexbox و Grid در ماژول‌های بعدی، نگاهی سطح بالا به آنچه در اختیار داریم، خواهیم داشت.

درک ویژگی display

ویژگی display دو کار را انجام می دهد. اولین کاری که انجام می دهد این است که مشخص می کند جعبه ای که روی آن اعمال می شود به صورت خطی عمل می کند یا بلوک.

.my-element {
  display: inline;
}

عناصر درون خطی مانند کلمات در یک جمله رفتار می کنند. در جهت خطی کنار هم می نشینند. عناصری مانند <span> و <strong> ، که معمولاً برای استایل دادن به قطعات متن در داخل عناصری مانند <p> (پاراگراف) استفاده می‌شوند، به‌طور پیش‌فرض درون خط هستند. آنها همچنین فضای سفید اطراف را حفظ می کنند.

شما نمی توانید عرض و ارتفاع صریح را روی عناصر درون خطی تنظیم کنید. هر گونه حاشیه سطح بلوک و بالشتک توسط عناصر اطراف نادیده گرفته می شود.

.my-element {
    display: block;
}

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

.my-element {
    display: flex;
}

ویژگی display همچنین تعیین می کند که فرزندان یک عنصر چگونه باید رفتار کنند. به عنوان مثال، تنظیم ویژگی display برای display: flex جعبه را به یک جعبه در سطح بلوک تبدیل می‌کند و همچنین فرزندان آن را به آیتم‌های flex تبدیل می‌کند. این ویژگی‌های انعطاف‌پذیر را فعال می‌کند که تراز، ترتیب و جریان را کنترل می‌کنند.

فلکس باکس و گرید

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

توجه: ما در ماژول‌های آینده به جزئیات بسیار بیشتری در مورد هر دوی این موارد خواهیم پرداخت، اما در اینجا مروری بر سطح بالایی از اینکه هر دو چه هستند و چه کاربردی دارند، آورده شده است.

فلکس باکس

.my-element {
    display: flex;
}

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

اقلام در همان محور باقی می مانند و در صورت تمام شدن فضا بسته نمی شوند. در عوض، آنها سعی خواهند کرد تا روی خطی مشابه یکدیگر قرار گیرند. این رفتار را می توان با استفاده از ویژگی های align-items ، justify-content و flex-wrap تغییر داد.

Flexbox همچنین عناصر فرزند را به آیتم‌های انعطاف‌پذیر تبدیل می‌کند، به این معنی که می‌توانید قوانینی در مورد نحوه رفتار آنها در یک ظرف انعطاف‌پذیر بنویسید. شما می توانید تراز، ترتیب و توجیه را در یک مورد جداگانه تغییر دهید. همچنین می توانید نحوه کوچک شدن یا رشد آن را با استفاده از ویژگی flex تغییر دهید.

.my-element div {
    flex: 1 0 auto;
}

ویژگی flex مختصری برای flex-grow ، flex-shrink و flex-basis است. می توانید مثال بالا را به این صورت گسترش دهید:

.my-element div {
 flex-grow: 1;
 flex-shrink: 0;
 flex-basis: auto;
}

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

توری

.my-element {
    display: grid;
}

Grid از بسیاری جهات مشابه flexbox است، اما برای کنترل طرح‌بندی‌های چند محوره به جای طرح‌بندی‌های تک محوره (فضای عمودی یا افقی) طراحی شده است.

Grid شما را قادر می سازد تا قوانین چیدمان را روی عنصری بنویسید که دارای display: grid ، و چند اصل اولیه جدید برای استایل چیدمان معرفی می کند، مانند توابع repeat() و minmax() . یکی از واحدهای شبکه مفید، واحد fr است - که کسری از فضای باقیمانده است - می توانید شبکه های سنتی 12 ستونی، با فاصله بین هر آیتم، با 3 ویژگی CSS بسازید:

.my-element {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
}

این مثال بالا یک طرح تک محوری را نشان می دهد. در جایی که flexbox بیشتر با اقلام به عنوان یک گروه برخورد می کند، شبکه به شما کنترل دقیقی بر روی قرارگیری آنها در دو بعد می دهد. می‌توانیم تعریف کنیم که اولین مورد در این شبکه 2 ردیف و 3 ستون دارد:

.my-element :first-child {
  grid-row: 1/3;
  grid-column: 1/4;
}

ویژگی‌های grid-row و grid-column به اولین عنصر در شبکه دستور می‌دهد تا از ابتدای ستون چهارم، از ستون اول، سپس به ردیف سوم، از سطر اول باز شود.

طرح جریان

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

بلوک درون خطی

به یاد داشته باشید که چگونه عناصر اطراف به حاشیه بلوک و بالشتک روی یک عنصر درون خطی احترام نمی گذارند؟ با inline-block می توانید این اتفاق را ایجاد کنید.

p span {
    display: inline-block;
}

استفاده از inline-block کادری را به شما می‌دهد که برخی از ویژگی‌های یک عنصر سطح بلوک را دارد، اما همچنان با متن جریان دارد.

p span {
    margin-top: 0.5rem;
}

شناورها

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

img {
    float: left;
    margin-right: 1em;
}

ویژگی float به یک عنصر دستور می دهد تا در جهت مشخص شده "شناور" شود. به تصویر در این مثال دستور داده شده که به سمت چپ شناور شود، که سپس به عناصر خواهر و برادر اجازه می‌دهد تا دور آن بپیچند. شما می توانید به یک عنصر دستور دهید که left ، right یا inherit شناور شود.

هشدار: وقتی از float استفاده می‌کنید، به خاطر داشته باشید که هر عنصری که عنصر شناور را دنبال می‌کند، ممکن است چیدمان آنها تنظیم شود. برای جلوگیری از این امر، می‌توانید با استفاده از clear: both روی عنصری که به دنبال عنصر شناور شما می‌آید و هم با display: flow-root در والد عناصر شناور، float را پاک کنید. در مقاله پایان هک clearfix بیشتر بدانید.

طرح چند ستونی

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

<h1>All countries</h1>
<ul class="countries">
  <li>Argentina</li>
  <li>Aland Islands</li>
  <li>Albania</li>
  <li>Algeria</li>
  <li>American Samoa</li>
  <li>Andorra</li>
  …
</ul>

.countries {
    column-count: 2;
    column-gap: 1em;
}

این به طور خودکار لیست طولانی را به دو ستون تقسیم می کند و یک شکاف بین دو ستون اضافه می کند.

.countries {
    width: 100%;
    column-width: 260px;
    column-gap: 1em;
}

به‌جای تنظیم تعداد ستون‌هایی که محتوا به آنها تقسیم می‌شود، می‌توانید با استفاده از column-width ، حداقل عرض دلخواه را نیز تعریف کنید. با در دسترس قرار گرفتن فضای بیشتر در viewport، ستون های بیشتری به طور خودکار ایجاد می شوند و با کاهش فضا، ستون ها نیز کاهش می یابد. این در زمینه های طراحی وب واکنش گرا بسیار مفید است.

تثبیت موقعیت

آخرین مورد در این نمای کلی از مکانیسم های چیدمان، موقعیت یابی است. ویژگی position نحوه رفتار یک عنصر در جریان عادی سند و نحوه ارتباط آن با سایر عناصر را تغییر می دهد. گزینه های موجود relative , absolute , fixed و sticky هستند و مقدار پیش فرض static است .

.my-element {
  position: relative;
  top: 10px;
}

این عنصر بر اساس موقعیت فعلی خود در سند، 10 پیکسل به پایین به سمت پایین هدایت می شود، زیرا نسبت به خودش قرار دارد. افزودن position: relative به یک عنصر همچنین آن را به بلوک حاوی هر عنصر فرزند با position: absolute تبدیل می کند. این بدان معناست که فرزندش اکنون به جای بالاترین نسبی والد، زمانی که یک موقعیت مطلق برای آن اعمال می شود، به این عنصر خاص تغییر مکان می دهد.

.my-element {
  position: relative;
  width: 100px;
  height: 100px;
}

.another-element {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 50px;
    height: 50px;
}

وقتی position روی absolute تنظیم می‌کنید، عنصر را از جریان سند جاری خارج می‌کند. این یعنی دو چیز:

1. می‌توانید این عنصر را در هر کجا که دوست دارید، با استفاده از top ، right ، bottom و left در نزدیک‌ترین والد نسبی آن قرار دهید.
2. تمام محتوای احاطه کننده یک عنصر مطلق دوباره جریان می یابد تا فضای باقی مانده از آن عنصر را پر کند.

عنصری با مقدار position fixed رفتاری مشابه با absolute دارد و والد آن عنصر ریشه <html> است. عناصر موقعیت ثابت بر اساس مقادیر top ، right ، bottom و left که تنظیم کرده‌اید، از بالا سمت چپ ثابت می‌مانند.

می‌توانید با استفاده از sticky به جنبه‌های ثابت، fixed و جنبه‌های قابل پیش‌بینی‌تر مربوط به تکریم جریان اسناد relative دست پیدا کنید. با استفاده از این مقدار، همانطور که درگاه دید از کنار عنصر عبور می کند، به مقادیر top ، right ، bottom و left که شما تنظیم کرده اید ثابت می ماند.

بسته شدن

انتخاب و انعطاف پذیری زیادی با طرح بندی CSS وجود دارد. برای غواصی بیشتر در قدرت CSS Flexbox و Grid ، به چند ماژول بعدی ادامه دهید.

درک خود را بررسی کنید

دانش خود را در مورد چیدمان تست کنید

ویژگی display چه 2 کار را انجام می دهد؟

inline یا block یا none را تعیین می کند.

موتور طرح باید بداند که آیا این جعبه تمام عرض است یا نه و آیا به خط جدیدی نیاز دارد.

قاب طرح بندی شبکه ای را تعیین می کند.

ویژگی display می تواند نمایش را روی شبکه تنظیم کند، اما ربطی به قاب طرح بندی ندارد.

تعیین می کند که کودکان چگونه باید رفتار کنند.

Flexbox و grid نظرات و ویژگی های جدیدی برای فرزندان خود دارند.

تعیین می کند که آیا کادر باید پیمایش کند یا خیر.

این خاصیت overflow است.

برای جریان دادن چند پاراگراف به ستون ها، کدام ویژگی CSS برای این کار بهتر است؟

display: grid

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

column-count

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

display: flex

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

float

دوباره امتحان کنید!

اگر یک بلوک از جریان خارج شود به چه معناست؟

کنار رودخانه گیر کرده است.

متن در اینجا CSS است، نه جغرافیا.

به آن یک مقدار موقعیت top یا left داده شده است.

داشتن این ویژگی ها به تنهایی یک جعبه را از جریان خارج نمی کند.

این دیگر بر اساس موقعیت های خواهر و برادر خود قرار نمی گیرد.

به عنوان مثال، یک جعبه با position: absolute ، اکنون با مختصات x و y بر اساس بلوک حاوی، و نه ترتیب آن با سایر عناصر خواهر و برادر قرار می گیرد.

Flexbox و Grid فرزندان خود را به طور پیش فرض بسته بندی می کنند؟

درست است، واقعی

باید با flex-wrap: wrap یا repeat(auto-fit, 30ch) .

نادرست

Flexbox و Grid دارای ویژگی های بسته بندی خاصی هستند که برای اعمال به سبک های اضافی نیاز دارند.