Question

由于某种原因，当水平区域太小而无法显示时，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>

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

Answer 2

更改css中.container_changed的宽度：

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

文本没有破坏flexbox内部

2 个答案: