【问题标题】:Item alignment in mobile using flexbox [duplicate]使用flexbox在移动设备中对齐项目[重复]
【发布时间】:2020-04-22 11:59:06
【问题描述】:

当涉及到使用 flexbox 的移动尺寸时,我希望这些项目与图片中的对齐方式相同。

【问题讨论】:

标签: css flexbox


【解决方案1】:

flex-wrap 是可以将 silbing 项目移动到下一行的那个。

使用flex-basis可以调整每个项目的宽度。

您只需选择需要将手机与桌面分开的@media

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

.div1, .div2, .div3 { 
  flex-grow: 1;
  flex-shrink: 0;
}

.div1 { flex-basis: 100%; }
.div2, .div3 { flex-basis: 50%; }

@media (min-width: 700px) {
/* select desired media */
  .div1, .div2, .div3 { flex-basis: auto; }
}
<div class="parent">
  <div class="div1">1</div>
  <div class="div2">2</div>
  <div class="div3">3</div>
</div>

【讨论】:

    【解决方案2】:

    虽然 Gridbox 更适合这项任务,但可以通过以下代码在 Flexbox 中完成:

    <div class="container">
      <div class="a">1</div>
      <div>2</div>
      <div>3</div>
    </div>
    
    .container {  
      display: flex;
    
      div {
        width: 300px;
        height: 500px;
        border: solid 1px red;
      }  
    }
    
    @media (max-width: 800px) {
    
      .container {
        flex-wrap: wrap;
    
        .a {
          width: 100%;  
        }
      }
    }
    

    关键是在较小的视口启用换行并调整要跨越整行的 div 的宽度。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2020-07-07
      • 2017-03-27
      • 2021-02-08
      • 2015-09-09
      • 2018-01-23
      • 1970-01-01
      • 2021-03-18
      • 2021-03-06
      相关资源
      最近更新 更多