CSS Flexbox ﺩﺭﺍﻮﻣ

فهرست مطالب

    نمایش فهرست مطالب

(ﻡﻼﻗﺍ) ﮎﺩﻮﮐ ﺮﺻﺎﻨﻋ

.ﺪﻧﻮﺷ ﯽﻣ ﻞﯾﺪﺒﺗ (ﺲﮑﻠﻓ) ﺮﯾﺬﭘ ﻑﺎﻄﻌﻧﺍ ﯼﺎﻫ ﻢﺘﯾﺁ ﻪﺑ ﺭﺎﮐﺩﻮﺧ ﺭﻮﻃ ﻪﺑ ﺮﯾﺬﭘ ﻑﺎﻄﻌﻧﺍ ﻑﺮﻇ ﮏﯾ

1

2

3

4

.ﺖﺳﺍ ﯼﺮﺘﺴﮐﺎﺧ ﺶﻤﺧ ﻑﺮﻇ ﮏﯾ ﻞﺧﺍﺩ ﺭﺩ ﯽﺑﺁ ﺲﮑﻠﻓ ﻢﺘﯾﺁ ﺭﺎﻬﭼ ﻩﺪﻨﻫﺩ ﻥﺎﺸﻧ ﻻﺎﺑ ﺮﺼﻨﻋ

ﻝﺎﺜﻣ

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

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  background-color: #f1f1f1;
}

.flex-container > div {
  background-color: DodgerBlue;
  color: white;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>

<h1>Flexible Items</h1>

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

<p>All direct children of a flexible container becomes flexible items.</p>

</body>
</html>

:ﺯﺍ ﺪﻨﺗﺭﺎﺒﻋ flex ﻢﺘﯾﺁ ﯼﺎﻫ ﯽﮔﮋﯾﻭ

  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self

ﺵﺭﺎﻔﺳ ﻝﺍﻮﻣﺍ

.ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﺍﺭ ﺮﯾﺬﭘ ﻑﺎﻄﻌﻧﺍ ﻡﻼﻗﺍ ﺐﯿﺗﺮﺗ order

1

2

3

4

.ﺩﻮﺷ ﺮﻫﺎﻇ ﺡﺮﻃ ﺭﺩ ﺩﺭﻮﻣ ﻦﯿﻟﻭﺍ ﻥﺍﻮﻨﻋ ﻪﺑ ﺖﺴﯿﻧ ﻡﺯﻻ ﺪﮐ ﺭﺩ ﺮﯾﺬﭘ ﻑﺎﻄﻌﻧﺍ ﺩﺭﻮﻣ ﻦﯿﻟﻭﺍ

.ﺖﺳﺍ 0 ﺽﺮﻓ ﺶﯿﭘ ﺭﺍﺪﻘﻣ ،ﺪﺷﺎﺑ ﺩﺪﻋ ﮏﯾ ﺪﯾﺎﺑ ﺵﺭﺎﻔﺳ ﺭﺍﺪﻘﻣ

ﻝﺎﺜﻣ

:ﺪﻫﺩ ﺮﯿﯿﻐﺗ ﺍﺭ ﺮﯾﺬﭘﻑﺎﻄﻌﻧﺍ ﺩﺭﺍﻮﻣ ﺐﯿﺗﺮﺗ ﺪﻧﺍﻮﺗﯽﻣ 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>

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  align-items: stretch;
  background-color: #f1f1f1;
}

.flex-container>div {
  background-color: DodgerBlue;
  color: white;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>

<h1>The order Property</h1>

<p>Use the order property to sort the flex items as you like:</p>

<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>

</body>
</html>

flex-grow ﮎﻼﻣﺍ

.ﺩﺮﮐ ﺪﻫﺍﻮﺧ ﺪﺷﺭ ﺮﯾﺬﭘﻑﺎﻄﻌﻧﺍ ﺩﺭﺍﻮﻣ ﻪﯿﻘﺑ ﻪﺑ ﺖﺒﺴﻧ ﺭﺪﻘﭼ flex ﻢﺘﯾﺁ ﮏﯾ ﻪﮐ ﺪﻨﮐ

1

2

3

.ﺖﺳﺍ 0 ﺽﺮﻓ ﺶﯿﭘ ﺭﺍﺪﻘﻣ ،ﺪﺷﺎﺑ ﺩﺪﻋ ﮏﯾ ﺪﯾﺎﺑ ﺭﺍﺪﻘﻣ

ﻝﺎﺜﻣ

:ﺪﯿﻫﺩ ﺪﺷﺭ ﺲﮑﻠﻓ ﻡﻼﻗﺍ ﺮﯾﺎﺳ ﺯﺍ ﺮﺘﻌﯾﺮﺳ ﺮﺑﺍﺮﺑ ﺖﺸﻫ ﺍﺭ ﺲﮑﻠﻓ ﻢﺘﯾﺁ ﻦﯿﻣﻮﺳ

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

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  align-items: stretch;
  background-color: #f1f1f1;
}

