用flexbox包装元素 [英] Wrapping elements with flexbox

问题描述

我刚刚参加了Flexbox课程，并且正在练习中，因此，如果答案涉及flexbox概念，我将不胜感激.我有2个文章元素，我希望第二篇文章始终处于该位置，第一篇文章的文本可以放在该文章的下面.但是，目前尊重每篇文章的大小，我该如何解决?这是我当前的HTML和CSS，以及 jsfiddle :

I just did a flexbox course and I'm practicing, so I would appreciate if the answer involves flexbox concepts. I have 2 article elements, and I would like the second article to be always in that position, the text of the first article can be put under it. However, the size of each article is currently respected, how can I fix this? Here is my current HTML and CSS along with a jsfiddle of it:

<section>
  <article class="box1">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta dolorum ad perferendis eligendi inventore quo deserunt omnis impedit culpa blanditiis, sapiente pariatur a totam cumque, odit incidunt ipsum delectus provident. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit dignissimos, quos id rerum doloremque, dicta odio et perspiciatis officia dolorum amet quaerat doloribus ea sequi porro odit tenetur pariatur. Placeat.
  </article>
  <article class="box2">caja 2</article>
</section>

section {
  height: 400px;
  width: 100%;
  display: flex;
  flex-direction: row;
  border: solid 1px black;
}

.box1 {
  background: red;
  flex-grow: 1;
}
.box2 {
  background: yellow;
  align-self: flex-start;
  flex-shrink: 0;
}

此外，我还创建了一张图像以可视化我想要的东西:

Additionally I've created an image to visualize what I want:

推荐答案

您无法使用flexbox进行此操作，这是

You cannot do such thing with flexbox, this is a use case of float:

section {
  height: 400px;
  border: solid 1px black;
}

.box1 {
  background: red;
}

.box2 {
  background: yellow;
  float:right;
}

<section>
  <article class="box2">caja 2</article>
  <article class="box1">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta dolorum ad perferendis eligendi inventore quo deserunt omnis impedit culpa blanditiis, sapiente pariatur a totam cumque, odit incidunt ipsum delectus provident. Lorem ipsum dolor sit amet,
    consectetur adipisicing elit. Reprehenderit dignissimos, quos id rerum doloremque, dicta odio et perspiciatis officia dolorum amet quaerat doloribus ea sequi porro odit tenetur pariatur. Placeat.
  </article>
</section>

这篇关于用flexbox包装元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！