آموزش Flexbox در طراحی سایت

آموزش استفاده از Flexbox در طراحی وب‌سایت خبری

Build Website Layout With Flexbox

آموزش استفاده از Flexbox در طراحی وب‌سایت خبری

 

در این مقاله می خواهیم نحوه استفاده از flexbox در طراحی وب سایت های خبری (مانند گاردین) را بررسی کنیم. در ۵ بخش این مقاله را گردآوری کرده ایم.

 

 »»» بخش اول: معرفی خاصیت FlexBox و فواید آن ««« 

 

دلایل اهمیت استفاده از FlexBox:

برای شروع، نیازی نیست به مبحث Flexbox تسلط داشته باشید. دلایل استفاده از flexbox در اینگونه طراحی ها به شرح زیر است:

  • توسط Flexbox براحتی می توان ستون های واکنش گرا (responsive columns) طراحی کرد.
  • می توانیم ستون هایی با ارتفاع یکسان ایجاد کنیم.
  • می توانیم محتوا (content) را به سمت پایین container هل بدهیم.

 

دلایل اهمیت استفاده از FlexBox

 

۱- شروع با دو ستون (Start with 2 columns):

ایجاد ستون در CSS همیشه چالش انگیز بوده است. یکی از روش های مرسوم ایجاد ستون در CSS استفاده از float و table است که هر دوی اینها، مشکلات خاص خود را دارند.Flexbox کار را برای طراحان راحت کرده است. زیرا دارای ویژگی های زیر است:

  • کد تمیز (Clean Code): تنها کافیست یک div با استایل display: flex تعریف کنیم.
  • نشانه گذاری معنایی (Semantic Markup)
  • انعطاف پذیری (Flexibility): براحتی با چند خط کد css می توان ستون ها را تغییر سایز داد (resize)، همتراز (align) کرد.

 

در ابتدا دو ستون تعریف می کنیم که اولی به اندازه دو/سوم container را در بر می گیرد و دومی بقیه container یعنی یک/سوم آنرا:

<div class="columns">

  <div class="column main-column">

    2/3 column

  </div>

  <div class="column">

    1/3 column

  </div>

</div>

دو المان در کد فوق وجود دارد:

۱- المان columns container

۲- دو المان column که یکی از آنها با کلاس main-column همراه است. که برای عریض تر کردن آن ستون بکار می رود.

کد css زیر را در نظر بگیرید:

.columns {

  display: flex;

}

.column {

  flex: 1;

}

.main-column {

  flex: 2;

}

در وب سایت CodePen می توانید سورس کد این بخش را بهمراه خروجی مشاهده کنید. تصویر خروجی بصورت زیر می باشد:

 

شروع با دو ستون (Start with 2 columns)

 

مشاهده می شود که با تعریف flex: 2; برای ستون اول، این ستون دو برابر عرض ستون دوم را خواهد داشت (یعنی دو ستون از ۳ ستون).

 

 »»» بخش دوم: تبدیل هر ستون به یک Flexbox Container ««« 

 

در بخش قبل، قابلیت flexbox را معرفی کردیم و کاربردهای آن را در طراحی سایت های مختلف بویژه خبری بیان کردیم و طراحی دوستونه توسط flexbox را بررسی کردیم.

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

 

۲- تبدیل هر ستون به یک Flexbox Container:

هر کدام از دو ستون فوق، می تواند شامل چندین مقاله یا خبر باشد که بصورت عمودی زیر یکدیگر قرار گرفته اند. بنابراین باید هر ستون (column) را به یک Flexbox Container تبدیل کنیم. می خواهیم:

  • باکس هر خبر بصورت عمودی زیر هم چیدمان شوند.
  • هر باکس تا جای ممکن stretch شود و فضای خالی موجود را پر کند.

کد زیر را در نظر بگیرید:

 

.column {

  display: flex;

  flex-direction: column; /* Makes the articles stacked vertically */

}

.article {

  flex: 1; /* Stretches the articles to fill up the remaining space */

}

 

با تعریف flex-direction بیان کرده ایم که در هر یک از آن دو ستون، باکس های اخبار و مقاله بصورت عمودی زیرهم چیده شوند و با تعریف flex: 1; گفتیم باکس مقالات، تمام فضای موجود را پر کنند. تصویر زیر را مشاهده کنید:

 

تعریف flex-direction

 

<div class="columns">
  <div class="column main-column">
    <article class="article">
      Hello World
    </article>
    <article class="article">
      Hello World
    </article>
  </div>
  <div class="column">
    <article class="article">
      Hello World
    </article>
    <article class="article">
      Hello World<br>
      Foo Bar
    </article>
    <article class="article">
      Hello World
    </article>
  </div>
