块元素只在flex项目内？ [英] Block elements only inside flex item?

问题描述

显然，在弹性项目容器中只能有块元素（inline，inline-block，float nothing works）。这只是奇怪的，除非我做错了，看起来没有用。

这里是笔：http://codepen.io/iaezzy/pen/GggVxe

 。 fill-height-or-more {
 min-height：100％; 
 display：flex; 
 flex-direction：column; 
} 
 .fill-height-or-more> div {
 flex：1; 
 display：flex; 
 flex-direction：column; 
 justify-content：center; 
} 
  

您可能需要增加flexbox的预览窗格高度。 / p>

为清楚起见编辑：我不是在谈论flex项目本身，而是在flex项目中的元素。在上面的代码中，你会看到 h2 和 p bordered，他们有 float

解决方案

您已设置 ：节以及 div 上的<：flex

如果节充当容器，则您可以 display：flex 到节，并将 div 作为弹性项。然后 p s和 h1 将浮动。

小提琴： http://jsfiddle.net/abhitalks/zb12n2dk/

  .fill-height-or-more {
 display：flex; 
 flex-direction：column; 
 ... 
} 
 .fill-height-or-more> div {
 flex：1; 
 ... 
} 
 .some-area> div p {
 width：40％; 
 float：left; 
 ... 
} 
  

Apparently, you can only have block elements (inline, inline-block, float nothing works) inside a flex item container? Thats just weird and doesn't seem useful unless I'm doing it completely wrong?

Here is the pen: http://codepen.io/iaezzy/pen/GggVxe

.fill-height-or-more {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
.fill-height-or-more > div {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

You might have to increase the preview pane height for the flexbox to work.

Edited for clarity: I'm not talking about the flex items themselves, but the elements INSIDE the flex item. In the codepen above, you'll see h2 and p bordered, they have the float declaration, but don't float.

解决方案

You have set display: flex on both section as well as div.

If section acts as a container, you give display: flex to the section and leave the div as flex-items. Then the ps and h1s will float.

Fiddle: http://jsfiddle.net/abhitalks/zb12n2dk/

.fill-height-or-more {
    display: flex;
    flex-direction: column;
    ...
}
.fill-height-or-more > div {
    flex: 1;
    ...
}
.some-area > div p {
    width: 40%;
    float: left;
    ...
}

这篇关于块元素只在flex项目内？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！