آموزش واکنش گرایی با Flexbox در CSS

در فصل مدیا کوئری ها در CSS، آموختید که با استفاده از مدیا کوئری ها می توانیم برای سایز های مختلف صفحه و دستگاه های مختلف، چینش های متفاوتی را ایجاد کنیم. بعنوان مثال، اگر می خواهید برای سایزهای بزرگ صفحه یک چینش سه ستونه و برای سایزهای کوچک صفحه(مانند تلفن های همراه)، یک چینش یک ستونه ایجاد کنید، می توانید در یک نقطه ی شکست خاص(مانند 600px در مثال زیر)، ویژگی flex-direction را از row به column تغییر دهید:

این پنجره را تغییر اندازه دهید تا نتیجه را مشاهده کنید. 

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

.flex-item {
  background-color: #f1f1f1;
  padding: 10px;
  font-size: 30px;
  text-align: center;
  width: 100%;
}
/*استفاده از چینش یک ستونه به جای چینش سه ستونه*/
@media (max-width: 600px) {
  .flex-container {
    flex-direction: column;
  }
}

یک راه دیگر این است که برای آیتم های فلکس، درصد ویژگی flex را تغییر دهیم تا برای سایزهای مختلف صفحه ی نمایش(screen) چینش های متفاوتی را ایجاد کنیم. برای اینکه این مثال کار کند، باید از دستور flex-wrap: wrap در ظرف فلکس(container) استفاده کنیم:

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

.flex-item {
  background-color: #f1f1f1;
  padding: 10px;
  text-align: center;
  font-size: 30px;
  flex: 33.3%;
}

/*استفاده از چینش یک ستونی به جای چینش سه ستونی*/
@media (max-width: 600px) {
  .flex-item {
    flex: 100%;
  }
}

منبع: https://www.w3schools.com/css