I have a flex container with three flex items. On large screen, the direction of the flex is row + wrap. I need the first two flex item on the left side and the last flex item pushed to the right, however I want wrapping to work.
On a mobile screen I want all of the flex items in a column.
If you click the sample output, please make sure to maximize it so you can see the large screen output which is "row align". I managed to push the third flex item to the right using "text-align: right" but I'm not sure if it's the right approach.
Also I have 5 stars but I only added one to reduce the svg code.
Any suggestions are appreciated.
:root {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
body {
margin: 0;
padding: 0;
}
.top-rated {
background: dodgerblue;
}
.top-rated-container {
max-width: 1200px;
margin: auto;
border: 1px solid green;
display: flex;
margin-right: auto;
flex-flow: column wrap;
justify-content: center;
align-items: center;
}
.top-rated-title {
/*background: rgba(255, 255, 255, .12);*/
/*background: #f8a138;*/
padding: .5em 2em;
}
.top-rated-title>h2 {
color: #fff;
}
.gnlogo {
width: 180px;
height: 20px;
}
@media screen and (min-width: 52em) {
.top-rated-container {
flex-flow: row wrap;
/*justify-content: left;*/
}
.top-rated-title {
background: rgba(255, 255, 255, .12);
flex: 1;
border: 1px solid lime;
}
.top-rated-stars {
flex: 1;
border: 1px solid mediumvioletred;
}
.top-rated-logo {
text-align: right;
flex: 2;
border: 1px solid #0e9daf;
}
}<section class="top-rated">
<div class="top-rated-container">
<div class="top-rated-title">
<h2>Top-Rated Nonprofit</h2>
</div>
<div class="top-rated-stars">
<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" inkscape:version="1.0 (4035a4fb49, 2020-05-01)" sodipodi:docname="iconmonstr-star-3.svg" id="svg4" version="1.1" viewBox="0 0 24 24" height="24" width="24">
<metadata
id="metadata10">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<defs
id="defs8" />
<sodipodi:namedview
inkscape:current-layer="svg4"
inkscape:window-maximized="1"
inkscape:window-y="27"
inkscape:window-x="0"
inkscape:cy="12"
inkscape:cx="12"
inkscape:zoom="33.375"
showgrid="false"
id="namedview6"
inkscape:window-height="969"
inkscape:window-width="1920"
inkscape:pageshadow="2"
inkscape:pageopacity="0"
guidetolerance="10"
gridtolerance="10"
objecttolerance="10"
borderopacity="1"
bordercolor="#666666"
pagecolor="#ffffff" />
<path
style="fill:#ffffff;fill-opacity:1"
id="path2"
d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z" />
</svg>
</div>
<div class="top-rated-logo">
The third flex item. This will be an image
</div>
</div>
</section>