.flex-container > div {
  background-color: DodgerBlue;
  color: white;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>

<h1>The flex-grow Property</h1>

<p>Make the third flex item grow eight times faster than the other flex items:</p>

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

</body>
</html>

ﺮﯾﺬﭘ ﻑﺎﻄﻌﻧﺍ ﯽﮔﮋﯾﻭ

.ﺩﻮﺷ ﯽﻣ ﮏﭼﻮﮐ ﺮﯾﺬﭘ ﻑﺎﻄﻌﻧﺍ ﺩﺭﺍﻮﻣ ﻪﯿﻘﺑ ﻪﺑ ﺖﺒﺴﻧ ﺭﺪﻘﭼ flex ﻢﺘﯾﺁ ﮏﯾ ﻪﮐ ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ <

1

2

3

4

5

6

7

8

9

10

.ﺖﺳﺍ 1 ﺽﺮﻓ ﺶﯿﭘ ﺭﺍﺪﻘﻣ ،ﺪﺷﺎﺑ ﺩﺪﻋ ﮏﯾ ﺪﯾﺎﺑ ﺭﺍﺪﻘﻣ

ﻝﺎﺜﻣ

:ﺩﻮﺷ ﮏﭼﻮﮐ ﺮﯾﺬﭘ ﻑﺎﻄﻌﻧﺍ ﺩﺭﺍﻮﻣ ﺮﯾﺎﺳ ﻩﺯﺍﺪﻧﺍ ﻪﺑ ﻡﻮﺳ ﺮﯾﺬﭘ ﻑﺎﻄﻌﻧﺍ ﻢﺘﯾﺁ ﺪﯿﻫﺪﻧ ﻩﺯﺎﺟﺍ

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex-shrink: 
  0">3</div>
    <div>4</div>
  <div>5</div>
  <div>6</div>
  
  <div>7</div>
  <div>8</div>
  <div>9</div>
  
  <div>10</div>
</div>

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  align-items: stretch;
  background-color: #f1f1f1;
}

.flex-container>div {
  background-color: DodgerBlue;
  color: white;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>

<h1>The flex-shrink Property</h1>

<p>Do not let the third flex item shrink as much as the other flex items:</p>

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex-shrink: 0">3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
</div>

</body>
</html>

ﯼﺮﯾﺬﭘ ﻑﺎﻄﻌﻧﺍ ﺮﺑ ﯽﻨﺘﺒﻣ ﮎﻼﻣﺍ

.ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﺍﺭ ﺲﮑﻠﻓ ﺩﺭﻮﻣ ﮏﯾ ﻪﯿﻟﻭﺍ ﻝﻮﻃ flex-basis

1

2

3

4

ﻝﺎﺜﻣ

:ﺪﯿﻨﮐ ﻢﯿﻈﻨﺗ ﻞﺴﮑﯿﭘ 200 ﯼﻭﺭ ﺍﺭ ﺮﯾﺬﭘ ﻑﺎﻄﻌﻧﺍ ﺩﺭﻮﻣ ﻦﯿﻣﻮﺳ ﻪﯿﻟﻭﺍ ﻝﻮﻃ

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

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  align-items: stretch;
  background-color: #f1f1f1;
}

.flex-container > div {
  background-color: DodgerBlue;
  color: white;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>

<h1>The flex-basis Property</h1>

<p>Set the initial length of the third flex item to 200 pixels:</p>

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

</body>
</html>

ﺲﮑﻠﻓ ﯽﮔﮋﯾﻭ

.ﺖﺳﺍ <"code class="w3-codespan> ﯼﺍﺮﺑ ﺮﺼﺘﺨﻣ ﯽﮔﮋﯾﻭ ﮏﯾ

ﻝﺎﺜﻣ

ﮏﯾ ﺎﺑ ﻭ (0) ﻥﺪﺷ ﻊﻤﺟ ﻞﺑﺎﻗ ﺮﯿﻏ ،(0) ﺪﺷﺭ ﻞﺑﺎﻗﺮﯿﻏ ﺍﺭ ﺮﯾﺬﭘ ﻑﺎﻄﻌﻧﺍ ﺩﺭﻮﻣ ﻦﯿﻣﻮﺳ

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

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  align-items: stretch;
  background-color: #f1f1f1;
}

