یادگیری پیکربندی با CSS

flexbox

حالت پیکربندی باflexbox برای بازسازی روش‌های پیکربندی با CSS ساخته شده است. متاسفانه این امر اخیرا دستخوش تغییرات زیادی شده است، و به همین خاطر در مرورگرهای مختلف، به شکل‌های مختلفی پیاده سازی شده است. اما همچنان، من علاقه مند هستم تا برخی مثال‌ها را با شما به اشتراک بگذارم تا بدانید که چه تکنیکی در آینده در پیش رو است. این مثال‌ها، در حال حاضر فقط با پیاده سازی flexbox در Chrome با توجه به آخرین استاندارد کار می‌کنند.

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

کارهای فراوان دیگری می‌توان با flexbox انجام داد; اینها چند نمونه هستند:

یک پیکربندی ساده با Flexbox

.container {
  display: -webkit-flex;
  display: flex;
}
nav {
  width: 200px;
}
.flex-column {
  -webkit-flex: 1;
          flex: 1;
}

Flexbox خیلی آسان است!

</section>

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

</section>

</div>

یک پیکربندی شیک با Flexbox

.container {
  display: -webkit-flex;
  display: flex;
}
.initial {
  -webkit-flex: initial;
          flex: initial;
  width: 200px;
  min-width: 100px;
}
.none {
  -webkit-flex: none;
          flex: none;
  width: 200px;
}
.flex1 {
  -webkit-flex: 1;
          flex: 1;
}
.flex2 {
  -webkit-flex: 2;
          flex: 2;
}

I will be 200px when there is room, and I will shrink down to 100px if there is not room, but no smaller.

</div>

من همواره 200px خواهم بود، مهم نیست که چه باشد no matter what.

</div>

من تا 1/3 از پهنای باقی مانده را پر می‌کنم.

</div>

من تا 2/3 از پهنای باقی مانده را پر می‌کنم.

</div>

وسط چینی با flexbox

.vertical-container {
  height: 300px;
  display: -webkit-flex;
  display:         flex;
  -webkit-align-items: center;
          align-items: center;
  -webkit-justify-content: center;
          justify-content: center;
}

<div>

در آخر، وسط چینی عمودی خیلی راحت است!

</div>