بررسی آیتم های فلکس(Flex Items) در CSS

مثال شماره 1

مقدار order ترتیب نمایش آیتم های فلکس را مشخص می کند:

 <div class="flex-container">
  <div style="order: 3">1</div>
  <div style="order: 2">2</div>
  <div style="order: 4">3</div>
  <div style="order: 1">4</div>
</div> 

نتیجه:

مثال شماره 2

کاری کنیم که آیتم فلکس سوم، چهار برابر دیگر آیتم ها، رشد کند:

 <div class="flex-container">
  <div style="flex-grow: 1">1</div>
  <div style="flex-grow: 1">2</div>
  <div style="flex-grow: 4">3</div>
</div> 

نتیجه:

مثال شماره 3

کاری کنیم که آیتم سوم، دو برابر کوچکتر از آیتم های فلکس شود:

 <div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex-shrink: 2">3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div> 

نتیجه:

مثال شماره 4

 <div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex-basis: 250px">3</div>
  <div>4</div>
</div> 

نتیجه:

مثال شماره 5

برای آیتم سوم، مقدار رشد یا grow برابر با 1 و کوچک شدن یا shrink برابر با 0 (بدون کوچک شدن) و طول اولیه ی آن برابر با 150px است:

 <div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex: 1 0 150px">3</div>
  <div>4</div>
</div> 

نتیجه:

مثال شماره 6

تراز کردن آیتم شماره 3 در وسط ظرف(container):

 <div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="align-self: center">3</div>
  <div>4</div>
</div> 

نتیجه:

مثال شماره 7

در زیر، آیتم دوم در بالای ظرف(container) و آیتم سوم در پایین ظرف تراز می شوند:

 <div class="flex-container">
  <div>1</div>
  <div style="align-self: flex-start">2</div>
  <div style="align-self: flex-end">3</div>
  <div>4</div>
</div> 

نتیجه: