выравнивание текста div на flex

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

<!DOCTYPE HTMML> 
<html> 
<body> 
    <div> 
     <div style="display: flex; flex-direction:row;"> 
      <div style="align: right; background: blue"> 
       Long label: 
      </div> 
      <div style="text-align: left; background: green"> 
       This is the content 
      </div> 
     </div> 

     <div style="display: flex; flex-direction:row;"> 
      <div style="align: right; background: blue"> 
       label: 
      </div> 
      <div style="text-align: left; background: green"> 
       This is the content 
      </div> 
     </div> 
    </div> 
</body> 
</html>

источник

2016-03-11 anivas

Даже если я даю фиксированной ширины ее не реагирует на него. – anivas

С flexbox ... NO ... вы не можете, если не используете фиксированные значения ширины (независимо от того, что они есть) ... нет равномерного выравнивания по ширине и высоте между не-братьями и сестрами.

Вам нужно будет указать один из элементов фиксированной ширины, а затем оставить оставшееся пространство с flex:1.

.blue { 
 
    background: lightblue; 
 
    /* width: 150px; */ 
 
    flex: 0 0 150px 
 
} 
 
.green { 
 
    background: #bada55; 
 
    flex: 1; 
 
} 
 
.parent { 
 
    display: flex; 
 
}

<div class="parent"> 
 
    <div class="blue"> 
 
    Long label: 
 
    </div> 
 
    <div class="green"> 
 
    This is the content 
 
    </div> 
 
</div> 
 

 
<div class="parent"> 
 
    <div class="blue"> 
 
    label: 
 
    </div> 
 
    <div class="green"> 
 
    This is the content 
 
    </div> 
 
</div>

источник

2016-03-11 10:20:48

Это помогло спасибо! – anivas

Почему бы не просто добавить класс к содержанию и этикетки дивы?

HTML

<div> 
<div> 
    <div class="label-div">Long label</div> 
    <div class="content-div">Content</div> 
</div> 
<div> 
    <div class="label-div">Label</div> 
    <div class="content-div">Content</div> 
</div> 
</div>

CSS

.label-div { 
    width: 70px; 
    text-align: right; 
} 

.content-div { 
    text-align: left; 
}

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

источник

2016-03-11 10:17:02 Stephen

выравнивание текста div на flex

ответ

Смежные вопросы