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

标签： htmlcssflexbox

Answer 1

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

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

CSS-TRICKS 的解释：

当交叉轴上有额外的空间时，它有助于对齐 flex 容器的线条，类似于 justify-content 如何对齐主轴内的单个项目。

固定片段：

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