Flexbox and rtl - html

Question

I have following layout, but in rtl copy button goes to the left. How do I keep copy button on the right like it was no rtl?
I tried some solutions here but I cannot make it work: flexbox align column left and right
.data {
display: flex; /* displays flex-items (children) inline by default */
align-items: flex-start; /* vertical alignment / optional but recommended / if you don't want that flex-items match in height, which by default they do (default value of stretch, which makes them fill the flex-containers height and where the height of all items is dictated by the height of the "tallest" one) / you can also try the value of center */
max-width: 400px;
direction: rtl;
}
.code {
color: #fff;
margin: 0;
padding: 8px !important;
line-height: 1.2;
font-size: 11px;
background: #bbb;
border: 1px solid #333;
word-wrap: break-word;
/*float: left; not necessary*/
}
.copy {
color: #ccc;
/*display: inline-block; not necessary*/
padding: 3px !important;
font-size: 12px;
cursor: pointer;
border: 1px solid #999;
/*float: right; not necessary*/
margin-left: 10px; /* design purposes */
}
<div class="data">
<p class="code">Praesent molestie. Nunc Venenatis Sapien Ultrices Dui. Vivamus dolor. Integer vel ante. Proin felis. Maecenas non nisl eu mi hendrerit fringilla.</p>
<div class="copy">COPY</div>
</div>

Answer 1

Use the order property.
By default, all flex items are set to order: 0, which means their appearance in the source dictates their order in the layout.
You can change the visual order of flex items using positive and negative integers.
.data {
display: flex;
align-items: flex-start;
max-width: 400px;
direction: rtl;
}
.code {
color: #fff;
margin: 0;
padding: 8px !important;
line-height: 1.2;
font-size: 11px;
background: #bbb;
border: 1px solid #333;
word-wrap: break-word;
}
.copy {
order: -1; /* NEW */
color: #ccc;
padding: 3px !important;
font-size: 12px;
cursor: pointer;
border: 1px solid #999;
}
<div class="data">
<p class="code">Praesent molestie. Nunc Venenatis Sapien Ultrices Dui. Vivamus dolor. Integer vel ante. Proin felis. Maecenas non nisl eu mi hendrerit fringilla.</p>
<div class="copy">COPY</div>
</div>
Here's a more complete explanation and examples: https://stackoverflow.com/a/36118012/3597276
Of course, you can also achieve what you want by simply switching the order of the elements:
.data {
display: flex;
align-items: flex-start;
max-width: 400px;
direction: rtl;
}
.code {
color: #fff;
margin: 0;
padding: 8px !important;
line-height: 1.2;
font-size: 11px;
background: #bbb;
border: 1px solid #333;
word-wrap: break-word;
}
.copy {
color: #ccc;
padding: 3px !important;
font-size: 12px;
cursor: pointer;
border: 1px solid #999;
}
<div class="data">
<div class="copy">COPY</div><!-- now this element is listed first -->
<p class="code">Praesent molestie. Nunc Venenatis Sapien Ultrices Dui. Vivamus dolor. Integer vel ante. Proin felis. Maecenas non nisl eu mi hendrerit fringilla.</p>
</div>

Answer 2

You can just apply flex-direction: row-reverse to your flex container. In this case you don't have to set order for every flex item.
.data {
display: flex; /* displays flex-items (children) inline by default */
align-items: flex-start; /* vertical alignment / optional but recommended / if you don't want that flex-items match in height, which by default they do (default value of stretch, which makes them fill the flex-containers height and where the height of all items is dictated by the height of the "tallest" one) / you can also try the value of center */
max-width: 400px;
flex-direction: row-reverse; /* new */
}
.code {
color: #fff;
margin: 0;
padding: 8px !important;
line-height: 1.2;
font-size: 11px;
background: #bbb;
border: 1px solid #333;
word-wrap: break-word;
/*float: left; not necessary*/
}
.copy {
color: #ccc;
/*display: inline-block; not necessary*/
padding: 3px !important;
font-size: 12px;
cursor: pointer;
border: 1px solid #999;
/*float: right; not necessary*/
margin-left: 10px; /* design purposes */
}
<div class="data">
<p class="code">Praesent molestie. Nunc Venenatis Sapien Ultrices Dui. Vivamus dolor. Integer vel ante. Proin felis. Maecenas non nisl eu mi hendrerit fringilla.</p>
<div class="copy">COPY</div>
</div>
Please note that direction: rtl should be used for languages written from right to left (like Hebrew or Arabic), not for reversing your layout.