小编New*_*ake的帖子

我想知道是否可以使用 Flexbox 项目的高度来设置字体大小。我有一个使用视口单位设置的 Flexbox 容器，项目的高度由 flex-grow 属性确定。我要做的是将字体大小设置为这些项目的高度，并在视口更改时保留这些关系。

我有一个有点工作的基本想法，但我不确定如何仅隔离字母（基线到大写高度）并将其缩放到项目容器。

https://codepen.io/NewbCake/pen/JvwNJq （垂直调整窗口大小以设置字体大小）

我愿意接受有关如何解决此问题或可能遇到的任何陷阱的任何建议。

超文本标记语言

<section class="center">
  <div class="container">
    <div class="item1">H</div>
    <div class="item2">H</div>
  </div>
</section>

CSS

section {
  display:flex;
  flex-direction:row;
  height:95vh;
  width:100%;
  border:1px solid red;
}

.container {
  display:flex;
  flex-direction:column;
  height:80vh;
  width:80vh;
  border:1px solid blue;
}

.container_wide {
  display:flex;
  flex-direction:column;
  height:80vh;
  width:80vh;
  border:1px solid blue;
}

.center {
  justify-content:center;
  align-items:center;
}

.item1 {
  flex-grow:1;
  flex-shrink:0;
  flex-basis:auto;
  border:1px solid green;
  line-height:.75;
}

.item2 {
  flex-grow:3;
  flex-shrink:0;
  flex-basis:auto;
  border:1px solid green;
  line-height:.75;
}

JS

var …

使用iDangerous Swiper，您如何定位和隐藏第一张幻灯片的.left-arrow类？文档中有此内容-mySwiper.getFirstSlide（）-返回第一个滑块幻灯片（幻灯片实例），但是如何指示在此幻灯片上隐藏左箭头？

js不方便，但我尝试过类似的尝试，但没有成功：

mySwiper.getFirstSlide({
  $(this).find('.left-arrow').hide(),
});

var firstSlide = mySwiper.getFirstSlide();
firstSlide.find('.left-arrow').hide();

这可能需要一个条件语句-如果它是第一张幻灯片，则隐藏左箭头，否则显示它。我只是不确定如何设置类似的东西。任何帮助表示赞赏。谢谢。

http://codepen.io/NewbCake/pen/sIbxi