有两列的Flex容器;第二列有四排 [英] Flex container with two columns; second column has four rows

问题描述

我很难在flex中显示以下布局。我有5个盒子，我想把我的容器分成两部分，垂直显示一个盒子，其他4个。

这是我的CSS：

  .trades，.trade-panel {
 flex：1; 
} 
 .layout-4-5 {
 flex-direction：column; 
} 
 .layout-4-5> div {
 width：50％; 
} 
  

然后我将第四个或最后一个孩子的基础设置为100％。 / p>

  .layout-4-5> div：第n个孩子（1）{
 flex-basis：100％; 
 
 
 
 
 
 
这里是我的HTML 
 < div class =trades layout-4-5> 
 <！ - 贸易面板是我个人的盒子 - > 
< div class =trade-panel> 
< / div> 
 
< / div> 
  
上面水平地打印我的布局。考虑到我 flex-direction 是列，而且我的第一个孩子或箱子有100％的基础，不应该打印我想要的是？请注意：
 
注意：由于箱子尺寸相同，所以包含其他四个箱子的箱子应该更长，只要它们在上面的布置中， 没关系。 tq 
解决方案
我并不完全清楚您的问题或代码。但是，这里有一个通用的解决方案：
 $ b 
 
 
 
  flex-container-1 {display：flex ; / *建立flex容器* / flex-direction：row; / * flex项目将水平对齐* / justify-content：center; / *中心水平flex项目* / align-items：center; / *垂直中心弹性物品* / / *仅用于演示目的* / height：250px;宽度：400px;边界：1px固体＃777; background-color：lightgreen;} flex-container-1> flex-item {height：90％; flex：0 0 45％; / *< flex-grow> <挠曲收缩> <挠曲-基础> * / margin-right：8px; / *居中物品之间的空间位* / border：1px虚线＃333; background-color：yellow;} flex-container-2 {height：90％; flex：0 0 45％;显示：flex; / * flex项目现在也是flex容器* / flex-direction：column; / *项目将垂直堆叠* / justify-content：space-between; / *垂直对齐项目* /} flex-container-2> flex-item {flex：0 0 22％;边框：1px虚线＃333; background-color：yellow;}  

< flex-container -1><！ - 主容器 - > < flex-item>< / flex-item><！ - flex item＃1（first column） - > < flex-container-2><！ - flex item＃2 / nested flex container（second column） - > <挠曲项>< /柔性项> <挠曲项>< /柔性项> <挠曲项>< /柔性项> <挠曲项>< /柔性项> < / flex-container-2><！ - 关闭嵌套容器 - > < / flex-container-1><！ - close main container - >

b


jsFiddle

I am having difficulty displaying the following layout in flex. I have 5 boxes and I want to divide my container in two, displaying one box vertically and the other 4 vertically.

Here's my CSS:

.trades, .trade-panel {
    flex: 1;
 }
.layout-4-5 {
    flex-direction: column;
}
.layout-4-5 > div {
    width: 50%;
}

Then I set the basis of the fourth or last child to 100%.

.layout-4-5 > div:nth-child(1) {
    flex-basis: 100%;
}

And here's my HTML

<div class="trades layout-4-5">
  <!--trade-panel are my individual boxes --->
  <div class="trade-panel">
    </div>

</div>

Above print my layout horizontally. Considering My flex-direction is column and my first child or box has a 100% basis, shouldn't that print what I want? Please any help would be appreciated.

Note: Since the boxes are of equal size, the column containing the four other boxes should be longer, provided they are in the arrangement above, its ok. tq

解决方案

I'm not entirely clear on your question or code. But here's a general solution:

flex-container-1 {
    display: flex;                   /* establish flex container */
    flex-direction: row;             /* flex items will align horizontally */
    justify-content: center;         /* center flex items horizontally */
    align-items: center;             /* center flex items vertically */
    
    /* for demo purposes only */
    height: 250px;
    width: 400px;
    border: 1px solid #777;
    background-color: lightgreen;
}

flex-container-1 > flex-item {
    height: 90%;
    flex: 0 0 45%;                   /* <flex-grow> <flex-shrink> <flex-basis> */
    margin-right: 8px;               /* a bit of space between the centered items */
    border: 1px dashed #333;
    background-color: yellow;
}

flex-container-2 {
    height: 90%;
    flex: 0 0 45%;
    display: flex;                   /* flex item is now also flex container */
    flex-direction: column;          /* items will stack vertically */
    justify-content: space-between;  /* align items vertically */
}

flex-container-2 > flex-item {
    flex: 0 0 22%;
    border: 1px dashed #333;
    background-color: yellow;
}

<flex-container-1><!-- main container -->

    <flex-item></flex-item><!-- flex item #1 (first column) -->
    
    <flex-container-2><!-- flex item #2 / nested flex container (second column) -->
    
        <flex-item></flex-item>

        <flex-item></flex-item>

        <flex-item></flex-item>

        <flex-item></flex-item>

    </flex-container-2><!-- close nested container -->
    
</flex-container-1><!-- close main container -->

jsFiddle

这篇关于有两列的Flex容器;第二列有四排的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！