CSS Flexbox ﺮﻨﯿﺘﻧﺎﮐ

فهرست مطالب

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

(ﺮﻨﯿﺘﻧﺎﮐ) ﯽﻠﺻﺍ ﺮﺼﻨﻋ

:ﺖﺳﺍ ﺮﯾﺬﭘ ﻑﺎﻄﻌﻧﺍ ﻡﻼﻗﺍ ﻪﺳ ﺎﺑ ﺮﯾﺬﭘ ﻑﺎﻄﻌﻧﺍ (ﯽﺑﺁ ﻪﯿﺣﺎﻧ)ﺮ

1

2

3

ﺩﻮﺷ ﯽﻣ ﺮﯾﺬﭘ ﻑﺎﻄﻌﻧﺍ display ﯽﮔﮋﯾﻭ ﻢﯿﻈﻨﺗ ﺎﺑ fle

ﻝﺎﺜﻣ

 .flex-container {
  
  display: flex;
}

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

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

.flex-container > div {
  background-color: #f1f1f1;
  margin: 10px;
  padding: 20px;
  font-size: 30px;
}
</style>
</head>
<body>

<h1>Create a Flex Container</h1>

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

<p>A Flexible Layout must have a parent element with the <em>display</em> property set to <em>flex</em>.</p>

<p>Direct child elements(s) of the flexible container automatically becomes flexible items.</p>

</body>
</html>

:ﺯﺍ ﺪﻨﺗﺭﺎﺒﻋ ﺮﯾﺬﭘ ﻑﺎﻄﻌﻧﺍ ﻑﺮﻇ ﺹﺍﻮﺧ

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content

ﺖﻬﺟ ﺲﮑﻠﻓ ﯽﮔﮋﯾﻭ

.ﺩﺭﺍﺬﮕﺑ ﻢﻫ ﯼﻭﺭ ﺍﺭ ﺮﯾﺬﭘﻑﺎﻄﻌﻧﺍ ﺩﺭﺍﻮﻣ ﺪﻫﺍﻮﺧﯽﻣ ﺖﻬﺟ ﻡﺍﺪﮐ ﺭﺩ ﻑﺮﻇ ﻪﮐ ﺪﻨﮐu20

1

2

3

ﻝﺎﺜﻣ

:ﺪﻫﺩ ﯽﻣ ﺭﺍﺮﻗ ﻢﻫ ﯼﻭﺭ (ﻦﯿﯾﺎﭘ ﻪﺑ ﻻﺎﺑ ﺯﺍ) ﯼﺩﻮﻤﻋ ﺕﺭﻮﺻ ﻪﺑ ﺍﺭ ﺮﯾﺬﭘ ﻑﺎﻄﻌﻧﺍ ﺩﺭﺍﻮﻣ 

 .flex-container {
  
  display: flex;
  
  flex-direction: column;
}

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

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  flex-direction: column;
  background-color: DodgerBlue;
}

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

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

<p>The "flex-direction: column;" stacks the flex items vertically (from top to bottom):</p>

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

</body>
</html>

ﻝﺎﺜﻣ

:ﺪﻨﯿﭼ ﯽﻣ ﻢﻫ ﯼﻭﺭ (ﻻﺎﺑ ﻪﺑ ﻦﯿﯾﺎﭘ ﺯﺍ ﺎﻣﺍ) ﯼﺩﻮﻤﻋ ﺕﺭﻮﺻ ﻪﺑ ﺍﺭ ﺮﯾﺬﭘ ﻑﺎﻄﻌﻧﺍ ﺩﺭﺍﻮﻣ 

 .flex-container {
  
  display: flex;
  
  flex-direction: column-reverse;
}

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

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  flex-direction: column-reverse;
  background-color: DodgerBlue;
}

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

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

<p>The "flex-direction: column-reverse;" stacks the flex items vertically (but from bottom to top):</p>

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

</body>
</html>

ﻝﺎﺜﻣ

