css - 一个包含三个弹性项目的弹性容器。我想要左边的前两个弹性项目，右边的第三个

Question

我有一个包含三个弹性项目的弹性容器。在大屏幕上，flex 的方向是 row + wrap。我需要左侧的前两个 flex 项目和推到右侧的最后一个 flex 项目，但是我想要包装工作。

在移动屏幕上，我想要列中的所有弹性项目。

如果您单击示例输出，请确保将其最大化，以便您可以看到“行对齐”的大屏幕输出。我设法使用“text-align：right”将第三个弹性项目向右推，但我不确定这是否是正确的方法。

我也有 5 颗星，但我只添加了一颗来减少 svg 代码。

任何建议表示赞赏。

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

标签： cssflexbox