flexbox项目中不希望出现的包裹行为

Question

我无法将第三个flex元素项包装在第一个元素项的底部。相反，它只是浮动到flex容器的中间，因为我没有指定任何flex-direction属性，也没有将我的flex项设置为包装。第三个应该位于第一个的正下方，但由于某种原因，它没有。

.section_menu_cata_maincontainer {
width: 100%;
height: auto;
display: flex;
justify-content: center;
background-color: rgba(0, 0, 0, 0.3);
padding: 15px;
}
.section_menu_cata_border_container {
width: 60%;
height: auto;
background-color: rgb(251, 250, 248);
display: flex;
padding: 10px;
position: relative;
}
.section_menu_cata_content_container {
width: 100%;
min-height: 500px;
display: flex;
flex-direction: column;
align-items: center;
outline: 2px solid rgb(187, 193, 182);
position: relative;
padding: 15px;
}
.section_menu_cata_title {
font-size: 46px;
color: rgb(94, 94, 129);
margin: 15px 0px;
}
.section_menu_cata_description {
font-size: 20px;
color: rgb(94, 94, 129);
margin: 5px 0px;
}
.section_menu_cata_horizontal_line {
width: 95%;
height: 10px;
margin: 15px 0px;
border-top: 2px solid rgb(187, 193, 182);
border-bottom: 2px solid rgb(187, 193, 182);
}
.section_menu_cata_links_container {
width: auto;
height: auto;
margin: 10px 0px;
display: flex;
align-items: center;
}
.section_menu_cata_links_link {
font-size: 13px;
color: rgb(94, 94, 94);
}
.section_menu_cata_link_separator {
color: rgb(187, 193, 182);
font-size: 5px;
margin: 0px 8px;
}
.section_menu_cata_entries_container {
width: 100%;
min-height: 500px;
display: flex;
flex-wrap: wrap;
outline: 1px solid red;
}
.section_menu_cata_entry_container {
width: 50%;
height: 40px;
margin: 15px 0px;
display: flex;
flex-direction: column;
align-items: center;
outline: 1px solid blue;
text-align: center;
}
.section_menu_cata_entry_text {
font-size: 14px;
color: rgb(94, 94, 94);
margin: 5px 0px;
}

<div class="section_menu_cata_maincontainer" style="">
<div class="section_menu_cata_border_container" style="width:85%;">
<div class="section_menu_cata_content_container" style="">
<span class="section_menu_cata_title" style="">MENU 2018</span>
<span class="section_menu_cata_description" style="">Una muestra de nuestros platos</span>
<div class="section_menu_cata_horizontal_line" style=""></div>
<div class="section_menu_cata_links_container" style="">
<a class="section_menu_cata_links_link" style="" href="">ENLACE</a>
<i class="section_menu_cata_link_separator fa fa-circle" style=""></i>
<a class="section_menu_cata_links_link" style="" href="">ENLACE</a>
<i class="section_menu_cata_link_separator fa fa-circle" style=""></i>
<a class="section_menu_cata_links_link" style="" href="">ENLACE</a>
<i class="section_menu_cata_link_separator fa fa-circle" style=""></i>
<a class="section_menu_cata_links_link" style="" href="">ENLACE</a>
<i class="section_menu_cata_link_separator fa fa-circle" style=""></i>
<a class="section_menu_cata_links_link" style="" href="">ENLACE</a>
</div>
<div class="section_menu_cata_entries_container" style="">
<div class="section_menu_cata_entry_container" style="">
<span class="section_menu_cata_entry_text" style="">ASADDDCRF RFEV ERFREF</span>
<span class="section_menu_cata_entry_text" style="">ASADDDCRF RFEV ERFREF</span>
</div>
<div class="section_menu_cata_entry_container" style="">
<span class="section_menu_cata_entry_text" style="">ASADDDCRF RFEV ERFREF</span>
<span class="section_menu_cata_entry_text" style="">ASADDDCRF RFEV ERFREF</span>
</div>
<div class="section_menu_cata_entry_container" style="">
<span class="section_menu_cata_entry_text" style="">ASADDDCRF RFEV ERFREF</span>
<span class="section_menu_cata_entry_text" style="">ASADDDCRF RFEV ERFREF</span>
</div>
</div>
</div>
</div>
</div>

Answer 1