:ﺪﻨﮐ ﯽﻣ ﻪﺘﺸﭘ (ﺖﺳﺍﺭ ﻪﺑ ﭗﭼ ﺯﺍ) ﯽﻘﻓﺍ ﺕﺭﻮﺻ ﻪﺑ ﺍﺭ ﺮﯾﺬﭘ ﻑﺎﻄﻌﻧﺍ ﺩﺭﺍﻮﻣ ﻒﯾﺩﺭ<"co

 .flex-container {
  
  display: flex;
  
  flex-direction: row;
}

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

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  flex-direction: row;
  background-color: DodgerBlue;
}

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

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

<p>The "flex-direction: row;" stacks the flex items horizontally (from left to right):</p>

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

</body>
</html>

ﻝﺎﺜﻣ

:ﺪﻨﯿﭼ ﯽﻣ ﻢﻫ ﯼﻭﺭ (ﭗﭼ ﻪﺑ ﺖﺳﺍﺭ ﺯﺍ ﺎﻣﺍ) ﯽﻘﻓﺍ ﺕﺭﻮﺻ ﻪﺑ ﺍﺭ ﺮﯾﺬﭘ ﻑﺎﻄﻌﻧﺍ ﺩﺭﺍﻮﻣ 

 .flex-container {
  
  display: flex;
  
  flex-direction: row-reverse;
}

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

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  flex-direction: row-reverse;
  background-color: DodgerBlue;
}

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

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

<p>The "flex-direction: row-reverse;" stacks the flex items horizontally (but from right to left):</p>

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

</body>
</html>

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

.ﺮﯿﺧ ﺎﯾ ﺪﻧﻮﺷ ﻪﺘﺴﺑ ﺪﯾﺎﺑ ﺮﯾﺬﭘﻑﺎﻄﻌﻧﺍ ﺩﺭﺍﻮﻣ ﺎﯾﺁ ﻪﮐ ﺪﻨﮐﯽﻣ ﺺﺨﺸﻣ

.ﺪﻨﻫﺩ ﻥﺎﺸﻧ ﺮﺘﻬﺑ ﺍﺭ <"code class="w3-codespan> ﺎﺗ ﺪﻨﺘﺴﻫ ﺮﯾﺬﭘ ﻑﺎﻄﻌﻧﺍ ﺩﺭﻮﻣ 12 ﯼﺍﺭ

1

2

3

4

5

6

7

8

9

10

11

12

ﻝﺎﺜﻣ

:ﺪﻧﻮﺷﯽﻣ ﻪﺘﺴﺑ ﻡﻭﺰﻟ ﺕﺭﻮﺻ ﺭﺩ ﺮﯾﺬﭘﻑﺎﻄﻌﻧﺍ ﺩﺭﺍﻮﻣ ﻪﮐ ﺪﻨﮐﯽﻣ ﺺﺨﺸﻣ 

 .flex-container {
  
  display: flex;
  
  flex-wrap: wrap;
}

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

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

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

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

<p>The "flex-wrap: wrap;" specifies that the flex items will wrap if necessary:</p>

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>4</div>
  <div>5</div>
  <div>6</div>  
  <div>7</div>
  <div>8</div>
  <div>9</div>  
  <div>10</div>
  <div>11</div>
  <div>12</div>  
</div>

<p>Try resizing the browser window.</p>

</body>
</html>

ﻝﺎﺜﻣ

ﻦﯾﺍ) ﺪﻧﻮﺷ ﯽﻤﻧ ﻪﺘﺴﺑ ﺮﯾﺬﭘ ﻑﺎﻄﻌﻧﺍ ﺩﺭﺍﻮﻣ ﻪﮐ ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ 

 .flex-container {
  
  display: flex;
  
  flex-wrap: nowrap;
}

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

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  flex-wrap: nowrap;
  background-color: DodgerBlue;
}

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

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

<p>The "flex-wrap: nowrap;" specifies that the flex items will not wrap (this is default):</p>

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>4</div>
  <div>5</div>
  <div>6</div>  
  <div>7</div>
  <div>8</div>
  <div>9</div>  
  <div>10</div>
  <div>11</div>
  <div>12</div>  
</div>

<p>Try resizing the browser window.</p>

</body>
</html>

ﻝﺎﺜﻣ

