Question

我在flex中显示以下布局时遇到困难。我有5个盒子，我想把我的容器分成两个，垂直显示一个盒子，垂直显示另一个盒子。

这是我的CSS：

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

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

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

这是我的HTML

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

</div>

上面水平打印我的布局。考虑到我的flex-direction是column且我的第一个孩子或盒子有100％的基础，不应该打印出我想要的内容吗？请任何帮助将不胜感激。

注意：由于方框的大小相同，包含其他四个方框的列应该更长，只要它们在上面的排列中，就可以了。 TQ

Answer 1

我的问题或代码并不完全清楚。但这是一般解决方案：

＆＃13;

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;
}

＆＃13;

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

＆＃13;

jsFiddle

Answer 2

我已经提供了边距和背景颜色属性，因此您可以更好地理解。

<div id="wrapper">
    <div id="left">
       <div class="flex-harshad">
         <div class = "flex-harshad2">  
            Harshad
         </div></div>
    </div>

    <div id="right">
       <div class="flex-harshad">
        <div class="flex-item">world</div>
        <div class="flex-item">by</div>
        <div class="flex-item">Alan</div>
        <div class="flex-item">Dong</div>
      </div>
    </div>
  </div>

这是css。

body,
div {
  margin: 0;
  border: 0 none;
  padding: 0;
}

html,
body,
#wrapper,
#left,
#right {
  height: 100%;
  min-height: 100%;
}

#wrapper {
  margin: 0 auto;
  overflow: hidden; 
}

#left { 
  float: left; 
}

div.flex-harshad2{    
    margin : 5px;
    margin-top : 25px;   
    min-height: 91%;
    background : white ;
    width : 90px;        
}

div.flex-harshad{
    background: red;
    height : 100%;   
    width : 100px;
    text-align: center; 
    display : inline-block; 
    background :orange ;
    margin :10px;  
}
div.flex-item {
  background: white;
  margin: 5px;
  margin-top : 25%;
  min-height : 20%;; 
  /* remove text-lign will not center text itself */
  text-align: center;   
}

这是输出：

Answer 3

我在这个问题上挣扎和挣扎，然后偶然发现了这个问题的新解决方案正确因为我决定放弃并使用花车。我终于能够在没有为列使用单独的DIV的情况下使用它了。

更新：我通过在.items上指定高度简化了我之前的版本。

向width提供非百分比height和.items。
在flex-direction: column上使用.items。

CSS：

.items {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  width: 40em;
  height: 20em;
}

  .item:first-child {
    width: 20em;
    height: 20em;
    background-color: black;
  }

  .item:nth-child(2) {
    width: 20em;
    height: 5em;
    background-color: pink;
  }

  .item:nth-child(3) {
    width: 20em;
    height: 5em;
    background-color: blue;
  }

  .item:nth-child(4) {
    width: 20em;
    height: 5em;
    background-color: yellow;
  }

  .item:last-child {
    width: 20em;
    height: 5em;
    background-color: red;
  }

HTML：

<div class="items">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div><!-- .items -->

Codepen： https://codepen.io/anon/pen/ZXoqJJ

Flex容器有两列;第二列有四行

3 个答案:

jsFiddle