css - Flexbox 布局字体与 fittext 脱离容器

Question

我有一个使用 flexbox 构建的布局，它占据了 100% 的视口(viewport)，然后将屏幕分成 4 个 25% 高度的行..

http://jsfiddle.net/g010vc2k/25/

$(".row_content").fitText(.4);

#holder{
  height:100vh;
  position:absolute;
  top:0;
  left:0;
  overflow:hidden;
  width:100%;
}

.button{
  display:block;
  background:red;
  clear:both;
}

.row_1{
  background:wheat;
  height:25%;
  display:flex;
  justify-content:center;
  text-align:center;
  align-items:center;
}


.row_2{
  background:teal;
  display:flex;
  height:25%;
  justify-content:center;
  text-align:center;
  align-items:center;
}
  
.row_3{
  background:yellow;
  display:flex;
  height:25%;
  justify-content:center;
  text-align:center;
  align-items:center;
}

.row_4{
  background:gray;
  display:flex;
  height:25%;
  justify-content:center;
  text-align:center;
  align-items:center;
}

.row_content{
  font-size:60px;
  display:block;
}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/FitText.js/1.2.0/jquery.fittext.js"></script>


<div id="holder">
    <div class="row_1">
    <span class="row_content">
      <p>
        Row  1 Content
      </p>
    </span>
    <span class="button">
      <button>
          Click Me
      </button>
    </span>
  </div>
    <div class="row_2">
    <span class="row_content">
      <p>
        Row  2 Content
      </p>
    </span>
    <span class="button">
      <button>
          Click Me
      </button>
    </span>
  </div>
    <div class="row_3">
    <span class="row_content">
      <p>
        Row  3 Content
      </p>
    </span>
    <span class="button">
      <button>
          Click Me
      </button>
    </span>
  </div>
    <div class="row_4">
    <span class="row_content">
      <p>
        Row  4 Content
      </p>
    </span>
    <span class="button">
      <button>
          Click Me
      </button>
    </span>
  </div>
</div>

我遇到了几个问题，首先我无法让按钮位于每行内容的下方。我认为 display:flex 可能给我带来了问题。

其次，文本从容器中溢出。我虽然 fittext 可以解决这个问题，但我做错了什么？

Answer 1

• display:flex 始终将其子元素彼此相邻对齐，因此 row 为默认值。将 flex-direction:column; 添加到您的行元素中，按钮将位于文本下方。

• 也许您可以在不使用 javascript 的情况下添加解决方案。使用媒体查询减小较小视口(viewport)的字体大小。就性能而言，仅 CSS 始终是更好的选择。

关于 flexbox 和媒体查询的更多信息:

• https://css-tricks.com/snippets/css/a-guide-to-flexbox/
• https://css-tricks.com/snippets/css/media-queries-for-standard-devices/