您可以使用父元素上的align-content属性来控制它。所以，在你的情况下，它会是：

.section_menu_cata_entries_container {
align-content: flex-start;
}

来自CSS-TRICKS:的解释

当存在十字轴上的额外空间，类似于对齐内容的方式主轴内的单个项目。

修复片段：

.section_menu_cata_maincontainer {
width: 100%;
height: auto;
display: flex;
justify-content: center;
background-color: rgba(0, 0, 0, 0.3);
padding: 15px;
}
.section_menu_cata_border_container {
width: 60%;
height: auto;
background-color: rgb(251, 250, 248);
display: flex;
padding: 10px;
position: relative;
}
.section_menu_cata_content_container {
width: 100%;
min-height: 500px;
display: flex;
flex-direction: column;
align-items: center;
outline: 2px solid rgb(187, 193, 182);
position: relative;
padding: 15px;
}
.section_menu_cata_title {
font-size: 46px;
color: rgb(94, 94, 129);
margin: 15px 0px;
}
.section_menu_cata_description {
font-size: 20px;
color: rgb(94, 94, 129);
margin: 5px 0px;
}
.section_menu_cata_horizontal_line {
width: 95%;
height: 10px;
margin: 15px 0px;
border-top: 2px solid rgb(187, 193, 182);
border-bottom: 2px solid rgb(187, 193, 182);
}
.section_menu_cata_links_container {
width: auto;
height: auto;
margin: 10px 0px;
display: flex;
align-items: center;
}
.section_menu_cata_links_link {
font-size: 13px;
color: rgb(94, 94, 94);
}
.section_menu_cata_link_separator {
color: rgb(187, 193, 182);
font-size: 5px;
margin: 0px 8px;
}
.section_menu_cata_entries_container {
width: 100%;
min-height: 500px;
display: flex;
flex-wrap: wrap;
outline: 1px solid red;
align-content: flex-start;
}
.section_menu_cata_entry_container {
width: 50%;
height: 40px;
margin: 15px 0px;
display: flex;
flex-direction: column;
align-items: center;
outline: 1px solid blue;
text-align: center;
}
.section_menu_cata_entry_text {
font-size: 14px;
color: rgb(94, 94, 94);
margin: 5px 0px;
}

<div class="section_menu_cata_maincontainer" style="">
<div class="section_menu_cata_border_container" style="width:85%;">
<div class="section_menu_cata_content_container" style="">
<span class="section_menu_cata_title" style="">MENU 2018</span>
<span class="section_menu_cata_description" style="">Una muestra de nuestros platos</span>
<div class="section_menu_cata_horizontal_line" style=""></div>
<div class="section_menu_cata_links_container" style="">
<a class="section_menu_cata_links_link" style="" href="">ENLACE</a>
<i class="section_menu_cata_link_separator fa fa-circle" style=""></i>
<a class="section_menu_cata_links_link" style="" href="">ENLACE</a>
<i class="section_menu_cata_link_separator fa fa-circle" style=""></i>
<a class="section_menu_cata_links_link" style="" href="">ENLACE</a>
<i class="section_menu_cata_link_separator fa fa-circle" style=""></i>
<a class="section_menu_cata_links_link" style="" href="">ENLACE</a>
<i class="section_menu_cata_link_separator fa fa-circle" style=""></i>
<a class="section_menu_cata_links_link" style="" href="">ENLACE</a>
</div>
<div class="section_menu_cata_entries_container" style="">
<div class="section_menu_cata_entry_container" style="">
<span class="section_menu_cata_entry_text" style="">ASADDDCRF RFEV ERFREF</span>
<span class="section_menu_cata_entry_text" style="">ASADDDCRF RFEV ERFREF</span>
</div>
<div class="section_menu_cata_entry_container" style="">
<span class="section_menu_cata_entry_text" style="">ASADDDCRF RFEV ERFREF</span>
<span class="section_menu_cata_entry_text" style="">ASADDDCRF RFEV ERFREF</span>
</div>
<div class="section_menu_cata_entry_container" style="">
<span class="section_menu_cata_entry_text" style="">ASADDDCRF RFEV ERFREF</span>
<span class="section_menu_cata_entry_text" style="">ASADDDCRF RFEV ERFREF</span>
</div>
</div>
</div>
</div>
</div>