相关疑难解决方法(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> …

所以我有这个网格:

+---------+------------------------------+---------+    
|  <div>  |  <p> - 1000 characters long  |  <div>  |
+---------+------------------------------+---------+

里面p有超长的字符串,没有空格.divs是具有固定尺寸的占位符.这产生了以上:

  display: grid;
  grid-auto-flow: column;
  grid-template-columns: auto minmax(0, 1fr) auto;

但minmax(0, 1fr)改为1fr给出这个:

+---------+----------------------------------------+    
|  <div>  |               <p> - 1000 characters long  |  <div>  |
+---------+----------------------------------------+

它从其父级溢出并超出屏幕大小.为什么它不像minmax？

Codepen

我一直在阅读CSS Tricks 上的CSS 网格教程，但一个基本方面让我有点困惑。

似乎有两种方法可以确定网格项跨越多少个单元格：

1. grid-template-areagrid-area使用为具有属性的网格项指定的名称
2. 使用grid-column-start/end和grid-row-start/end

看看下面的测试代码，似乎 的大小grid items是按以下顺序决定的（其中左侧的值覆盖右侧的值）：

grid-row/column-start/end>>grid-template-area物品本身的尺寸

问题

1. 我的上述顺序通常是正确的吗？
2. 是否有指定大小grid items（即它们跨越多少个单元格）的首选方法（上面的 1 或 2）？

代码

.container {
  display: grid;
  border: 1px solid green;
  grid-template-columns: 120px 120px 120px;
  grid-template-rows: 120px 120px 120px;
  grid-template-areas: "item-1 item-1 item-2" "item-3 item-4 item-4" "item-5 item-6 .";
}

.item-1 {
  border: 1px solid blue !important;
  grid-area: item-1;
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 1;
}

.item-2 { …