CSS - не допускать, чтобы новые строки текста нарушали выравнивание - PullRequest
Новая
       10

CSS - не допускать, чтобы новые строки текста нарушали выравнивание

0 голосов
/ 27 февраля 2019

У меня есть следующий CSS, который позволяет мне создавать строки, которые переносятся в зависимости от размера экрана.Если места достаточно, все элементы появляются в одном ряду, иначе он переносится в следующий ряд с правильным выравниванием.

Моя проблема в том, что у меня есть текст описания под каждым "квадратным" div.Если этот текст состоит только из одной строки, проблема не возникает, но если этот текст состоит из 2 или более строк, квадрат под ним выталкивается вверх и больше не выравнивается по отношению к его родным элементам.Как я могу предотвратить это?Я включил пример кода в виде фрагмента, его проще всего открыть в полноэкранном режиме, чтобы увидеть, о чем я говорю.Я хочу, чтобы вершины квадратов всегда были выровнены 

.flex-row {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  flex-wrap: wrap;
  align-self: stretch;
}

.flex-col {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}

.sub-row {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  width: 300px;
}

.square {
  height: 250px;
  width: 250px;
  background-color: #900;
}
<body>
  <div class="flex-row">
    <div class="flex-col">
      <div class="square">
      </div>
      <div class="sub-row">
        <p>
          Placeholder text Placeholder text Placeholder text Placeholder text Placeholder text
        </p>
        <p>
          00
        </p>
      </div>
    </div>
        <div class="flex-col">
      <div class="square">
      </div>
      <div class="sub-row">
        <p>
          Placeholder text
        </p>
        <p>
          00
        </p>
      </div>
    </div>
        <div class="flex-col">
      <div class="square">
      </div>
      <div class="sub-row">
        <p>
          Placeholder text
        </p>
        <p>
          00
        </p>
      </div>
    </div>
        <div class="flex-col">
      <div class="square">
      </div>
      <div class="sub-row">
        <p>
          Placeholder text
        </p>
        <p>
          00
        </p>
      </div>
    </div>
  </div>
</body>

Я пытался обосновать столбцы для flex-start и flex-end, но это не работает.Я также пытался использовать свойство align self для самого элемента p, но я не могу выровнять квадраты, если текст занимает 2 или более строк.

1 Ответ

0 голосов
/ 27 февраля 2019

Дайте align-items: flex-start flex-row (это переопределяет поведение по умолчанию stretch).

Ваш двуязычный текст находится ниже квадраты упрощают работу, например, при переносе flex-элементов обтекание flex lines будет соответствовать высоте динамического текста в предыдущем flex line .

См. Демонстрацию ниже: 

.flex-row {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  flex-wrap: wrap;
  /* align-self: stretch;*/
  align-items: flex-start; /* ADDED */
}

.flex-col {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}

.sub-row {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  width: 300px;
}

.square {
  height: 250px;
  width: 250px;
  background-color: #900;
}
<body>
  <div class="flex-row">
    <div class="flex-col">
      <div class="square">
      </div>
      <div class="sub-row">
        <p>
          Placeholder text Placeholder text Placeholder text Placeholder text Placeholder text
        </p>
        <p>
          00
        </p>
      </div>
    </div>
        <div class="flex-col">
      <div class="square">
      </div>
      <div class="sub-row">
        <p>
          Placeholder text
        </p>
        <p>
          00
        </p>
      </div>
    </div>
        <div class="flex-col">
      <div class="square">
      </div>
      <div class="sub-row">
        <p>
          Placeholder text
        </p>
        <p>
          00
        </p>
      </div>
    </div>
        <div class="flex-col">
      <div class="square">
      </div>
      <div class="sub-row">
        <p>
          Placeholder text
        </p>
        <p>
          00
        </p>
      </div>
    </div>
  </div>
</body>
...