ﺪﻧﻮﺷﯽﻣ ﻪﺘﺴﺑ ﻒﻄﻌﻨﻣ ﺩﺭﺍﻮﻣ ﻪﮐ ﺪﻨﮐﯽﻣ ﺺﺨﺸﻣ wrap

 .flex-container {
  
  display: flex;
  
  flex-wrap: wrap-reverse;
}

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

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  flex-wrap: wrap-reverse;
  background-color: DodgerBlue;
}

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

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

<p>The "flex-wrap: wrap-reverse;" specifies that the flex items will wrap if necessary, in reverse order:</p>

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>4</div>
  <div>5</div>
  <div>6</div>  
  <div>7</div>
  <div>8</div>
  <div>9</div>  
  <div>10</div>
  <div>11</div>
  <div>12</div>  
</div>

<p>Try resizing the browser window.</p>

</body>
</html>

ﻥﺎﯾﺮﺟ ﺲﮑﻠﻓ ﯽﮔﮋﯾﻭ

.ﺖﺳﺍ <"code class="w3-codespan> ﻭﺩ ﺮﻫ ﻢﯿﻈﻨﺗ ﯼﺍﺮﺑ ﺮﺼﺘﺨﻣ ﯽﮔﮋﯾﻭ ﮏﯾ

ﻝﺎﺜﻣ

 .flex-container {
  
  display: flex;
  
  flex-flow: row wrap;
}

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

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  flex-flow: row wrap;
  background-color: DodgerBlue;
}

.flex-container > div {
  background-color: #f1f1f1;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>
<h1>The flex-flow Property</h1>

<p>The flex-flow property is a shorthand property for the flex-direction and the flex-wrap properties.</p>

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>4</div>
  <div>5</div>
  <div>6</div>  
  <div>7</div>
  <div>8</div>
  <div>9</div>  
  <div>10</div>
  <div>11</div>
  <div>12</div>  
</div>

<p>Try resizing the browser window.</p>

</body>
</html>

ﺍﻮﺘﺤﻣ ﻪﯿﺟﻮﺗ ﯽﮔﮋﯾﻭ

:ﺩﻮﺷ ﯽﻣ ﻩﺩﺎﻔﺘﺳﺍ ﺮﯾﺬﭘ ﻑﺎﻄﻌﻧﺍ ﺩﺭﺍﻮﻣ ﻥﺩﺮﮐ ﺯﺍﺮﺗ ﯼﺍﺮﺑ jus

1

2

3

ﻝﺎﺜﻣ

:ﺪﻨﮐ ﯽﻣ ﺯﺍﺮﺗ ﻑﺮﻇ ﺰﮐﺮﻣ ﺭﺩ ﺍﺭ ﺮﯾﺬﭘ ﻑﺎﻄﻌﻧﺍ ﺩﺭﺍﻮﻣ center

 .flex-container {
  
  display: flex;
  
  justify-content: center;
}

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

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  justify-content: center;
  background-color: DodgerBlue;
}

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

<h1>The justify-content Property</h1>

<p>The "justify-content: center;" aligns the flex items at the center of the container:</p>

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

</body>
</html>

ﻝﺎﺜﻣ

ﺪﻨﮐ ﯽﻣ ﺯﺍﺮﺗ ﻑﺮﻇ ﯼﺍﺪﺘﺑﺍ ﺭﺩ ﺍﺭ ﺮﯾﺬﭘ ﻑﺎﻄﻌﻧﺍ ﺩﺭﺍﻮﻣ flex-

 .flex-container {
  
  display: flex;
  
  justify-content: flex-start;
}

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

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  justify-content: flex-start;
  background-color: DodgerBlue;
}

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

<h1>The justify-content Property</h1>

<p>The "justify-content: flex-start;" aligns the flex items at the beginning of the container (this is default):</p>

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

</body>
</html>

ﻝﺎﺜﻣ

:ﺪﻨﮐ ﯽﻣ ﺯﺍﺮﺗ ﻑﺮﻇ ﯼﺎﻬﺘﻧﺍ ﺭﺩ ﺍﺭ ﺲﮑﻠﻓ ﺩﺭﺍﻮﻣ flex-end

 .flex-container {
  
  display: flex;
  
  justify-content: flex-end;
}

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

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  justify-content: flex-end;
  background-color: DodgerBlue;
}

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

