align-items属性无法正常工作

时间：2016-07-25 21:44:46

标签： html css css3 height flexbox

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

Justify-content工作正常，我试图找出align-items无效的原因，因为.right容器类的高度与父div，或者它应该是。

我试图申请space-between，但我的两个元素没有传播。

实际上看起来所有列的高度都设置为auto，即使我把100％的高度放在一边，所以我不确定是怎么回事。

我为最内层的孩子设置了auto，但没有为.container的直接孩子设置{。}}。

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：1)

你的代码中有很多。

然而，要克服的第一个障碍，可以简化其余的故障排除，是：

  • 主要灵活容器（.container）有align-items: flex-start。

这意味着所有孩子，包括.right，都将与容器的交叉开头对齐。

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

通过删除此规则，将每个框的高度限制为其内容的高度，更改每个元素的对齐和高度将不会出现问题。

但是，就像我说的那样，代码中有很多内容。需要关注的其他问题包括：

  • 使用百分比高度时，父元素必须具有指定的高度才能作为子项的引用（除非父级是绝对定位的）
  • min-height不适用于百分比高度儿童的父参考;它必须是height属性
  • 使用align-content: space-between（在您的代码中有align-items: space-between，但不存在）

此处有更多详情：Working with the CSS height property and percentage values

答案 1 :(得分：1)

嗯，这是我发现的：

  1. 没有'align-items：space-between;'属性在规范中，因为你使用flex-direction：row with wrap它应该是'align-content：space-between;'
  2. 使用.container的'align-items：stretch'属性来拉伸 儿童和他们的'身高'属性，flex将采取 关心它本身。

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

相关问题
最新问题