相关疑难解决方法(0)

我有4个flexbox列,一切正常,但是当我向列添加一些文本并将其设置为较大的字体大小时,由于flex属性,它使得列比应该更宽.

我尝试使用word-break: break-word并且它有所帮助,但是当我将列调整到非常小的宽度时,文本中的字母被分成多行(每行一个字母),但是列的宽度不比一个字母大小小.

观看此视频 (一开始,第一列是最小的,但是当我调整窗口大小时,它是最宽的列.我只想总是尊重flex设置; flex size 1:3:4:4)

我知道,将字体大小和列填充设置为较小会有所帮助......但还有其他解决方案吗？

我不能用overflow-x: hidden.

的jsfiddle

.container {
  display: flex;
  width: 100%
}
.col {
  min-height: 200px;
  padding: 30px;
  word-break: break-word
}
.col1 {
  flex: 1;
  background: orange;
  font-size: 80px
}
.col2 {
  flex: 3;
  background: yellow
}
.col3 {
  flex: 4;
  background: skyblue
}
.col4 {
  flex: 4;
  background: red
}

<div class="container">
  <div class="col col1">Lorem ipsum dolor</div>
  <div class="col col2">Lorem ipsum dolor</div>
  <div class="col col3">Lorem ipsum dolor</div> …

我有几个列,我使用flex给出相等的宽度.每个都包含img标签,我希望这些图像能够展示object-fit: cover尺寸.

.container {
  display: flex;
  flex-direction: row;
  width: 100%;
}
.test {
  flex: 1;
  margin-right: 1rem;
  overflow: hidden;
  height: 400px;
}
img {
  object-fit: cover;
}

<div class="container">
  <div class="test"><img src="http://placehold.it/1920x1080"></div>
  <div class="test"><img src="http://placehold.it/1920x1080"></div>
  <div class="test"><img src="http://placehold.it/1920x1080"></div>
  <div class="test"><img src="http://placehold.it/1920x1080"></div>
</div>

图像没有调整大小,如本演示中所示.这是为什么？

我有一个非常奇怪的问题,我在过去的两天里一直试图解决这个问题但无济于事.我正在构建的页面具有以下结构:

我可以很容易地实现AB布局,整体父母拥有display: flex; flex-direction: column; align-items: stretch并设置A为flex: 0 0 auto和Bflex: 1 1 0; min-height: 100px;

然而,我在B中将C和D布局真的很麻烦.我觉得flex/row是B的正确方法,但我无法得到具体细节.所以我在尝试:

.B {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: space-between;
}

.C {
    flex: 1 1 0;
}

.D {
    object-fit: scale-down;
}

但显然这还不够.如果我将图像设置为具有flex: 1 1 0最小宽度,则图像要么根本不缩小,要缩小但是会扭曲或留下很多空间.

我有什么想法可以达到我的需求吗？

更新:我尝试将jsfiddle放在这里 - https://jsfiddle.net/2gsrzwwq/3/ - 但由于某种原因,它甚至不会尊重height:100%父母.就图像拟合而言,我需要将图像缩小到D div的高度,然后使D块的宽度减小到仅包含缩小的图像 - 并且C块占据剩余的宽度.