文本没有破坏flexbox内部

时间:2016-03-22 12:41:16

标签: html css html5 css3 flexbox

由于某种原因,当水平区域太小而无法显示时,Flex容器内的文本没有正确断开。 但即使处于“正常”状态,它也应该不会破裂?

我在这里做错了什么?

(function () {
    var el;
    el = document.getElementById('clicker');
    el.onclick = function () {
        el.classList.toggle('container_changed');
        return null;
    };
}.call(this));
body {
  background: #333;
}

.container {
  width: 100px;
  position: relative;
}
.container img {
  width: 100%;
  height: auto;
}
.container .caption {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  vertical-align: middle;
}
.container span {
  color: white;
  font-family: 'Nobile', sans-serif;
  font-size: 1em;
  text-align: right;
}

.container_changed {
  height: 200px;
  width: 200px;
}
.container_changed img {
  width: initial;
  height: 100%;
}
<div id="clicker" class="container">
  <img src="http://www.placebear.com/300/800">
  <div class="caption">
    <span>Ceci n'est pas un ours</span>
  </div>
</div>

2 个答案:

答案 0 :(得分:1)

为代码添加一些华丽的调试颜色:

  • 您的弹性容器是透明的slateblue背景(我们的图像的兄弟姐妹:) :)
  • 您的弹性项目是包含文字的范围。

(以防万一)尽管有类名,.container不是你的灵活容器。它是.caption。而span是这里唯一的灵活项目。

您可以看到,如果文本较长,它仍会在点击后换行,因为Flex容器宽度为200px,文本占用的数量超过了此值。

如果您是初次使用flexbox,最终的chetsheet位于CSS Tricks。等等,即使不是新的,你仍会发现它很有用:)

(function () {
    var el;
    el = document.getElementById('clicker');
    el.onclick = function () {
        el.classList.toggle('container_changed');
        return null;
    };
}.call(this));
body {
  background: #333;
}

.container {
  width: 100px;
  position: relative;
}
.container img {
  width: 100%;
  height: auto;
}
.container .caption {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  vertical-align: middle;
  background: rgba(106,90,205, 0.7); /*slateblue*/
}
.container span {
  color: white;
  font-family: 'Nobile', sans-serif;
  font-size: 1em;
  text-align: right;
  background: tomato;
}

.container_changed {
  height: 200px;
  width: initial;
}
.container_changed img {
  width: initial;
  height: 100%;
}
<div id="clicker" class="container">
  <img src="http://www.placebear.com/300/800">
  <div class="caption">
    <span>Ceci n'est pas un ours (also click me!)</span>
  </div>
</div>

答案 1 :(得分:0)

更改css中.container_changed的宽度:

.container_changed {
    height: 200px;
    width: 75px;
}