.flex-container>div {
  background-color: DodgerBlue;
  color: white;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>

<h1>The flex Property</h1>

<p>Make the third flex item not growable (0), not shrinkable (0), and with an initial length of 200 pixels:</p>

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

</body>
</html>

align-self ﯽﮔﮋﯾﻭ

.ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﺮﯾﺬﭘ ﻑﺎﻄﻌﻧﺍ ﻑﺮﻇ ﻞﺧﺍﺩ ﺭﺩ ﺍﺭ ﯽﺑﺎﺨﺘﻧﺍ ﺩﺭﻮﻣ ﺯﺍﺮﺗ align-items ﯽﮔﮋﯾﻭ ﻂﺳﻮﺗ ﻩﺪﺷ

1

2

3

4

.ﻢﯿﻨﮐﯽﻣ ﻩﺩﺎﻔﺘﺳﺍ <"code class="w3-codespan> ﺮﺘﻬﺑ ﻥﺩﺍﺩ ﻥﺎﺸﻧ ﯼﺍﺮﺑ ﻞﺴﮑﯿﭘ 200

ﻝﺎﺜﻣ

:ﺪﯿﻨﮐ ﺯﺍﺮﺗ ﻑﺮﻇ ﻂﺳﻭ ﺭﺩ ﺍﺭ ﺮﯾﺬﭘ ﻑﺎﻄﻌﻧﺍ ﺩﺭﻮﻣ ﻦﯿﻣﻮﺳ

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

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  height: 200px;
  background-color: #f1f1f1;
}

.flex-container > div {
  background-color: DodgerBlue;
  color: white;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>

<h1>The align-self Property</h1>

<p>The "align-self: center;" aligns the selected flex item in the middle of the container:</p>

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

<p>The align-self property overrides the align-items property of the container.</p>

</body>
</html>

ﻝﺎﺜﻣ

ﺪﯿﻨﮐ ﺯﺍﺮﺗ ﻑﺮﻇ ﯼﻻﺎﺑ ﺭﺩ ﺍﺭ ﺲﮑﻠﻓ ﺩﺭﻮﻣ ﻦﯿﻣﻮﺳ ﻭ ﻑﺮﻇ ﯼﻻﺎﺑ ﺭﺩ ﺍﺭ ﺲﮑﻠﻓ ﺩﺭﻮﻣ ﻦﯿﻣﻭﺩ

<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>

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  height: 200px;
  background-color: #f1f1f1;
}

.flex-container > div {
  background-color: DodgerBlue;
  color: white;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>

<h1>The align-self Property</h1>

<p>The "align-self: flex-start;" aligns the selected flex item at the top of the container.</p>
<p>The "align-self: flex-end;" aligns the selected flex item at the bottom of the container.</p>

<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>

<p>The align-self property overrides the align-items property of the container.</p>

</body>
</html>

CSS Flexbox Items ﯼﺎﻫ ﯽﮔﮋﯾﻭ

:ﺪﻨﮐ ﯽﻣ ﺖﺳﺮﻬﻓ ﺍﺭ CSS Flexbox Items ﯼﺎﻫ ﯽﮔﮋﯾﻭ ﻡﺎﻤﺗ ﺮﯾﺯ ﻝﻭﺪﺟ

align-self

(ﺪﻨﮐ ﯽﻣ ﻮﻐﻟ ﺍﺭ ﺮﯾﺬﭘ ﻑﺎﻄﻌﻧﺍ ﻑﺮﻇ align-items ﯽﮔﮋﯾﻭ) ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ flex ﻢﺘﯾﺁ ﮏﯾ ﯼﺍﺮ

flex

flex-bases ﻭ flex-grow، flex-shrink ﯼﺍﺮﺑ ﺮﺼﺘﺨﻣ ﯽﮔﮋﯾﻭ ﮏﯾ

flex-basis

ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﺍﺭ ﺲﮑﻠﻓ ﻢﺘﯾﺁ ﮏﯾ ﻪﯿﻟﻭﺍ ﻝﻮﻃ

flex-grow

ﺪﻨﮐ ﺪﺷﺭ ﺭﺪﻘﭼ ﻑﺮﻇ ﻥﺎﻤﻫ ﻞﺧﺍﺩ ﺭﺩ ﺲﮑﻠﻓ ﻡﻼﻗﺍ ﻪﯿﻘﺑ ﻪﺑ ﺖﺒﺴﻧ ﺲﮑﻠﻓ ﻢﺘﯾﺁ ﮏﯾ ﻪﮐ ﺪﻨﮐ ﯽﻣ ﺺﺨ

flex-shrink

.ﺩﻮﺷ ﯽﻣ ﮏﭼﻮﮐ ﻑﺮﻇ ﻥﺎﻤﻫ ﻞﺧﺍﺩ ﺮﯾﺬﭘ ﻑﺎﻄﻌﻧﺍ ﻡﻼﻗﺍ ﻪﯿﻘﺑ ﻪﺑ ﺖﺒﺴﻧ ﺭﺪﻘﭼ ﺮﯾﺬﭘ ﻑﺎﻄﻌﻧﺍ ﻢﺘﯾﺁ

order

ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﻑﺮﻇ ﮏﯾ ﻞﺧﺍﺩ ﺭﺩ ﺍﺭ ﺲﮑﻠﻓ ﻡﻼﻗﺍ ﺐﯿﺗﺮﺗ

تمامی حقوق محفوظ است. © BasicIT.org • 2023-2024