align-items 属性工作不正常

Question

由于某些原因，align-items 属性无法正常工作。

Justify-content 工作正常，我想弄清楚为什么 align-items 不工作，因为 .right 容器 class 的高度只是和 parent div 一样高，或者应该是这样。

我正在尝试应用 space-between 但我的两个元素没有扩散。

实际上似乎所有列的高度都设置为 auto，尽管我将高度设置为 100%，所以我不确定发生了什么。

我已经为最里面的 children 设置了 auto，但没有为 .container 的直接 children 设置。

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>

Answer 1

您的代码中有很多。

但是，要克服的第一个障碍可能会简化其余的故障排除：

主弹性容器 (.container) 有 align-items: flex-start.

这意味着包括 .right 在内的所有子项都将与容器的交叉起点对齐。

注意第一列和最后一列中的蓝色边框如何以内容高度在顶部附近结束？这是 align-items: flex-start.

的结果

通过删除这条将每个框的高度限制为其内容的高度的规则，更改每个元素的对齐方式和高度将减少问题。

但是，就像我说的，您的代码中发生了很多事情。其他需要关注的问题包括：

使用百分比高度时，父元素必须具有指定的高度才能作为子元素的参考（除非父元素是绝对定位的）
min-height 不能作为身高百分比儿童的家长参考；必须是 height 属性
使用 align-content: space-between（在你的代码中你有 align-items: space-between，它不存在）

此处有更多详细信息：

Answer 2

好吧，这是我的发现：

规范中没有 'align-items: space-between;' 属性，因为你使用 flex-direction: row with wrapping 它应该是 'align-content: space-between;'
使用.container的'align-items: stretch'属性来拉伸 children 并将 'height' 属性放在他们身上，flex 将采取照顾它自己。

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>

align-items 属性工作不正常

align-items property not working correctly

html

css

height

flexbox

align-items 属性 工作不正常

align-items property not working correctly

html

css

height

flexbox

align-items 属性工作不正常