Flexbox布局字体突破容器与fittext

Question

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

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

＆＃13;

＆＃13;

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

＆＃13;

#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;
}
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我遇到了一些问题，首先我无法让按钮位于每行内容的下方。我认为显示：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;添加到文本和按钮的垂直堆叠的所有行中，并为margin: 0标记添加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>