1

我有一个使用 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 会解决这个问题，但我做错了什么？

4

2 回答 2

1

  • display:flex始终将其子元素彼此相邻对齐，以便row默认设置。添加flex-direction:column;到您的行元素，按钮将放置在文本下方。

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

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

于 2017-08-10T13:50:54.677 回答
0

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>

于 2017-08-10T13:55:50.693 回答