سه شنبه , آبان ۱ ۱۳۹۷
آموزش Flexbox

آموزش Flexbox

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

پشتیبانی مرورگر ها از فلکس باکس

آموزش فلکس باکس

مفهوم FlexBox در CSS3

فکس باکس تشکیل شده از flex containers و flex item. در واقع flex containers مشخص میکند آیتم با چه شیوه ای در صفحه قرار بگیرند. مقادیر فلکس باکس در ویژگی display فایل css قرار میگیرد. در مثال زیر سه ناحیه را بوسیله ویژگی فلکس در کنار همدیگر قرار می دهیم.

<!DOCTYPE html>
<html>
<head>
<style> 
.flex-container {
    display: -webkit-flex;
    display: flex;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

.flex-item {
    background-color: cornflowerblue;
    width: 100px;
    height: 100px;
    margin: 10px;
}
</style>
</head>
<body>

<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div>  
</div>

</body>
</html>

نمایش  نتیجه در w3schools

ویژگی Flex Direction

این ویژگی نحوه چیدمان flexitem ها را مشخص میکند (چپ به راست ، راست به چپ ، پایین به بالا ، بالا به پایین) و چهار مقدار به عنوان ورودی دریافت میکند .

  • column-reverse
  • column
  • row
  • row-reverse
<!DOCTYPE html>
<html>
<head>
<style> 
.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row-reverse;
    flex-direction: row-reverse;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

.flex-item {
    background-color: cornflowerblue;
    width: 100px;
    height: 100px;
    margin: 10px;
}
</style>
</head>
<body>

<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div>  
</div>

</body>
</html>

نمایش  نتیجه در w3schools

ویژگی justify-content

این ویژگی تقریبا مشابه text-align css عمل میکند به نحوی که مشخص میکند flexItem ها در کدام پوزیشن قرار بگیرند. مقادیر زیر را به عنوان ورودی دریافت میکند.

  • flex-start // مقدار پیش فرض از سمت چپ (درصورت چپ چین بودن)مرتب سازی را انجام میدهد
  • flex-end // از سمت راست (درصورت چپ چین بودن) مرتب سازی را انجام میدهد.
  • center // مرتب سازی از وسط انجام می شود.
  • space-between // از دو طرف مرتب سازی ها رو انجام میدهد و فضای خالی رو بین آیتم ها قرار میدهد
  • space-around // از دو طرف مرتب سازی رو انجام میدهد و فضای خالی رو بین آیتم ها و اول و آخر آیتم ها قرار میدهد.
<!DOCTYPE html>
<html>
<head>
<style> 
.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

.flex-item {
    background-color: cornflowerblue;
    width: 100px;
    height: 100px;
    margin: 10px;
}
</style>
</head>
<body>

<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div>  
</div>

</body>
</html>

نمایش  نتیجه در w3schools

ویژگی align-items

تراز بندی flexItem ها بر محور عمودی flex contianer و مقادیر زیر را دریافت میکند.

  • stretch     // آیتم ها را تا انتهای flex contianer میکشد.
  • flex-start  // آیتم ها در ابتدای بالا flex contianer قرار میگیرند.
  • flex-end   // ایتم ها در انتهای پایین flex contianer قرار میگیرند.
  • center      // آیتم ها از لحاظ ارتفاع دقیقا وسط flex contianer قرار میرند.
  • baseline    // ایتم ها در شروع flex contianer قرار میگیرند.
.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

نمایش نتیجه در w3schools

ویژگی flexwrap

این ویژگی مشخص میکند که فلکس آیتم ها در صورتی که به انتهای flextContianer رسیدند به خط بعد شکسته شوند یا خیر و مقادیر زیر را به عنوان ورودی دریافت میکنند.

  • nowrap   // شکسته نشود
  • wrap       // شکسته شود
  • wrap-reverse  // بصورت برعکس شکسته شود.
.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    width: 300px;
    height: 250px;
    background-color: lightgrey;
}

نمایش نتیجه در w3schools

ویژگی align-content

این ویژگی در واقع تغییر میدهد خاصیت ویژگی flex-wrap مشابه align-items عمل میکند با این تفاوت که بجای تراز بندی بروی flex items ها روی flex lines تاثیر پذیر است. و مقادیر زیر را به عنوان ورودی میگیرد.

  • stretch
  • flex-start
  • flex-end
  • center
  • space-between
  • space-around
.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-content: center;
    align-content: center;
    width: 300px;
    height: 300px;
    background-color: lightgrey;
}

نمایش نتیجه در w3schools

ویژگی توضیحات مقادیر ورودی
display  مشخص کردن تگ contianer با ویژگی flex  flex
flex-direction  نحوه چیدمان flexitem ها را مشخص میکند (چپ به راست ، راست به چپ ، پایین به بالا ، بالا به پایین)
  • column-reverse
  • column
  • row
  • row-reverse
justify-content  مشابه text-align css عمل میکند به نحوی که مشخص میکند flexItem ها در کدام پوزیشن قرار بگیرند.
  • flex-start
  • flex-end
  • center
  • space-between
  • space-around
align-items  تراز بندی flexItem ها بر محور عمودی flex contianer
  • stretch
  • flex-start
  • flex-end
  • center
  • baseline
flex-wrap   فلکس آیتم ها در صورتی که به انتهای flextContianer رسیدند به خط بعد شکسته شوند یا خیر
  • nowrap
  • wrap
  • wrap-reverse
align-content  در واقع تغییر میدهد خاصیت ویژگی flex-wrap مشابه align-items عمل میکند با این تفاوت که بجای تراز بندی بروی flex items ها روی flex lines تاثیر پذیر است.
  • stretch
  • flex-start
  • flex-end
  • center
  • space-between
  • space-around
flex-flow   ترکیب ویژگی های flex-direction و flex-wrap بصورت کوتاه
order   نحوه مرتب سازی یک فلکس آیتم را نسبت به بقیه فلکس آیتم ها مشخص میکند.
align-self  خاصیت ترازبندی را بروی align-items بازنویسی میکند
flex   طول فلکس آیتم ها را بر اساس فلکس آیتم های دیگر و فلکس کانتینر مشخص میکند.

آموزش Flexbox

آموزش Flexbox -آموزش Flexbox-آموزش Flexbox

  • آیا این مقاله مفید بود؟
  • بله   خیر

با تمام وجود علاقمندم مباحث جدید مربوط به برنامه نویسی رو یاد بگیرم و به دیگران یاد بدم. نیمی از زمان روزانه رو صرف یادگیری میکنم. سعی میکنم مقالات مفید و جدید در حوزه برنامه نویسی و به ویژه جاوا اسکریپت رو برای شما دوستان عزیز در لایو گوگل منتشر کنم.

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

نشانی ایمیل شما منتشر نخواهد شد.