1

For some reason the align-items property is not working properly.

Justify-content is working fine, and I'm trying to figure out why align-items is not working, because the height of the .right container class is just as high as the parent div, or so it should be.

I'm trying to apply space-between but my two elements are not spreading.

And actually it seems as though height is set to auto for all the columns even though I put 100% for height so I'm not sure what's going on.

I've set auto for the innermost children, but not for the immediate children of .container.

html,
body {
  height: 100%;
}
#bigwrap {
  position: relative;
}
.left,
.middle,
.right {
  border-right: 1px solid blue;
}
.left {
  display: flex;
  flex-flow: column wrap;
  align-items: center;
  justify-content: space-around;
  order: 1;
  flex: 1 20%;
  height: 100%;
}
.left img {
  max-width: 100%;
}
.middle {
  display: flex;
  flex-flow: column wrap;
  order: 2;
  flex: 2 20%;
  height: 100%;
}
.right {
  display: flex;
  position: relative;
  flex-flow: row wrap;
  align-items: space-between;
  justify-content: center;
  order: 3;
  flex: 1 50%;
  height: 100%;
}
div.list {
  display: flex;
  flex-flow: row wrap;
  width: 70%;
  justify-content: center;
  line-height: 300%;
  ;
  border: 1px solid pink;
}
.right .list {
  // text-align: center;
  height: auto;
}
.list ul {
  list-style: none;
  padding: 0;
}
.list a {
  text-decoration: none;
  color: inherit;
}
.headbox h3 {
  color: orange;
}
.container {
  display: flex;
  //position: absolute;
  position: relative;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  min-height: 70vh;
  width: 70%;
  margin: 5% auto 8% auto;
  background-color: white;
}
.container p {
  margin-bottom: 12%;
}
.container img {
  margin-bottom: 10%;
}
.container img:first-child {
  margin-top: 5%;
}
.middle p:first-child {
  margin-top: 8%;
}
.left,
.middle,
.right {
  border-right: 1px solid blue;
}
.left {
  display: flex;
  flex-flow: column wrap;
  align-items: center;
  justify-content: space-around;
  order: 1;
  flex: 1 20%;
  height: 100%;
}
.left img {
  max-width: 100%;
}
.middle {
  display: flex;
  flex-flow: column wrap;
  order: 2;
  flex: 2 20%;
  height: 100%;
}
.right .list {
  height: auto;
}
.list ul {
  list-style: none;
  padding: 0;
}
.list a {
  text-decoration: none;
  color: inherit;
}
.headbox h3 {
  color: orange;
}
.right .headbox {
  border: 1px solid orange;
  width: 70%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
<div id="bigwrap">
  <div class="container">
    <div class="left">
      <img src="cat1.jpeg" alt="Picture of kid">
      <img src="cat1.jpeg" alt="Picture of kid">
    </div>
    <div class="middle">
      <div class="box">
        <p>
          Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text.
        </p>
      </div>
      <div class="box">
        <p>
          Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text.
        </p>
      </div>
      <div class="box">
        <p>
          Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text.
        </p>
      </div>
    </div>
    <div class="right">
      <div class="headbox">
        <h3>Visit Us</h3>
      </div>
      <div class="list">
        <ul>
          <li><a href="#">Home</a>
          </li>
          <li><a href="#">Hours</a>
          </li>
          <li><a href="#">Plan</a>
          </li>
          <li><a href="#">Directions</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Shinji-san
  • 971
  • 4
  • 14
  • 31

2 Answers2

2

There's a lot going on in your code.

However, the first hurdle to overcome, which may simplify the rest of the troubleshooting, is this:

  • The primary flex container (.container) has align-items: flex-start.

This means that all children, including .right, will align to the cross-start of the container.

Notice how the blue border in the first and last column ends near the top with the content height? That's the result of align-items: flex-start.

By removing this rule, which limits the height of each box to the height of their content, changing the alignment and height of each element will be less problematic.

But, like I said, there's a lot going on in your code. Other issues to focus on include:

  • when using percentage heights, parent elements must have a specified height in order to serve as a reference for the child (unless the parent is absolutely positioned)
  • min-height doesn't work as a parent reference for children with percentage heights; it must be the height property
  • Use align-content: space-between (in your code you have align-items: space-between, which doesn't exist)

More details here: Working with the CSS height property and percentage values

Community
  • 1
  • 1
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
1

Well, here's what I found:

  1. There's no 'align-items: space-between;' property in specification, since you use flex-direction: row with wrapping it should be 'align-content: space-between;'
  2. Use 'align-items: stretch' property of .container to stretch the children and drop 'height' property on them, flex is going to take care of it itself.

html, body {
  height: 100%;

}




#bigwrap {
  position: relative;

}



.left, .middle, .right{
    border-right: 1px solid blue;
}







.left {
    display: flex;
    flex-flow: column wrap;
    align-items: center;
    justify-content: space-around;
    order: 1;
    flex: 1 20%;
}

.left img {
    max-width: 100%;
}

.middle {
    display: flex;
    flex-flow: column wrap;
    order: 2;
    flex: 2 20%;
}

.right {
 display: flex;
 position: relative;
 flex-flow: row wrap;
 align-content: space-between;
 justify-content: center;
 order: 3;
 flex: 1 50%;
}

div.list{
  
  display: flex;
  flex-flow: row wrap;
  width: 70%;
  justify-content: center;
  line-height: 300%;;
  border: 1px solid pink;

}



.right .list{
    // text-align: center;
    height: auto;
}

.list ul{
    list-style: none;
    padding: 0;
}

.list a{
    text-decoration: none;
    color: inherit;
}

.headbox h3{
    color: orange;
}


.container {
    display: flex;
    //position: absolute;
    position: relative;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    min-height: 70vh;
    width: 70%;
    margin: 5% auto 8% auto;
    background-color: white;
}

.container p {
  
  margin-bottom: 12%;
  
}

.container img {
  
  margin-bottom: 10%;
  
}

.container img:first-child{
  
  margin-top: 5%;
  
}

.middle p:first-child{
  
  margin-top: 8%;
  
  
}



.left, .middle, .right{
    border-right: 1px solid blue;
}







.left {
    display: flex;
    flex-flow: column wrap;
    align-items: center;
    justify-content: space-around;
    order: 1;
    flex: 1 20%;
}

.left img {
    max-width: 100%;
}

.middle {
    display: flex;
    flex-flow: column wrap;
    order: 2;
    flex: 2 20%;
    height: 100%;
}




.right .list{
    height: auto;
}



.list ul{
    list-style: none;
    padding: 0;
}

.list a{
    text-decoration: none;
    color: inherit;
}

.headbox h3{
    color: orange;
}


.right .headbox{
  border: 1px solid orange;
  width: 70%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
 <div id="bigwrap">


   
       <div class="container">
        <div class="left">
            <img src="cat1.jpeg" alt="Picture of kid">
             <img src="cat1.jpeg" alt="Picture of kid">
            
           
        </div>
        <div class="middle">
            <div class="box">
              <p>
                 Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text.
                 Sample text. Sample text. Sample text. Sample text. Sample text.  Sample text. Sample text. Sample text. Sample text.
              </p>


            </div>

              <div class="box">
              <p>
                Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text.
                 Sample text. Sample text. Sample text. Sample text. Sample text.  Sample text. Sample text. Sample text. Sample text.
             </p>

             </div>
            
            <div class="box">
            <p>
               Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text.
               Sample text. Sample text. Sample text. Sample text. Sample text.  Sample text. Sample text. Sample text. Sample text.
            </p>
              


            </div>

        </div>

        <div class="right">
            <div class="headbox">
                <h3>Visit Us</h3>
              
            </div>

            <div class="list">
                   <ul>
                       <li><a href="#">Home</a></li>
                       <li><a href="#">Hours</a></li>
                       <li><a href="#">Plan</a></li>
                       <li><a href="#">Directions</a></li>

                   </ul>
            </div>


            
            

        </div>
    </div>

</div>
Andrey Goncharov
  • 111
  • 1