Текст не выравнивается по правому краю при отображении flex - PullRequest
Новая
       33

Текст не выравнивается по правому краю при отображении flex

0 голосов
/ 03 апреля 2019

Обратите внимание, что это не простой вопрос «как мне получить XXX». Я могу добиться того, на что я иду, но я удивлен тем, как. Поэтому я боюсь, что делаю это плохо.

Как показано в этой скрипке , текст внутри элементов div выравнивается по левому краю, а CSS text-Adjust не действует. Я подозреваю, что это потому, что ширина div почему-то недействительна, потому что установка ширины, например, 15% для каждой числовой ячейки вызывает ожидаемое поведение.

Конечно, установка ширины вступает в противоречие с самой точкой наслаждения гибкостью, так что это неправильный путь. Я достигаю запрошенного взгляда, применяя justify-content , но я понимаю, что управление выравниванием таким образом (из контейнера, накладывающего размещение на дочерний элемент), должно применяться к блокам (то есть, к div «не так много»). Я запутался / ошибся в этом отношении?

Я погуглил его, но утонул в миллиардах сообщений о том, как выровнять детей в гибком контейнере. Наиболее близким к моей проблеме является здесь , но я не совсем понимаю, чем она отличается от того, чего я пытаюсь достичь. Кроме того, это не дает мне понимания того, где мое мышление пошло не так (несомненно, оно произошло, но я ожидал, что нет).

Рекомендуется ли всегда иметь негибкий div внутри div'а cell'ish для инкапсуляции текстовой массы внутри него? Это похоже на плохую разметку HTML. 

div.data-row-cell {
  display: flex;
  padding: 3px;
}

div.data-row-value {
  text-align: right;
  flex: 1;
}

<div class="data-row">

  <div *ngFor="let data of data"
       class="data-row-cell data-row-value">
    {{data}}
  </div>

</div>

Ответы [ 2 ]

1 голос
/ 03 апреля 2019

Чтобы понять, как работает flex, нужно провести некоторое тестирование. Поэтому я приведу пример.

Прежде всего важно знать, что стандартное поведение направления гибкого контейнера установлено на row. Это означает, что все дочерние элементы внутри гибкого контейнера будут размещаться рядом друг с другом как можно дольше. Также мы больше не думаем о левом или правом при использовании flexbox. Мы не думаем в главной оси и поперечной оси.

Основная ось - это направление, дочерние элементы размечены. Так что по умолчанию это будет слева направо.

Тогда поперечная ось будет сверху вниз.

Далее важно знать, что по умолчанию дочерние элементы внутри гибкого контейнера занимают столько места, сколько необходимо. 

/* just for some nice looking */
* {
  font-family: sans-serif;
  box-sizing: border-box;
  }

.flex-container {
  display: flex;
  width: 100%;
  padding: 1rem;
  background: #666;
}

.flex-item {
  padding: 0.5rem;
  font-weight: bold;
  color: white;
}

.r {
  background: red;
}

.g {
  background: darkgreen;
}

.b {
  background: blue;
}
<div class="flex-container">
  <div class="flex-item r">blue</div>
  <div class="flex-item g">red</div>
  <div class="flex-item b">green</div>
</div>

Поскольку теперь мы знаем поведение по умолчанию для контейнера flex и дочерних элементов, давайте посмотрим, что нам нужно сделать, чтобы выровнять текст.

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

Мы могли бы сделать это с помощью свойства flex-grow для дочерних элементов: 

.flex-item {
  ...
  flex-grow: 1;
}

.r {
  ...
  text-align: left;
}

.g {
  ...
  text-align: center;
}

.b {
  ...
  text-align: right;
}

Так что в вашем случае мы могли бы удалить display: flex из класса .data-row-cell и просто добавить немного flex-grow: 1

Пожалуйста, смотрите мою обновленную скрипку: https://jsfiddle.net/7wfm1s0j/

Надеюсь, это поможет: -)

0 голосов
/ 03 апреля 2019

Обычно a, когда вы вызываете родителя display: flex, тогда его дочерние элементы содержат поведение по умолчанию, которое означает, что его значение по умолчанию get flex-direction: row.в элементе строки flexbox не работает свойство text-align, это работает, когда вы вызываете flex-direction: column здесь, чтобы решить вашу проблему, например: 

**your code**
div.data-row-value {
  text-align: right;
  flex: 1;
  border-color: lightblue;
}

/*my example 1 */
div.data-row-value {
    /* text-align: center; */
    flex: 1;
    border-color: lightblue;
    justify-content: flex-end;
}

/*my example 2 */
div.data-row-value {
  text-align: right;
  flex: 1;
  border-color: lightblue;
  flex-direction: column;
}

/*my example 3 */
<div *ngFor="let data of data" class="data-row-cell data-row-value">
    <div style="width:100%">{{data}}</div>
</div>
...