</div>

و کد CSS زیر:

.columns {
display: flex;
}

.column {
background: #eee;
border: 5px solid #ccc;
display: flex;
flex: 1;
flex-direction: column;
padding: 10px;
}

.main-column {
flex: 2;
}

.article {
background: mediumseagreen;
border: 5px solid seagreen;
color: white;
flex: 1;
margin: 10px;
padding: 20px;
}

برای مشاهده خروجی در CodePen کلیک کنید.

 

 »»» بخش سوم: تبدیل هر باکس خبر به یک Flex Container ««« 

 

در بخش دوم، تبدیل یک ستون از چیدمان وب سایت را به یک Flexbox Container یاد دادیم. در این بخش قصد داریم تبدیل هر باکس خبر به یک Flex Container را آموزش دهیم.

 

۳- تبدیل هر باکس خبر به یک Flex Container:

اکنون برای افزودن انعطاف پذیری طراحی، هر باکس مقاله یا خبر را به یک Flex Container تبدیل می کنیم. هر مقاله شامل آیتم های زیر می باشد:

  • عنوان (title)
  • یک پاراگراف (a paragraph)
  • بخش اطلاعات مانند نویسنده و تعداد کامنت های هر مقاله
  • یک تصویر ریسپانسیو (که وجودش اختیاری است)

 

طرح نهایی مورد نظر ما بصورت تصویر زیر می باشد:

 

تبدیل هر باکس خبر به یک Flex Container

 

کد HTML آن بصورت زیر خواهد بود:

<a class="article first-article">

  <figure class="article-image">

    <img src="">

  </figure>

  <div class="article-body">

    <h2 class="article-title">

      <!– title –>

    </h2>

    <p class="article-content">

      <!– content –>

    </p>

    <footer class="article-info">

      <!– information –>

    </footer>

  </div>

</a>

و کد CSS آن:

.article {
display: flex;
flex-direction: column;
flex-basis: auto; /* sets initial element size based on its contents */
}

.article-body {
display: flex;
flex: 1;
flex-direction: column;
}

.article-content {
flex: 1; /* This will make the content fill up the remaining space, and thus push the information bar at the bottom */
}

آیتم های واقع در هر باکس مقاله بصورت عمودی قرار گرفته اند (توسط کلاس flex-direction: column;).

به کلاس .article-content خاصیت flex: 1; دادیم به این دلیل که می خواهیم بخش article-content به بالا هل (push) داده شود و بخش article-info به پایین باکس article بچسبد.

 

قرارگرفتن المان ها بصورت عمودی در طراحی flexbox

 

برای مشاهده و ویرایش سورس کد تصویر فوق، به وب سایت CodePen مراجعه نمائید.

در بخش بعد، طراحی ستون های تو در تو و همچنین چیدمان افقی المان ها را آموزش می دهیم.

 

 »»» بخش چهارم: افزودن چند ستون تو در تو ««« 

 

در بخش قبل، نحوه استفاده از Flexbox در هر باکس خبر و یا Card را بررسی نمودیم و از خاصیت flex-direction: column استفاده نمودیم. در این بخش افزودن چند ستون تو در تو و نیز اعمال چیدمان افقی به المان ها را آموزش خواهیم داد.

 

۴- افزودن چند ستون تو در تو (Nested Columns):

در ستون سمت چپ، می خواهیم مجموعه ای از ستون ها را قرار دهیم. بنابراین می خواهیم باکس مقاله دوم را با columns container جایگزین کنیم. کد html زیر را در نظر بگیرید:

<div class="columns">

  <div class="column nested-column">

    <a class="article">

      <!– Article content –>

    </a>

  </div>

 

  <div class="column">

    <a class="article">

      <!– Article content –>

    </a>

    <a class="article">

      <!– Article content –>

    </a>

    <a class="article">

      <!– Article content –>

    </a>

  </div>

</div>

از آنجائیکه ما می خواهیم اولین ستون تو در تو عریض تر شود، کلاس .nested-column را با استایل زیر به آن اعمال می کنیم:

.nested-column {

  flex: 2;

}

با اینکار، عرض این ستون دو برابر عرض ستون های دیگر خواهد شد. تصویر زیر را در نظربگیرید:

 

عرض دو برابر یک ستون نسبت به دیگری در flexbox

 

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

 

۵- اعمال چیدمان افقی (Horizontal) به باکس مقاله اول:

