Question

所以我喜欢这样，它包裹着，但是盒子都在两侧对齐并充满了整个空间。

<head>
<style>
* {
  padding: 0px;
  margin: 0px;
  text-transform: none;
  font-style: normal;
}

p {
  display: flex;
  flex-wrap: wrap;
  width: 200px;
}

i {
  flex: 1;
  padding: 5px;
  margin: 2px;
  background: #ddd;
  text-align: center;
}
</style>
</head>
<body>
  <p>
    <i>foo</i><i>hello</i><i>congratulations</i><i>forward</i><i>interesting</i><i>place</i><i>walk</i><i>to</i><i>anyplace</i><i>next</i><i>sophisticationism</i>
  </p>
</body>

使用大小写混合的单词，它以某种方式找出如何对其进行最佳布局，以使其完全填充空间。

我现在想做的是，而不是让每个框都是动态宽度的矩形，我希望框可以“捕捉到网格”。就是说，想象一下每行都有一个正方形的网格。有点像这样（我已经完全进行了硬编码，只是为了演示它的外观。实际上，这就是我的问题，如何使用FlexBox使其自动化）。 / p>

<head>
<style>
* {
  padding: 0px;
  margin: 0px;
  text-transform: none;
  font-style: normal;
}

p {
  display: flex;
  flex-wrap: wrap;
  width: 220px;
}

i {
  width: 50px;
  height: 50px;
  padding: 5px;
  margin: 2px;
  background: #ddd;
  text-align: center;
}

.l {
  width: 114px;
}
</style>
</head>
<body>
  <p>
    <i>a</i><i>a</i><i>a</i><i>a</i><i class='l'>long</i><i>a</i><i class='l'>long</i><i>a</i><i class='l'>a</i><i class='l'>long</i><i>a</i><i>a</i><i>a</i><i>a</i><i>a</i><i>a</i><i>a</i>
  </p>
</body>

因此，我要问的是，我的问题是如何导致流畅的文本（如上图中的单词）布局，以便（a）填充每一行，并且（b）每个框都是多个一个正方形。也就是说，它捕捉到正方形的网格，达到1、2、3+正方形，而不是2.5正方形或1.2345正方形或其他形状。它总是捕捉到整个块。为此，首先要查看 long 个单词，然后计算将占用多少个块。然后，它会拉伸任何较短的块（例如上例中的一个字母“ a”）以填充空白。

想知道如何使用FlexBox或其他方式使用CSS。

Answer 1

尝试（我使用1-3个字词，具体取决于here的长度）

function show(n) {
  text.innerHTML = '<p>' + split(text.innerText,n).map(line=> {
    if(line.length==2 && line[0].length<n && line[1].length<n) {
      // case for two short words
      return `<i class='long'>${line[0]}</i><i class='short'>${line[1]}</i>`
    } else {
      return line.map(w=>`<i class='${w.length<9 ?'short':'long'}'>${w}</i>`).join('')
    }
  }).join('') + '</p>';
}


function split(str,n) {
  let z=0, b=[], r=[], w=str.split(' ');
  let s = w.map(v => v.length < n ? 1 : 2);

  s.map((v,i)=>( 
    z+v>=4 ? (r.push(b),z=0,b=[]) : 0,
    z+=v, b.push(w[i]) 
  ))

  return b.length ? r.concat([b]) : r;
}


show(9) // 9 is min number of letters for long words;

.short {
  flex-basis: 64px;
  flex-grow: 1
}

.long {
  flex-basis: 140px;
  flex-grow: 2
}

* {
  padding: 0px;
  margin: 0px;
  text-transform: none;
  font-style: normal;
}

p {
  display: flex;
  flex-wrap: wrap;
  width: 260px;
}

i {
  flex: 1;
  padding: 5px;
  margin: 2px;
  background: #ddd;
  text-align: center;
}

<div id="text">a aaa foo hello congratulations forward interesting place walk to anyplace next sophisticationism aa bb cccccccccc ddd</div>

flexbox是否可以通过文本换行捕捉到网格？

1 个答案: