CODEWITHSUNDEEP
htmlcssflexbox
anivas
anivas

Reputation: 6547

div text alignment on flex

How do I align the div so that both label has the same width and right aligned and both content start at the same place. Some suggest float, but I dont perfer floating the content. Is there a flex way of doing this.

enter image description here

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

Upvotes: 1

Views: 40

Answers (2)

Paulie_D
Paulie_D

Reputation: 114980

With flexbox...NO...you can't unless you use fixed width values (whatever they are)...there is no width/height equalisation between non-siblings.

You would need to given one of the elements a fixed width value and then let the other take up the remaining space with 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>

Upvotes: 1

Stephen
Stephen

Reputation: 47

Why not simply add a class to the content and label divs?

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

This way, you can be sure that all label divs are equal in length.

Upvotes: 0

Related Questions