<h1>The justify-content Property</h1>

<p>The "justify-content: flex-end;" aligns the flex items at the end of the container:</p>

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

</body>
</html>

ﻝﺎﺜﻣ

.ﺪﻫﺩ ﯽﻣ ﺶﯾﺎﻤﻧ ،ﻦﯿﺑ ،ﻞﺒﻗ ﻪﻠﺻﺎﻓ ﺎﺑ ﺍﺭ ﺮﯾﺬﭘ ﻑﺎﻄﻌﻧﺍ ﯼﺎﻫ ﻢﺘﯾﺁ

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

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  justify-content: space-around;
  background-color: DodgerBlue;
}

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

<h1>The justify-content Property</h1>

<p>The "justify-content: space-around;" displays the flex items with space before, between, and after the lines:</p>

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

</body>
</html>

ﻝﺎﺜﻣ

ﻦﯿﺑ ﻪﻠﺻﺎﻓ ﺎﺑ ﺍﺭ ﺮﯾﺬﭘ ﻑﺎﻄﻌﻧﺍ ﺩﺭﺍﻮﻣ space-between

 .flex-container {
  
  display: flex;
  
  justify-content: space-between;
}

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

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  justify-content: space-between;
  background-color: DodgerBlue;
}

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

<h1>The justify-content Property</h1>

<p>The "justify-content: space-between;" displays the flex items with space between the lines:</p>

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

</body>
</html>

ﻡﻼﻗﺍ-align ﯽﮔﮋﯾﻭ

.ﺩﻮﺷ ﯽﻣ ﻩﺩﺎﻔﺘﺳﺍ ﺮﯾﺬﭘ ﻑﺎﻄﻌﻧﺍ ﯼﺎﻫ ﻢﺘﯾﺁ ﻥﺩﺮﮐ ﺯﺍﺮﺗ ﯼﺍﺮﺑ

1

2

3

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

ﻝﺎﺜﻣ

ﻂﺳﻭ ﺭﺩ ﺍﺭ ﺮﯾﺬﭘ ﻑﺎﻄﻌﻧﺍ ﺩﺭﺍﻮﻣ center ﺭﺍﺪﻘﻣ

 .flex-container {
  
  display: flex;
  height: 200px;
  
  align-items: center;
}

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

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  height: 200px;
  align-items: center;
  background-color: DodgerBlue;
}

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

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

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

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

</body>
</html>

ﻝﺎﺜﻣ

:ﺪﻨﮐ ﯽﻣ ﺯﺍﺮﺗ ﻑﺮﻇ ﯼﻻﺎﺑ ﺭﺩ ﺍﺭ ﺮﯾﺬﭘ ﻑﺎﻄﻌﻧﺍ ﺩﺭﺍﻮﻣ flex-s

 .flex-container {
  
  display: flex;
  height: 200px;
  
  align-items: flex-start;
}

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

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  height: 200px;
  align-items: flex-start;
  background-color: DodgerBlue;
}

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

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

<p>The "align-items: flex-start;" aligns the flex items at the top of the container:</p>

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

</body>
</html>

ﻝﺎﺜﻣ

:ﺪﻨﮐ ﯽﻣ ﺯﺍﺮﺗ ﻑﺮﻇ ﻦﯿﯾﺎﭘ ﺭﺩ ﺍﺭ ﺲﮑﻠﻓ ﺩﺭﺍﻮﻣ flex-end

 .flex-container {
  
  display: flex;
  height: 200px;
  
  align-items: flex-end;
}

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

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  height: 200px;
  align-items: flex-end;
  background-color: DodgerBlue;
}

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

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

<p>The "align-items: flex-end;" aligns the flex items at the bottom of the container:</p>

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

</body>
</html>

ﻝﺎﺜﻣ

ﺪﻫﺩ ﯽﻣ ﺶﮐ ﻑﺮﻇ ﻥﺩﺮﮐ ﺮﭘ ﯼﺍﺮﺑ ﺍﺭ ﺮﯾﺬﭘ ﻑﺎﻄﻌﻧﺍ ﻡﻼﻗﺍ stret

 .flex-container {
  
  display: flex;
  height: 200px;
  
  align-items: stretch;
}

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

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  height: 200px;
  align-items: stretch;
  background-color: DodgerBlue;
}

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

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

