代码之家  ›  专栏  ›  技术社区  ›  Álvaro

包含四个div的Flex容器,需要三列,第二列包含两行

  •  5
  • Álvaro  · 技术社区  · 6 年前

    对于页面上的一个部分,我试图显示两个矩形div,它们堆叠在两边的两个方形div之间,大小相当于两个堆叠div的高度,在这些div内是img标记。

    overflow: hidden

     <div class="flex_container">
       <div class='flex_child square'>
         <img...>
       </div>
       <div class='flex-child rect'>
         <img...>
       </div>
       <div class='flex-child rect'>
         <img...>
       </div>
       <div class='flex-child square'>
         <img...>
       </div>
     </div>
    

    Example by image

    5 回复  |  直到 6 年前
        1
  •  3
  •   Temani Afif    6 年前

    假设这将是页面的主要布局,您可以尝试设置固定高度并使用flexbox的列方向:

    .flex_container {
      height: 100vh; /*adjust this value like you want*/
      display: flex;
      flex-direction: column;
      flex-wrap:wrap;
    }
    .flex_child {
      background:purple;
      border:2px solid #fff;
      box-sizing:border-box;
      width:calc(100% / 3);
    }
    .square {
      flex:1 1 100%;
    }
    .rect {
      flex:1 1 47%;
    }
    
    body {
      margin: 0;
    }
    <div class="flex_container">
      <div class='flex_child square'></div>
      <div class='flex_child rect  '></div>
      <div class='flex_child rect  '></div>
      <div class='flex_child square'></div>
    </div>

    如果您想获得更好的浏览器支持,可以使用float/inline block,方法是在开始时稍微调整2个正方形的类:

    .flex_container {
      height: 100vh; /*adjust this value like you want*/
    }
    .flex_child {
      background:purple;
      border:2px solid #fff;
      box-sizing:border-box;
      width:calc(100% / 3);
      height:100%;
    }
    .square:nth-child(1) {
      float:left;
    }
    .square:nth-child(2) {
      float:right;
    }
    .rect {
      display:inline-block;
      height:50%;
      vertical-align:top;
    }
    
    body {
      margin: 0;
    }
    <div class="flex_container">
      <div class='flex_child square'></div>
      <div class='flex_child square'></div>
      <div class='flex_child rect  '></div>
      <div class='flex_child rect  '></div>
    </div>

    如果不能同时更改类,请使用一些负边距来更正最后一个元素的位置:

    .flex_container {
      height: 100vh; /*adjust this value like you want*/
    }
    .flex_child {
      background:purple;
      border:2px solid #fff;
      box-sizing:border-box;
      width:calc(100% / 3);
      height:100%;
    }
    .square:first-child {
      float:left;
    }
    .square:last-child {
      float:right;
      margin-top:-50vh;
    }
    .rect {
      display:inline-block;
      height:50%;
      vertical-align:top;
    }
    
    body {
      margin: 0;
    }
    <<div class='flex\u child square'></部门>
    <div class='flex\u child rect'></部门>
    <div class='flex\u child rect'></部门>
    <div class='flex\u child square'></部门>
    </部门>
        2
  •  2
  •   chazsolo    6 年前

    对你的内容做一些主要的假设,但是你可以使用绝对定位来调整内容。实际上,您可以将中间的两个元素从文档流中拉出,并通过定位来模拟堆叠。

    在这种情况下,当 767px 767像素 justify-content: space-between 提供视觉空间。

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    
    .flex_container {
      position: relative;
      display: flex;
    }
    
    .flex_item {
      flex: 1;
      height: 120px;
      border: 1px solid orange;
      padding: 40px;
      background-color: red;
      text-align: center;
    }
    
    @media (max-width: 767px) {
      .flex_container {
        justify-content: space-between;
      }  
    
      .flex_item {
        padding: 20px;
      }
      
      .square {
        flex: 0 1 33%;
      }
      
      .rect {
        position: absolute;
        left: calc(100% / 3);
        width: calc(100% / 3);
        height: 50%;
      }
      .rect.three {
        top: 50%;
      }
    }
    <div class="flex_container">
      <div class="one flex_item square">
        One
      </div>
      <div class="two flex_item rect">
        Two
      </div>
      <div class="three flex_item rect">
        Three
      </div>
      <div class="four flex_item square">
        Four
      </div>
    </div>

    flex-direction: column

        3
  •  0
  •   User__42    6 年前

    尝试

       .flex_container{
          display:flex;
          flex-direction: row;
          border: 1px solid red;
    
        }
        .flex_container2{
          display:flex;
          flex-direction:column;
          border: 1px solid green;
        }  
        .flex-child{
          border: 1px solid blue;
         } 
     <div class="flex_container">
       <div class='flex_child square'>A</div>
       <div class="flex_container2">
           <div class='flex-child rect'>B</div>
           <div class='flex-child rect'>C</div>
       </div>
       <div class='flex-child square'>D</div>
     </div>

    我想你需要另一个弹性容器。

        4
  •  0
  •   Romildo da Silva    6 年前

    rect 变得容易了。 你可以控制 height and width 属于 square 使它们成为正方形,而不是动态宽度。

    .flex-container {
      	display: flex;
      	height: 150px;
    }
    .container>*, .square {
      background-color: purple;
    }
    
    .flex-child {
        flex:1;
        display: inline-flex;
        margin: 2px
    }
    
    .square { flex-basis: 25%; }
    .container {
        flex-direction: row;
        flex-basis: 50%
    }
    .container > * { 
      flex-basis: 50%; 
    }
    .container div:first-child {
    	margin-right: 4px 
    }
    
    @media (max-width: 767px) {
      .container {
          flex-direction: column;
          flex-basis: 33.333%
      }
      .container div:first-child{
          margin: 0 0 4px 0
       }	
    }
    <div class="flex-container">
       <div class='flex-child square'></div>
       <div class='flex-child container'>
       		<div class='rect'></div>
       		<div class='rect'></div>
       </div>
       <div class='flex-child square'></div>
     </div>

    full page 看到变化)

    .flex-container {
      	display: flex;
      	height: 150px;
    }
    .container>*, .square {
      background-color: purple;
    }
    
    .flex-child {
        flex:1;
        display: inline-flex;
        margin: 2px
    }
    
    .square { flex-basis: 25%; }
    .container {
        flex-direction: column;
        flex-basis: 33.333%
    }
    .container > * { 
      flex-basis: 50%; 
    }
    .container div:first-child {
    	margin: 0 0 4px 0
    }
    
    @media (max-width: 767px) {
    	.square, .container>* {
        	height: 100px;
        }
    	.flex-container {
        	height: auto;
        	flex-direction: column;	
        }
      	.rect {
          flex-direction: column;
          flex-basis: 50%
      	}
      	
    }
        
    <div class="flex-container">
       <div class='flex-child square'></div>
       <div class='flex-child container'>
          <div class='rect'></div>
          <div class='rect'></div>
       </div>
       <div class='flex-child square'></div>
     </div>