我如何把我的柔性箱下面放到两个柔性箱

Question

我是HTML中的新Flex。

所以我的问题是我有三个div在我的flex容器。但要求是我想第三个div低于一个和第二个div。因为我使用了柔性容器display: flex。这三个分区本身也被安置在同一排。

有人可以帮助我。

.flex-container-site-footer { 
 
    display: flex; 
 
} 
 

 
.box { 
 
    height: 100px; 
 
    min-width: 100px; 
 
} 
 

 
.One { 
 
    background-color: blue; 
 
    flex-grow: 12; 
 
} 
 

 
.two { 
 
    background-color: yellow; 
 
    flex-grow: 12; 
 
} 
 

 
.three { 
 
    background-color: black; 
 
    flex-grow: 0 
 
}

<div class="flex-container-site-footer"> 
 
    <div class="box One"> 
 
    <p>Box 1</p> 
 
    </div> 
 
    <div class="box two"> 
 
    <p>Box 2</p> 
 
    </div> 
 
    <div class="box three"> 
 
    <p>Box 3</p> 
 
    </div> 
 
</div>

DEMO HERE

Answer 1

这样做。所述flex速记用于（按顺序）：

• flex-grow，
• flex-shrink
• flex-basis。

别忘了autoprefix。

.flex-container-site-footer{ 
 
    display:flex; 
 
    flex-wrap: wrap; 
 
} 
 
.flex-container-site-footer > * { 
 
    flex: 0 0 50%; 
 
    max-width: 50%; 
 
} 
 

 
.box{ 
 
    height:100px; 
 
} 
 
.One{ 
 
    background-color: blue; 
 
} 
 

 
.two{ 
 
    background-color: yellow; 
 
} 
 

 
.three{ 
 
    background-color: black; 
 
    flex-basis: 100%; 
 
    max-width: none; 
 
}

<div class="flex-container-site-footer"> 
 
    <div class="box One"> 
 
     <p>Box 1</p> 
 
    </div> 
 
    <div class="box two"> 
 
     <p>Box 2</p> 
 
    </div> 
 
    <div class="box three"> 
 
     <p>Box 3</p> 
 
    </div> 
 
</div>