How to right align text inside a div for mutiline content using flexbox-CodePudding

I'm using flexbox model to align div items to the right. It works when the items has only one line, but when I have more than one line, only the first line is aligned right. If the div fills two or more lines the next lines get aligned to the left.

Notice the last div from first column, in bold.

Is that a way to get the multiline text right aligned for all the lines using flexbox?

/* CSS */
.wrapper {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
    
.col-md-3 {
  flex: 0 0 25%;
  max-width: 25%;
}

.col-md-9 {
  flex: 0 0 65%;
  max-width: 65%;
  margin-left: 20px;
}
    
.item-first-col {
  justify-content: flex-end;
  border: 1px solid blue;
}

.item-second-col {
  border: 1px solid blue;
}

.d-flex {
  display: flex;
}

.align-items-center {
  align-items: center;
}

<!-- HTML -->
<div >
  <div >
    One line text
  </div>
  <div >
    Second column text
  </div>
  <div >
    One line text
  </div>
  <div >
    Second column text
  </div>  
  <div  style="font-weight: bold;">
    Here goes the text that fills two lines
  </div>
  <div >
    Second column text
  </div>  
</div>

CodePudding user response：

Simply use text-align: right;

.wrapper {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.col-md-3 {
  flex: 0 0 25%;
  max-width: 25%;
}

.col-md-9 {
  flex: 0 0 65%;
  max-width: 65%;
  margin-left: 20px;
}

.item-first-col {
  justify-content: flex-end;
  border: 1px solid blue;
  text-align: right;
}

.item-second-col {
  border: 1px solid blue;
}

.d-flex {
  display: flex;
}

.align-items-center {
  align-items: center;
}

<div >
  <div >
    One line text
  </div>
  <div >
    Second column text
  </div>
  <div >
    One line text
  </div>
  <div >
    Second column text
  </div>  
  <div  style="font-weight: bold;">
    Here goes the text that fills two lines
  </div>
  <div >
    Second column text
  </div>  
</div>

Thanks and best regards!

CodePudding user response：

You can use text-align css property

/* CSS */

.wrapper {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  text-align: right;
}

.text {
  text-align: right;
  width: 100%;
}

.col-md-3 {
  flex: 0 0 25%;
  max-width: 25%;
}

.col-md-9 {
  flex: 0 0 65%;
  max-width: 65%;
  margin-left: 20px;
}

.item-first-col {
  justify-content: flex-end;
  border: 1px solid blue;
}

.item-second-col {
  border: 1px solid blue;
}

.d-flex {
  display: flex;
}

.align-items-center {
  align-items: center;
}

<!-- HTML -->
<div >
  <div >
    One line text
  </div>
  <div >
    Second column text
  </div>
  <div >
    One line text
  </div>
  <div >
    Second column text
  </div>
  <div  style="font-weight: bold;">
    Here goes the text that fills two lines
  </div>
  <div >
    Second column text
  </div>
</div>

CodePudding user response：

It is not possible to align text the way you want it using only Flexbox properties.

The reason for that appears in the Flexbox specification:

Each in-flow child of a flex container becomes a flex item, and each contiguous sequence of child text runs is wrapped in an anonymous block container flex item.

In your example, you are able to align a single line of text, but it is not the text that is aligned, it is the anonymous block which contains it. That's why it works.

It won't work for multiple lines of text because writing more text simply increases the size of the anonymous block and stretches to fill the whole parent div. At that point, it doesn't matter what value you set justify-content to.

The only way to do what you want is using text-align:right on the parent div which the anonymous block will inherit, making the text it contains align to the right.