باکس مقاله اول فضای زیادی از صفحه را اشغال کرده است. برای صرفه جویی در فضای صفحه، می خواهیم باکس اول را بصورت افقی چیدمان کنیم. کد css زیر را در نظر بگیرید:

.first-article {
flex-direction: row;
}

.first-article .article-body {
flex: 1;
}

.first-article .article-image {
height: 300px;
order: 2;
padding-top: 0;
width: 400px;
}

خاصیت order در طراحی flexbox:

خاصیت order بسیار کاربردی و مفید می باشد. توسط آن می توان ترتیب قرارگیری المان های HTML را بدون تغییر دادن کدهای HTML عوض کرد. در مثال فوق، برای تصویر مقاله، order: 2; در نظر گرفته ایم که باعث می شود تصویر مقاله در جایگاه دوم قرار بگیرد و ابتدا متن مقاله بیاید. اگر کد html مقاله اول را در نظر بگیریم، مشاهده می شود که کد مربوط به تصویر مقاله ابتدا تعریف شده است. اما در خروجی، ابتدا article-body آمده است و سپس article-image:

 

خاصیت order در طراحی flexbox

 

در مقاله بعد، که آخرین بخش از آموزش Flexbox می باشد، نحوه واکنش گرا کردن طراحی flexbox را آموزش خواهیم داد. با ما باشید…

ریسپانسیو کردن طراحی (Responsive Layout)

 

 

 »»» بخش پنجم: طراحی واکنش‌گرا توسط FlexBox ««« 

 

در بخش قبل، افزودن چند ستون تو در تو (Nested Columns) و همچنین استفاده از خاصیت order در طراحی flexbox را بررسی کردیم. در این بخش که قسمت آخر از آموزش Flexbox می باشد، قصد داریم نحوه واکنش گرا کردن طراحی انجام شده توسط خاصیت Flexbox را آموزش دهیم.

 

۶- ریسپانسیو کردن طراحی (Responsive Layout):

طراحی که تاکنون انجام داده ایم بنظر کامل می آید اما اگر این صفحه را در اسکرین های کوچک مشاهده کنیم، کمی بهم ریخته بنظر می رسد. برای حل این مشکل، باید طراحی خود را واکنش گرا (responsive) کنیم. برای غیرفعال کردن حالت flex، فقط کافیست در container، خاصیت display:flex را حذف کنیم. بهتر است برای اسکرین های بزرگتر از مثلا ۷۶۸پیکسل، حالت نمایش flex را فعال کنیم. کد زیر را در نظر بگیرید:

 

@media screen and (min-width: 768px) {

.columns, .column { display: flex; }

}

 

با تعریف کد فوق، باکس های مقالات و اخبار در اندازه های کوچکتر از ۷۶۸ پیکسل، بصورت معمولی زیر یکدیگر نمایش داده می شوند و در اسکرین های بزرگتر از ۷۶۸ پیکسل، دارای display: flex; می شوند و دو ستونه خواهد شد.

 

۷- افزودن استایل های نهایی:

برای نمایش بهتر صفحه در اسکرین های بزرگ مانند دسکتاپ، استایل های زیر را می نویسیم:

@media screen and (min-width: 1000px) {
.first-article {
flex-direction: row;
}

.first-article .article-body {
flex: 1;
}

.first-article .article-image {
height: 300px;
order: 2;
padding-top: 0;
width: 400px;
}

.main-column {
flex: 3;
}

.nested-column {
flex: 2;
}
}

 

تصویر خروجی را مشاهده کنید:

 

نمایش بهتر صفحه در اسکرین های بزرگ مانند دسکتاپ

 

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

سری آموزشی Flexbox ترجمه ای بود از یکی از مقالات وب سایت معتبر Tutsplus . برای مشاهده مقاله کامل آموزش Flexbox به زبان انگلیسی، روی این لینک کلیک کنید.

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

 

منبع: https://webdesign.tutsplus.com/tutorials/how-to-build-a-news-website-layout-with-flexbox–cms-26611


برچسب‌ها:

flexboxFlexbox Containerflexbox در CSSآموزش flexboxآموزش فلکس باکساستفاده از flexboxطراحی flexboxفلکس باکسقابلیت Flex

2 دیدگاه برای “آموزش Flexbox در طراحی سایت”

  1. زر گفت:

    دمتون گرم با این مقاله . خیلی حال کردم باهاش

    1. Mohtava-Admin گفت:

      خواهش می‌کنم 🙂

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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

بیست − شانزده =