Undesired wrap behaviour in flexbox items

Question

I can't get the third flex element item to wrap right at the bottom of the first. Instead, it just floats to the middle of the flex container, since I haven't specified any flex-direction property and set my flex items to wrap the third one should go right below the first one but it doesn't for some reason.

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


  
    
      MENU 2018
      Una muestra de nuestros platos
      
      
        ENLACE
        
        ENLACE
        
        ENLACE
        
        ENLACE
        
        ENLACE
      
      
        
          ASADDDCRF RFEV ERFREF
          ASADDDCRF RFEV ERFREF
        
        
          ASADDDCRF RFEV ERFREF
          ASADDDCRF RFEV ERFREF
        
        
          ASADDDCRF RFEV ERFREF
          ASADDDCRF RFEV ERFREF

Maxim Mazurok · Accepted Answer

You can control it, using align-content property on parent element. So, in your case it would be:

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

Explanation from CSS-TRICKS:

It helps aligning a flex container's lines within it when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main-axis.

Fixed snippet:

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


  
    
      MENU 2018
      Una muestra de nuestros platos
      
      
        ENLACE
        
        ENLACE
        
        ENLACE
        
        ENLACE
        
        ENLACE
      
      
        
          ASADDDCRF RFEV ERFREF
          ASADDDCRF RFEV ERFREF
        
        
          ASADDDCRF RFEV ERFREF
          ASADDDCRF RFEV ERFREF
        
        
          ASADDDCRF RFEV ERFREF
          ASADDDCRF RFEV ERFREF

Undesired wrap behaviour in flexbox items

Answers (1)

Related Questions