主页 / 问题 / 1340297
Accepted
kiskiskit
Asked:2022-03-20 23:24:30 +0000 UTC2022-03-20 23:24:30 +0000 UTC

如何在两列中布置 Flex 元素？

  • 772

请告诉我如何以 250 像素和 991 像素的分辨率在 2 列中正确布置 flex 元素。以下是它在移动设备上的外观： 在此处输入图像描述

我失败的代码：

.item {
 
    background: red;
    width: 300px;
    height: 300px;
    margin-bottom: 20px;
   margin-right: 10px;
  
}


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



@media (min-width: 250px) and (max-width: 991px) {
  .items {
    flex-direction: column;
  }
}
<div class="items">
  <div class="item">
    
  </div>
  <div class="item">
    
  </div>
  <div class="item">
    
  </div>
  <div class="item">
    
  </div>
  <div class="item">
    
  </div>
  <div class="item">
    
  </div>
</div>

html

1 个回答

  1. Best Answer

    如果我理解正确，这里是解决方案： https ://jsfiddle.net/ctka8z1y/

    HTML：

    <div class="container">
  <div class="col1">
    <p>1 левая</p>
    <p>2 левая</p>
    <p>3 левая</p>
  </div>
  
  <div class="col2">
    <p>1 правая</p>
    <p>2 правая</p>
    <p>3 правая</p>
  </div>
</div>

    css

    .container {
  display: flex;
  flex-direction: row;
  margin: 0;
  padding: 0;
}

.col1, .col2 {
  display: flex;
  flex-direction: row;
  margin: 0;
  padding: 0;
  margin-right: 5px;
}

@media (min-width: 250px) and (max-width: 991px) {
  .col1, .col2 {
    flex-direction: column;
  }
}

p {
  border-radius: 2px;
  border: 1px solid black;
}
    • 2

相关问题