Возможна ли привязка flexbox к сетке с переносом текста? - PullRequest
Новая
       2

Возможна ли привязка flexbox к сетке с переносом текста?

6 голосов
/ 06 июня 2019

Так что мне нравится это, когда он оборачивается, но все же ящики все выровнены с обеих сторон и заполняют все пространство. 

<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). 

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

Итак, перефразируя, мой вопрос заключается в том, как заставить плавный текст (как слова на изображениях выше) размещать так, чтобы (а) он заполнял каждую строку, и (б) каждое поле было кратным квадрат. То есть он привязывается к сетке квадрата, выдерживая 1, 2, 3+ квадрата, а не 2,5 квадрата или 1,2345 квадрата или что-то еще. Он всегда привязан к целому блоку. Для этого он сначала просматривает более длинные слова и вычисляет, сколько блоков он займет. Затем он растягивает любые более короткие блоки (например, одну букву «а» в приведенном выше примере), чтобы заполнить пустое пространство.

Хотите знать, как это можно сделать с помощью FlexBox или иным образом с помощью CSS.

1 Ответ

0 голосов
/ 06 июня 2019

Попробуйте (я использую разделенные 1-3 слова в зависимости от длины от здесь ) 

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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...