<p>The "align-items: stretch;" stretches the flex items to fill the container (this is default):</p>

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

</body>
</html>

ﻝﺎﺜﻣ

:ﺪﻨﮐ ﯽﻣ ﺯﺍﺮﺗ ﺍﺭ ﺎﻬﻧﺁ ﻪﯾﺎﭘ ﻁﻮﻄﺧ ﯼﺎﻫﺯﺍﺮﺗ ﺪﻨﻧﺎﻣ ﺮﯾﺬﭘ ﻑﺎﻄﻌﻧﺍ ﺩﺭﺍﻮﻣ ﺎﻨﺒﻣ ﻂﺧ<

 .flex-container {
  
  display: flex;
  height: 200px;
  
  align-items: baseline;
}

ﻪﺟﻮﺗ: ﺪﻧﻮﺷ ﯽﻣ ﺯﺍﺮﺗ ﻦﺘﻣ ﺎﻨﺒﻣ ﻂﺧ ﺎﺑ ﺩﺭﺍﻮﻣ ﻪﮐ ﺪﻫﺩ ﻥﺎﺸﻧ ﺎﺗ ﺩﻮﺷ ﯽﻣ

1

2

3

4

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

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  height: 200px;
  align-items: baseline;
  background-color: DodgerBlue;
}

.flex-container > div {
  background-color: #f1f1f1;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>
<h1>The align-items Property</h1>

<p>The "align-items: baseline;" aligns the flex items such as their baselines aligns:</p>

<div class="flex-container">
  <div><h1>1</h1></div>
  <div><h6>2</h6></div>
  <div><h3>3</h3></div>  
  <div><small>4</div>  
</div>

</body>
</html>

align-content ﯽﮔﮋﯾﻭ

.ﺩﻮﺷ ﯽﻣ ﻩﺩﺎﻔﺘﺳﺍ ﺮﯾﺬﭘ ﻑﺎﻄﻌﻧﺍ ﻁﻮﻄﺧ ﻥﺩﺮﮐ ﺯﺍﺮﺗ ﯼﺍﺮﺑ alig

1

2

3

4

5

6

7

8

9

10

11

12

.ﻢﯿﻨﮐﯽﻣ ﻩﺩﺎﻔﺘﺳﺍ <"code class="w3-codespan> ﺎﺑ ﻞﺴﮑﯿﭘ 600 ﻉﺎﻔﺗﺭﺍ ﺎﺑ ﻑﺮﻇ ﮏﯾ

ﻝﺎﺜﻣ

:ﺪﻫﺩ ﯽﻣ ﺶﯾﺎﻤﻧ ﺎﻬﻧﺁ ﻦﯿﺑ ﯼﻭﺎﺴﻣ ﻪﻠﺻﺎﻓ ﺎﺑ ﺍﺭ ﺮﯾﺬﭘ ﻑﺎﻄﻌﻧﺍ ﻁﻮﻄﺧ

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

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: space-between;
  overflow: scroll;
  background-color: DodgerBlue;
}

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

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

<p>The "align-content: space-between;" displays the flex lines with equal space between them:</p>

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>4</div>
  <div>5</div>
  <div>6</div>  
  <div>7</div>
  <div>8</div>
  <div>9</div>  
  <div>10</div>
  <div>11</div>
  <div>12</div>  
</div>

</body>
</html>

ﻝﺎﺜﻣ

.ﺪﻫﺩ ﯽﻣ ﻥﺎﺸﻧ ﻞﺒﻗ ﻪﻠﺻﺎﻓ ﺎﺑ ﺍﺭ ﺮﯾﺬﭘ ﻑﺎﻄﻌﻧﺍ ﻁﻮﻄﺧ space-

 .flex-container {
  
  display: flex;
  height: 600px;
  
  flex-wrap: wrap;
  
  align-content: space-around;
}

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

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: space-around;
  overflow: scroll;  
  background-color: DodgerBlue;
}

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

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

