CSS Flexbox (ﺮﯾﺬﭘ ﻑﺎﻄﻌﻧﺍ ﻪﺒﻌﺟ)

فهرست مطالب

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

1

2

3

4

5

6

7

8

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

<!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>Flexible Boxes</h1>

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

<p>Try to resize the browser window.</p>
<p>A container with "flex-wrap: nowrap;" will never wrap its items.</p>
<p><strong>Note:</strong> Flexbox is not supported in Internet Explorer 10 or earlier versions.</p>

</body>
</html>

CSS Flexbox ﯼﺪﻨﺑ ﺡﺮﻃ ﻝﻭﮊﺎﻣ

:ﺖﺷﺍﺩ ﺩﻮﺟﻭ ﻥﺎﻣﺪﯿﭼ ﺖﻟﺎﺣ ﺭﺎﻬﭼ ،Flexbox Layout ﻝﻭﮊﺎﻣ ﺯﺍ ﻞﺒﻗ

Block: ﺏﻭ ﻪﺤﻔﺻ ﮏﯾ ﺭﺩ ﯽﯾﺎﻫ ﺶﺨﺑ ﯼﺍﺮﺑ ،ﮎﻮﻠﺑ ﺪﻨﻧﺎﻣ
Inline: ﻦﺘﻣ ﯼﺍﺮﺑ ،ﯽﻄﺧ ﻥﻭﺭﺩ
Table: ﯼﺪﻌﺑ ﻭﺩ ﻝﻭﺪﺟ ﯼﺎﻫ ﻩﺩﺍﺩ ﯼﺍﺮﺑ ،ﻝﻭﺪﺟ
Positioned: ﺮﺼﻨﻋ ﮏﯾ ﺢﯾﺮﺻ ﺖﯿﻌﻗﻮﻣ ﯼﺍﺮﺑ ،ﺖﯿﻌﻗﻮﻣ

.ﺪﻨﮐ ﯽﻣ ﺮﺗ ﻥﺎﺳﺁ ﯽﺑﺎﯾ ﺖﯿﻌﻗﻮﻣ ﺎﯾ ﺭﻭﺎﻨﺷ ﺯﺍ ﻩﺩﺎﻔﺘﺳﺍ ﻥﻭﺪﺑ ﺍﺭ ﺮﯾﺬﭘ ﻑﺎﻄﻌﻧﺍ ﻮﮕﺨﺳﺎﭘ ﯼﺪﻨ

ﺮﮔﺭﻭﺮﻣ ﯽﻧﺎﺒﯿﺘﺸﭘ

.ﺩﻮﺷ ﯽﻣ ﯽﻧﺎﺒﯿﺘﺸﭘ ﻥﺭﺪﻣ ﯼﺎﻫﺮﮔﺭﻭﺮﻣ ﻡﺎﻤﺗ ﺭﺩ flexbox ﯼﺎﻫ ﯽﮔﮋﯾﻭ


29.0	11.0	22.0	10	48

ﺲﮐﺎﺑ ﺲﮑﻠﻓ ﺮﺻﺎﻨﻋ

.ﺪﯿﻨﮐ ﻒﯾﺮﻌﺗ ﺲﮑﻠﻓ ﻑﺮﻇ ﮏﯾ ﺪﯾﺎﺑ ﺍﺪﺘﺑﺍ ،Flexbox ﻝﺪﻣ ﺯﺍ ﻩﺩﺎﻔﺘﺳﺍ ﻉﻭﺮﺷ ﯼﺍﺮﺑ

1

2

3

.ﺖﺳﺍ ﺮﯾﺬﭘ ﻑﺎﻄﻌﻧﺍ ﻢﺘﯾﺁ ﻪﺳ ﺎﺑ (ﯽﺑﺁ ﻪﯿﺣﺎﻧ) ﺮﯾﺬﭘ ﻑﺎﻄﻌﻧﺍ ﻑﺮﻇ ﮏﯾ ﻩﺪﻨﻫﺩ ﻥﺎﺸﻧ ﻻﺎﺑ ﺮﺼﻨﻋ

ﻝﺎﺜﻣ

:ﺲﮑﻠﻓ ﺩﺭﻮﻣ ﻪﺳ ﺎﺑ ﺲﮑﻠﻓ ﻑﺮﻇ ﮏﯾ

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

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

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

.ﺖﺧﻮﻣﺁ ﺪﯿﻫﺍﻮﺧ ﺮﺘﺸﯿﺑ ﺲﮑﻠﻓ ﻡﻼﻗﺍ ﻭ ﺲﮑﻠﻓ ﻑﻭﺮﻇ ﺩﺭﻮﻣ ﺭﺩ ﯼﺪﻌﺑ ﯼﺎﻫ ﻞﺼﻓ ﺭﺩ