Flexbox项目中的意外包装行为

Question

我无法将第三个flex元素项包装在第一个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的解释：

  

当存在时，它有助于在其中对齐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;
    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>