Question

我开始设计移动第一网站。首次付费网站！在我掌握flexbox之前我没有使用Bootstrap，所以不要说使用bootstra // templates :)我遇到问题，因为我的网站在浏览移动设备时看起来不错，但在查看时看起来像垃圾一个大屏幕。

我遇到的一个特定问题是2x7行/列网格，单词溢出容器，但适合移动视图。

这不是特定于chrome。

如何使flexbox移动友好？它只是灵活增长/缩小？我发现奇怪的是我的div需要随着屏幕变大而缩小，并且他们def不应该变得更大......如果我将div的白色部分变成更大的VH，它也会＆＃34;修复＆＃34;它。但这似乎反直觉......在一个更大的屏幕上我必须使容器更大％才能适合相同大小的字体??

或者这是媒体查询的事情......如果是这样的话会是什么？媒体查询使字体变小似乎是错误的，如果可能的话，我正在寻找最好的方法/最佳实践而不是解决方法：）

我的代码：

 HTML5:


  <div class="s2-row" >

        <div class="s2-columns center">Talent Management</div> 
        <div class="s2-columns center">Athlete & Artist Development</div>
        <div class="s2-columns center">Booking Talent</div>
        <div class="s2-columns center">Negotiating Booking Rights</div> 
        <div class="s2-columns center">STravel Logistics</div>
        <div class="s2-columns center">Sound</div>
        <div class="s2-columns center">Lights</div> 
        <div class="s2-columns center">Backline Equipment</div>
        <div class="s2-columns center">Venue Selection</div>
        <div class="s2-columns center">Event Set-Up & Contracting</div> 
        <div class="s2-columns center">Sponsor Mangement</div>
        <div class="s2-columns center">Promotional Negotations</div>
        <div class="s2-columns center">Complete Event Presentations</div> 
        <div class="s2-columns center">Rider Requirements</div>
        <div class="s2-row2 center">As well as many other event specific 
needs</div>

    </div>


 CSS3:


  div.s2-row {
    display: flex;
    flex-wrap: wrap;
    line-height: 2;
    text-align: center;
    margin-bottom: 50px;
 }

 div.s2-columns {
     flex-basis: 50%;
 }

  h3.s2-row2 {
     text-align: center;
     width: 100%;
      margin-top: 15px;
      font-weight: 600;
     font-size: 30px;
}

.center {
    align-self: center;
}

Desktop View

Mobile View

提前谢谢！

（第二张照片是它在手机上的样子）

Answer 1

我决定简单地将容器元素做得更大。我想我也可以搞唬flex-shrink / grow或媒体查询，但我保持简单。

Flexbox内容溢出容器。铬

1 个答案: