Change the order and alignment of flexbox items - css

Question

I asked a question of creating a speech bubble in CSS and change the layout of the bubble based on the size of the screen in this thread. I got some hint by using the flexbox to determine the bubble arrow direction and layout. I used the CSS class to change the arrow orientation as shown in the thread. And int the following script, I use the natural item order to automatically layout the bubble. I assume the main tag only contains an image tag and a div (for speech bubble).
If the image tag is in front of div, we layout the image logo on the left and followed by a speech bubble on the right with an arrow pointing to the left.
If the image tag is behind the div, we layout the image logo on the right and with a speech bubble inserted in front of it with an arrow pointing to the right.
But in the case when the screen size is less than 600px, to avoid a slim speech bubble, I will rearrange the image and bubble vertically and with image shown on the top always. Here is the code
.speech {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
flex-direction: row;
}
.speech img:first-child{
order: 0;
margin: 10px;
border: 3px solid #00CCFF;
box-shadow: 3px 3px 8px 0px rgba(0,0,0,0.3);
max-width: 25vw;
margin-right: 30px;
}
.speech img:last-child{
order: 0;
margin: 10px;
border: 3px solid #00FF99;
box-shadow: 3px 3px 8px 0px rgba(0,0,0,0.3);
max-width: 25vw;
margin-left: 30px;
}
.sp {
background: #efefef;
-webkit-border-radius: 4px;
border-radius: 4px;
font-size: 1.2rem;
line-height: 1.3;
max-width: 95%;
padding: 15px;
position: relative;
left:0px;
top: 20px;
filter: drop-shadow(6px 4px 0px rgba(0, 0, 0, 0.2));
border: 1px solid black;
}
div.sp:last-child::after {
border-left: 11px solid transparent;
border-right: 11px solid #efefef;
border-top: 11px solid #efefef;
border-bottom: 11px solid transparent;
content: "";
position: absolute;
left: -20px;
top: 8px;
filter: drop-shadow(-2px -1px 0px black);
order: 0;
}
div.sp:first-child::after {
content: "";
position: absolute;
border-left: 11px solid #efefef;
border-right: 11px solid transparent;
border-top: 11px solid #efefef;
border-bottom: 11px solid transparent;
right: -20px;
top: 8px;
filter: drop-shadow(2px -1px 0px black);
order: 0;
}
#media only screen and (max-width: 600px) {
.speech {
display: flex;
flex-wrap: nonwrap;
flex-direction: column;
background: #00cc00;
}
.speech img:first-child{
margin: 10px;
border: 3px solid green;
box-shadow: 3px 3px 8px 0px rgba(0,0,0,0.3);
max-width: 25vw;
margin-right: 30px;
order: -1;
}
div.sp:last-child::after {
content: '';
position: absolute;
top:-19px;
left: 11px;
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 0px solid transparent;
border-top: 0px solid transparent;
border-bottom: 20px solid #efefef;
filter: drop-shadow(1px -2px 0px black);
order: 0;
}
.speech:nth-of-type(2n) {
align-items: flex-end;
}
div.sp:first-child::after {
content: '';
position: absolute;
top:-29px;
left: 84%;;
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 0px solid transparent;
border-top: 0px solid transparent;
border-bottom: 20px solid red;
filter: drop-shadow(1px -2px 0px black);
order: 0;
}
.speech img:last-child{
margin: 10px;
border: 3px solid blue;
box-shadow: 3px 3px 8px 0px rgba(0,0,0,0.3);
max-width: 25vw;
margin-right: 0px;
right: 0px;
order: -1;
}
}
<main class="speech">
<img src="https://www.quackit.com/pix/samples/6m.jpg" alt="Sample photo">
<div class="sp">this is my example 1 <div>additional line</div></div>
</main>
</br></br></br>
<main class="speech">
<div class="sp">this is my example 2 <div>additionl line</div></div>
<img src="https://www.quackit.com/pix/samples/6m.jpg" alt="Sample photo">
</main>
Assuming all items on the flexbox container is of order ZERO. I use the natural order to determine the orientation of the bubble arrow, there you will see first-child and last-child to do the work. But when the screen size shrunk, I add order: -1; to move the image as the first item. But with that, I encounter two issues
1) I assume the second example should have the image aligned to the right and with a bubble below it. However, no matter how I align it, they always align to the left. (This issue is partially fixed after applying Brett's comment .speech:nth-of-type(2n) { align-items: flex-end; }, but the items in the case of flex-direction: row; still won't align all the way to the right)
2) In the second example, I assume the bubble should have the arrow moved to the top-right corner but it is still on the right side. And this issue seems to be caused by the order (I can tell it does not use the code within the #media after I change the order). (This issue is fixed about removing the html comment)
Please run the code, make it full screen and shrink the screen size to see the effect.

Answer 1

.speech {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
flex-direction: row;
}
.speech img:first-child{
order: 0;
margin: 10px;
border: 3px solid #00CCFF;
box-shadow: 3px 3px 8px 0px rgba(0,0,0,0.3);
max-width: 25vw;
margin-right: 30px;
}
.speech img:last-child{
order: 0;
margin: 10px;
border: 3px solid #00FF99;
box-shadow: 3px 3px 8px 0px rgba(0,0,0,0.3);
max-width: 25vw;
margin-left: 30px;
}
.sp {
background: #efefef;
-webkit-border-radius: 4px;
border-radius: 4px;
font-size: 1.2rem;
line-height: 1.3;
max-width: 95%;
padding: 15px;
position: relative;
left:0px;
top: 20px;
filter: drop-shadow(6px 4px 0px rgba(0, 0, 0, 0.2));
border: 1px solid black;
}
div.sp:last-child::after {
border-left: 11px solid transparent;
border-right: 11px solid #efefef;
border-top: 11px solid #efefef;
border-bottom: 11px solid transparent;
content: "";
position: absolute;
left: -20px;
top: 8px;
filter: drop-shadow(-2px -1px 0px black);
order: 0;
}
div.sp:first-child::after {
content: "";
position: absolute;
border-left: 11px solid #efefef;
border-right: 11px solid transparent;
border-top: 11px solid #efefef;
border-bottom: 11px solid transparent;
right: -20px;
top: 8px;
filter: drop-shadow(2px -1px 0px black);
order: 0;
}
#media only screen and (max-width: 600px) {
.speech {
display: flex;
flex-wrap: nonwrap;
flex-direction: column;
background: #00cc00;
}
.speech:nth-of-type(2n) {
align-items: flex-end;
}
<!-- LOGO SPEECH -->
.speech img:first-child{
margin: 10px;
border: 3px solid green;
box-shadow: 3px 3px 8px 0px rgba(0,0,0,0.3);
max-width: 25vw;
margin-right: 30px;
order: -1;
}
div.sp:last-child::after {
content: '';
position: absolute;
top:-19px;
left: 11px;
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 0px solid transparent;
border-top: 0px solid transparent;
border-bottom: 20px solid #efefef;
filter: drop-shadow(1px -2px 0px black);
order: 0;
}
<!-- SPEECH LOGO -->
div.sp:first-child::after {
content: '';
position: absolute;
top:-29px;
left: 84%;;
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 0px solid transparent;
border-top: 0px solid transparent;
border-bottom: 20px solid red;
filter: drop-shadow(1px -2px 0px black);
order: 0;
}
.speech img:last-child{
margin: 10px;
border: 3px solid blue;
box-shadow: 3px 3px 8px 0px rgba(0,0,0,0.3);
max-width: 25vw;
margin-right: 0px;
right: 0px;
order: -1;
}
}
<main class="speech">
<img src="https://www.quackit.com/pix/samples/6m.jpg" alt="Sample photo">
<div class="sp">this is my example 1 <div>additional line</div></div>
</main>
</br></br></br>
<main class="speech">
<div class="sp">this is my example 2 <div>additionl line</div></div>
<img src="https://www.quackit.com/pix/samples/6m.jpg" alt="Sample photo">
</main>
I added .speech:nth-of-type(2n) { align-items: flex-end; } to your media query.
This will make every even numbered speech element move to the end. When you change the flex direction to column, align and justify flip roles. You might need to tweak some styles, but I believe this answers your question.