<p>The "align-content: space-around;" displays the flex lines with space before, between, and after them:</p>

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>4</div>
  <div>5</div>
  <div>6</div>  
  <div>7</div>
  <div>8</div>
  <div>9</div>  
  <div>10</div>
  <div>11</div>
  <div>12</div>  
</div>

</body>
</html>

ﻝﺎﺜﻣ

ﺩﺮﯿﮕﺑ ﺍﺭ ﻪﯿﻘﺑ ﺎﺗ ﻩﺪﯿﺸﮐ ﺍﺭ ﻒﻄﻌﻨﻣ ﻁﻮﻄﺧ stretch

 .flex-container {
  
  display: flex;
  height: 600px;
  
  flex-wrap: wrap;
  
  align-content: stretch;
}

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

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: stretch;
  overflow: scroll;  
  background-color: DodgerBlue;
}

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

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

<p>The "align-content: stretch;" stretches the flex lines to take up the remaining space (this is default):</p>

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>4</div>
  <div>5</div>
  <div>6</div>  
  <div>7</div>
  <div>8</div>
  <div>9</div>  
  <div>10</div>
  <div>11</div>
  <div>12</div>  
</div>

</body>
</html>

ﻝﺎﺜﻣ

:ﺪﻫﺩ ﯽﻣ ﺶﯾﺎﻤﻧ ﻑﺮﻇ ﻂﺳﻭ ﺭﺩ ﺍﺭ ﺮﯾﺬﭘ ﻑﺎﻄﻌﻧﺍ ﻁﻮﻄﺧ center<

 .flex-container {
  
  display: flex;
  height: 600px;
  
  flex-wrap: wrap;
  
  align-content: center;
}

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

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: center;
  overflow: scroll;  
  background-color: DodgerBlue;
}

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

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

<p>The "align-content: center;" displays the flex lines in the middle of the container:</p>

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>4</div>
  <div>5</div>
  <div>6</div>  
  <div>7</div>
  <div>8</div>
  <div>9</div>  
  <div>10</div>
  <div>11</div>
  <div>12</div>  
</div>

</body>
</html>

ﻝﺎﺜﻣ

:ﺪﻫﺩ ﯽﻣ ﺶﯾﺎﻤﻧ ﻑﺮﻇ ﯼﺍﺪﺘﺑﺍ ﺭﺩ ﺍﺭ ﺮﯾﺬﭘ ﻑﺎﻄﻌﻧﺍ ﻁﻮﻄﺧ flex

 .flex-container {
  
  display: flex;
  height: 600px;
  
  flex-wrap: wrap;
  
  align-content: flex-start;
}

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

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: flex-start;
  overflow: scroll;  
  background-color: DodgerBlue;
}

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

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

<p>The "align-content: flex-start;" displays the flex lines at the start of the container:</p>

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>4</div>
  <div>5</div>
  <div>6</div>  
  <div>7</div>
  <div>8</div>
  <div>9</div>  
  <div>10</div>
  <div>11</div>
  <div>12</div>  
</div>

</body>
</html>

ﻝﺎﺜﻣ

:ﺪﻫﺩ ﯽﻣ ﺶﯾﺎﻤﻧ ﻑﺮﻇ ﯼﺎﻬﺘﻧﺍ ﺭﺩ ﺍﺭ ﺮﯾﺬﭘ ﻑﺎﻄﻌﻧﺍ ﻁﻮﻄﺧ flex

 .flex-container {
  
  display: flex;
  height: 600px;
  
  flex-wrap: wrap;
  
  align-content: flex-end;
}

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

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: flex-end;
  overflow: scroll;  
  background-color: DodgerBlue;
}

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

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

<p>The "align-content: flex-end;" displays the flex lines at the end of the container:</p>

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>4</div>
  <div>5</div>
  <div>6</div>  
  <div>7</div>
  <div>8</div>
  <div>9</div>  
  <div>10</div>
  <div>11</div>
  <div>12</div>  
</div>

</body>
</html>

ﻞﻣﺎﮐ ﺖﯾﺰﮐﺮﻣ

