CloseTag | الشروحات | CSS | تجاوب العناصر مع نظام flex box في لغة CSS | CSS Flex Responsive | css responsive image gallery using flexbox

<!DOCTYPE html>
<html>
<style>
*
{
  box-sizing: border-box;
}


.header
{
  text-align: center;
  padding: 32px;
}

.row
{
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

.column
{
  flex: 25%;
  max-width: 25%;
  padding: 0 4px;
}

.column img
{
  margin-top: 8px;
  vertical-align: middle;
}

@media (max-width: 800px) {
  .column {
    flex: 50%;
    max-width: 50%;
  }
}

@media (max-width: 600px) {
  .column {
    flex: 100%;
    max-width: 100%;
  }
}
</style>
<body>

<div class="header">
  <h1>Responsive Image Flex</h1>
  <p>Resize the browser window to see the responsive effect.</p>
</div>

<!-- Photo Flex -->
<div class="row"> 
  <div class="column">
    <img src="https://www.closetag.com/images/photo1.jpg" style="width:100%">
    <img src="https://www.closetag.com/images/photo2.jpg" style="width:100%">
    <img src="https://www.closetag.com/images/photo3.jpg" style="width:100%">
    <img src="https://www.closetag.com/images/photo4.jpg" style="width:100%">
    <img src="https://www.closetag.com/images/photo5.jpg" style="width:100%">
    <img src="https://www.closetag.com/images/photo6.jpg" style="width:100%">
    <img src="https://www.closetag.com/images/photo7.jpg" style="width:100%">
  </div>
  
  <div class="column">
    <img src="https://www.closetag.com/images/photo2.jpg" style="width:100%">
    <img src="https://www.closetag.com/images/photo1.jpg" style="width:100%">
     <img src="https://www.closetag.com/images/photo7.jpg" style="width:100%">
    <img src="https://www.closetag.com/images/photo5.jpg" style="width:100%">
    <img src="https://www.closetag.com/images/photo6.jpg" style="width:100%">
  </div> 
   
  <div class="column">
     <img src="https://www.closetag.com/images/photo1.jpg" style="width:100%">
    <img src="https://www.closetag.com/images/photo3.jpg" style="width:100%">
    <img src="https://www.closetag.com/images/photo5.jpg" style="width:100%">
    <img src="https://www.closetag.com/images/photo7.jpg" style="width:100%">
    <img src="https://www.closetag.com/images/photo2.jpg" style="width:100%">
    <img src="https://www.closetag.com/images/photo4.jpg" style="width:100%">
  </div>
  
  <div class="column">
     <img src="https://www.closetag.com/images/photo7.jpg" style="width:100%">
     <img src="https://www.closetag.com/images/photo6.jpg" style="width:100%">
    <img src="https://www.closetag.com/images/photo3.jpg" style="width:100%">
     <img src="https://www.closetag.com/images/photo6.jpg" style="width:100%">
     <img src="https://www.closetag.com/images/photo5.jpg" style="width:100%">
     <img src="https://www.closetag.com/images/photo4.jpg" style="width:100%">

   </div>
</div>

</body>
</html>

PCFET0NUWVBFIGh0bWw+DQo8aHRtbD4NCjxzdHlsZT4NCioNCnsNCiAgYm94LXNpemluZzogYm9yZGVyLWJveDsNCn0NCg0KDQouaGVhZGVyDQp7DQogIHRleHQtYWxpZ246IGNlbnRlcjsNCiAgcGFkZGluZzogMzJweDsNCn0NCg0KLnJvdw0Kew0KICBkaXNwbGF5OiBmbGV4Ow0KICBmbGV4LXdyYXA6IHdyYXA7DQogIHBhZGRpbmc6IDAgNHB4Ow0KfQ0KDQouY29sdW1uDQp7DQogIGZsZXg6IDI1JTsNCiAgbWF4LXdpZHRoOiAyNSU7DQogIHBhZGRpbmc6IDAgNHB4Ow0KfQ0KDQouY29sdW1uIGltZw0Kew0KICBtYXJnaW4tdG9wOiA4cHg7DQogIHZlcnRpY2FsLWFsaWduOiBtaWRkbGU7DQp9DQoNCkBtZWRpYSAobWF4LXdpZHRoOiA4MDBweCkgew0KICAuY29sdW1uIHsNCiAgICBmbGV4OiA1MCU7DQogICAgbWF4LXdpZHRoOiA1MCU7DQogIH0NCn0NCg0KQG1lZGlhIChtYXgtd2lkdGg6IDYwMHB4KSB7DQogIC5jb2x1bW4gew0KICAgIGZsZXg6IDEwMCU7DQogICAgbWF4LXdpZHRoOiAxMDAlOw0KICB9DQp9DQo8L3N0eWxlPg0KPGJvZHk+DQoNCjxkaXYgY2xhc3M9ImhlYWRlciI+DQogIDxoMT5SZXNwb25zaXZlIEltYWdlIEZsZXg8L2gxPg0KICA8cD5SZXNpemUgdGhlIGJyb3dzZXIgd2luZG93IHRvIHNlZSB0aGUgcmVzcG9uc2l2ZSBlZmZlY3QuPC9wPg0KPC9kaXY+DQoNCjwhLS0gUGhvdG8gRmxleCAtLT4NCjxkaXYgY2xhc3M9InJvdyI+IA0KICA8ZGl2IGNsYXNzPSJjb2x1bW4iPg0KICAgIDxpbWcgc3JjPSJodHRwczovL3d3dy5jbG9zZXRhZy5jb20vaW1hZ2VzL3Bob3RvMS5qcGciIHN0eWxlPSJ3aWR0aDoxMDAlIj4NCiAgICA8aW1nIHNyYz0iaHR0cHM6Ly93d3cuY2xvc2V0YWcuY29tL2ltYWdlcy9waG90bzIuanBnIiBzdHlsZT0id2lkdGg6MTAwJSI+DQogICAgPGltZyBzcmM9Imh0dHBzOi8vd3d3LmNsb3NldGFnLmNvbS9pbWFnZXMvcGhvdG8zLmpwZyIgc3R5bGU9IndpZHRoOjEwMCUiPg0KICAgIDxpbWcgc3JjPSJodHRwczovL3d3dy5jbG9zZXRhZy5jb20vaW1hZ2VzL3Bob3RvNC5qcGciIHN0eWxlPSJ3aWR0aDoxMDAlIj4NCiAgICA8aW1nIHNyYz0iaHR0cHM6Ly93d3cuY2xvc2V0YWcuY29tL2ltYWdlcy9waG90bzUuanBnIiBzdHlsZT0id2lkdGg6MTAwJSI+DQogICAgPGltZyBzcmM9Imh0dHBzOi8vd3d3LmNsb3NldGFnLmNvbS9pbWFnZXMvcGhvdG82LmpwZyIgc3R5bGU9IndpZHRoOjEwMCUiPg0KICAgIDxpbWcgc3JjPSJodHRwczovL3d3dy5jbG9zZXRhZy5jb20vaW1hZ2VzL3Bob3RvNy5qcGciIHN0eWxlPSJ3aWR0aDoxMDAlIj4NCiAgPC9kaXY+DQogIA0KICA8ZGl2IGNsYXNzPSJjb2x1bW4iPg0KICAgIDxpbWcgc3JjPSJodHRwczovL3d3dy5jbG9zZXRhZy5jb20vaW1hZ2VzL3Bob3RvMi5qcGciIHN0eWxlPSJ3aWR0aDoxMDAlIj4NCiAgICA8aW1nIHNyYz0iaHR0cHM6Ly93d3cuY2xvc2V0YWcuY29tL2ltYWdlcy9waG90bzEuanBnIiBzdHlsZT0id2lkdGg6MTAwJSI+DQogICAgIDxpbWcgc3JjPSJodHRwczovL3d3dy5jbG9zZXRhZy5jb20vaW1hZ2VzL3Bob3RvNy5qcGciIHN0eWxlPSJ3aWR0aDoxMDAlIj4NCiAgICA8aW1nIHNyYz0iaHR0cHM6Ly93d3cuY2xvc2V0YWcuY29tL2ltYWdlcy9waG90bzUuanBnIiBzdHlsZT0id2lkdGg6MTAwJSI+DQogICAgPGltZyBzcmM9Imh0dHBzOi8vd3d3LmNsb3NldGFnLmNvbS9pbWFnZXMvcGhvdG82LmpwZyIgc3R5bGU9IndpZHRoOjEwMCUiPg0KICA8L2Rpdj4gDQogICANCiAgPGRpdiBjbGFzcz0iY29sdW1uIj4NCiAgICAgPGltZyBzcmM9Imh0dHBzOi8vd3d3LmNsb3NldGFnLmNvbS9pbWFnZXMvcGhvdG8xLmpwZyIgc3R5bGU9IndpZHRoOjEwMCUiPg0KICAgIDxpbWcgc3JjPSJodHRwczovL3d3dy5jbG9zZXRhZy5jb20vaW1hZ2VzL3Bob3RvMy5qcGciIHN0eWxlPSJ3aWR0aDoxMDAlIj4NCiAgICA8aW1nIHNyYz0iaHR0cHM6Ly93d3cuY2xvc2V0YWcuY29tL2ltYWdlcy9waG90bzUuanBnIiBzdHlsZT0id2lkdGg6MTAwJSI+DQogICAgPGltZyBzcmM9Imh0dHBzOi8vd3d3LmNsb3NldGFnLmNvbS9pbWFnZXMvcGhvdG83LmpwZyIgc3R5bGU9IndpZHRoOjEwMCUiPg0KICAgIDxpbWcgc3JjPSJodHRwczovL3d3dy5jbG9zZXRhZy5jb20vaW1hZ2VzL3Bob3RvMi5qcGciIHN0eWxlPSJ3aWR0aDoxMDAlIj4NCiAgICA8aW1nIHNyYz0iaHR0cHM6Ly93d3cuY2xvc2V0YWcuY29tL2ltYWdlcy9waG90bzQuanBnIiBzdHlsZT0id2lkdGg6MTAwJSI+DQogIDwvZGl2Pg0KICANCiAgPGRpdiBjbGFzcz0iY29sdW1uIj4NCiAgICAgPGltZyBzcmM9Imh0dHBzOi8vd3d3LmNsb3NldGFnLmNvbS9pbWFnZXMvcGhvdG83LmpwZyIgc3R5bGU9IndpZHRoOjEwMCUiPg0KICAgICA8aW1nIHNyYz0iaHR0cHM6Ly93d3cuY2xvc2V0YWcuY29tL2ltYWdlcy9waG90bzYuanBnIiBzdHlsZT0id2lkdGg6MTAwJSI+DQogICAgPGltZyBzcmM9Imh0dHBzOi8vd3d3LmNsb3NldGFnLmNvbS9pbWFnZXMvcGhvdG8zLmpwZyIgc3R5bGU9IndpZHRoOjEwMCUiPg0KICAgICA8aW1nIHNyYz0iaHR0cHM6Ly93d3cuY2xvc2V0YWcuY29tL2ltYWdlcy9waG90bzYuanBnIiBzdHlsZT0id2lkdGg6MTAwJSI+DQogICAgIDxpbWcgc3JjPSJodHRwczovL3d3dy5jbG9zZXRhZy5jb20vaW1hZ2VzL3Bob3RvNS5qcGciIHN0eWxlPSJ3aWR0aDoxMDAlIj4NCiAgICAgPGltZyBzcmM9Imh0dHBzOi8vd3d3LmNsb3NldGFnLmNvbS9pbWFnZXMvcGhvdG80LmpwZyIgc3R5bGU9IndpZHRoOjEwMCUiPg0KDQogICA8L2Rpdj4NCjwvZGl2Pg0KDQo8L2JvZHk+DQo8L2h0bWw+