html - flexbox 元素向右浮动不起作用

Question

我有一个包含图像背景和描述的 div 元素，我希望描述 float 在图像内部

.about-us {
  &__left {
    display: flex;
    background-image: url('/assets/images/01.jpg');
    background-repeat: no-repeat;
    height: 482px;
  }
  &__leftdescription {
    margin-left: auto;
    order: 2;
  }
}

<div class="about-us">
  <div class="about-us__left">
    <div class="about-us__leftdescription">
      <h1>About Us</h1>
      <ul>
        <li>Specjalizujemy się w outsourcingu kadry IT;</li>
        <li>Zapewniamy możliwość współpracy ze starannie dobranymi ekspertami IT lub całymi ich zespołami;</li>
        <li>Pracujemy zgodnie z zasadami biznesu Klienta, dbając o wysoki standard świadczonych usług;</li>
        <li>Budujemy i utrzymujemy długotrwałe relacje, oparte na wzajemnym zaufaniu;</li>
        <li>Wartości, jakimi się kierujemy to odwaga, efektywność rozwiązań technicznych, zaangażowanie, zadowolenie Klientów i inwestowanie w kapitał ludzki;</li>
        <li>Jesteśmy elastyczni w dostosowaniu się do technologii, modelu biznesowego oraz kryteriów finansowych naszych Klientów. Ofertę przystosowujemy indywidualnie, aby sprostać szybko zmieniającym się warunkom i trendom rynkowym.</li>
      </ul>
    </div>
  </div>
</div>

预期结果应该是这样的:

这是我目前所拥有的

注意这里是jsfiddle https://jsfiddle.net/Mwanitete/5c6yfe7s/6/

我在这里做错了什么？任何建议帮助将不胜感激，谢谢

Answer 1

制作 <div>元素，其父元素正在使用 display:flex ，向右浮动，可以添加CSS属性flex-direction: row; justify-content: flex-end给 parent ，就像下面的例子:

.about-us__left {
    display: flex;
    flex: 1; 
    flex-direction: row;
    justify-content: flex-end;
    background-image: url('https://s15.postimg.cc/t22lvakm3/image.jpg');
    background-repeat: no-repeat;
    height: 482px;
}
.about-us__leftdescription {
    width: 50%;
}

<div class="about-us">
  <div class="about-us__left">
    <div class="about-us__leftdescription">
      <h1>About Us</h1>
      <ul>
        <li>Specjalizujemy się w outsourcingu kadry IT;</li>
        <li>Zapewniamy możliwość współpracy ze starannie dobranymi ekspertami IT lub całymi ich zespołami;</li>
        <li>Pracujemy zgodnie z zasadami biznesu Klienta, dbając o wysoki standard świadczonych usług;</li>
        <li>Budujemy i utrzymujemy długotrwałe relacje, oparte na wzajemnym zaufaniu;</li>
        <li>Wartości, jakimi się kierujemy to odwaga, efektywność rozwiązań technicznych, zaangażowanie, zadowolenie Klientów
          i inwestowanie w kapitał ludzki;</li>
        <li>Jesteśmy elastyczni w dostosowaniu się do technologii, modelu biznesowego oraz kryteriów finansowych naszych Klientów.
          Ofertę przystosowujemy indywidualnie, aby sprostać szybko zmieniającym się warunkom i trendom rynkowym.</li>
      </ul>
    </div>
  </div>
</div>

但是要小心你使用的结构以及固定高度，因为它不支持视口(viewport)尺寸变化并且当宽度低于某个值时将不会相应地渲染!