.ﻞﻣﺎﮐ ﯼﺯﺎﺳ ﺰﮐﺮﻣ :ﺩﺮﮐ ﻢﯿﻫﺍﻮﺧ ﻞﺣ ﺍﺭ ﺞﯾﺍﺭ ﺭﺎﯿﺴﺑ ﮏﺒﺳ ﻪﻠﺌﺴﻣ ﮏﯾ ﺮﯾﺯ ﻝﺎﺜﻣ ﺭﺩ

ﻞﺣ ﻩﺍﺭ: ﯽﮔﮋﯾﻭ ﻭﺩ ﺮﻫ justify-content

ﻝﺎﺜﻣ

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

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

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
  background-color: DodgerBlue;
}

.flex-container > div {
  background-color: #f1f1f1;
  color: white;
  width: 100px;
  height: 100px;
}
</style>
</head>
<body>

<h1>Perfect Centering</h1>

<p>A flex container with both the justify-content and the align-items properties set to <em>center</em> will align the item(s) in the center (in both axis).</p>

<div class="flex-container">
  <div></div>
</div>

</body>
</html>

CSS Flexbox Container ﯼﺎﻫ ﯽﮔﮋﯾﻭ

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

align-content

.ﺪﻨﮐ ﯽﻣ ﺯﺍﺮﺗ ﺍﺭ ﺮﯾﺬﭘ ﻑﺎﻄﻌﻧﺍ ﻁﻮﻄﺧ ،ﺮﯾﺬﭘ ﻑﺎﻄﻌﻧﺍ ﯼﺎﻫ ﻢﺘﯾﺁ ﻥﺩﺮﮐ ﺯﺍﺮﺗ ﯼﺎﺟ ﻪﺑ ﺎﻣﺍ ،ﺖ

align-items

ﺪﻨﮐ ﯽﻣ ﺯﺍﺮﺗ ﯼﺩﻮﻤﻋ ﺕﺭﻮﺻ ﻪﺑ ﺍﺭ ﺮﯾﺬﭘ ﻑﺎﻄﻌﻧﺍ ﺩﺭﺍﻮﻣ ،ﺪﻨﻨﮐ ﯽﻤﻧ ﻩﺩﺎﻔﺘﺳﺍ ﻊﻃﺎﻘﺘﻣ ﺭﻮﺤﻣ ﺭ

display

ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﺍﺭ HTML ﺮﺼﻨﻋ ﮏﯾ ﯼﺍﺮﺑ ﻩﺩﺎﻔﺘﺳﺍ ﺩﺭﻮﻣ ﺭﺩﺎﮐ ﻉﻮﻧ

flex-direction

ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﺮﯾﺬﭘ ﻑﺎﻄﻌﻧﺍ ﻑﺮﻇ ﮏﯾ ﻞﺧﺍﺩ ﺭﺩ ﺍﺭ ﺮﯾﺬﭘ ﻑﺎﻄﻌﻧﺍ ﻡﻼﻗﺍ ﺖﻬﺟ

flex-flow

flex-wrap ﻭ flex-direction ﯼﺍﺮﺑ ﺮﺼﺘﺨﻣ ﯽﮔﮋﯾﻭ ﮏﯾ

flex-wrap

ﺩﺭﺍﺪﻧ ﺩﻮﺟﻭ ﺲﮑﻠﻓ ﻂﺧ ﮏﯾ ﺭﺩ ﺎﻬﻧﺁ ﯼﺍﺮﺑ ﯽﻓﺎﮐ ﯼﺎﻀﻓ ﺮﮔﺍ ،ﻪﻧ ﺎﯾ ﺪﻧﻮﺷ ﻪﺘﺴﺑ ﺪﯾﺎﺑ ﺲﮑﻠﻓ ﻡﻼ

justify-content

ﺪﻨﮐ ﯽﻣ ﺯﺍﺮﺗ ﯽﻘﻓﺍ ﺕﺭﻮﺻ ﻪﺑ ﺍﺭ ﺮﯾﺬﭘ ﻑﺎﻄﻌﻧﺍ ﺩﺭﺍﻮﻣ ،ﺪﻨﻨﮐ ﯽﻤﻧ ﻩﺩﺎﻔﺘﺳﺍ ﯽﻠﺻﺍ ﺭﻮﺤﻣ ﺭﺩ ﺩ

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