Flexbox 布局字体使用 fittext 突破容器

Question

我有一个使用 flexbox 构建的布局，它占据了 100% 的视口，然后将屏幕分成 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 的情况下添加解决方案。使用媒体查询减小较小视口的字体大小。在性能方面，仅 CSS 始终是更好的选择。

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

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

Answer 2

在所有行中添加flex-direction: column;用于文本和按钮的垂直堆叠，并为内部的p标签添加margin: 0，以防止因间距过大造成重叠：

（注意：全屏打开sn-p，否则文字过大）

$(".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;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  align-items: center;
}

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

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

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

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

.row_content p {
  margin: 0;
}

<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>