Question

使用flexbox时遇到问题。

当我没有设置align-items: center;

时，子div填充父div

.outer {
width: 200px;
height: 200px;
display: flex;
background-color: red;
}

.inner {
  flex: 1 1 auto;
  background-color: blue;
}

<div class="outer">
  <div class="inner">
  </div>
</div>

但是当我将align-items: center;设置为外部div时，flex: 1 1 auto;无效。

.outer {
width: 200px;
height: 200px;
display: flex;
background-color: red;
align-items: center;
}

.inner {
  flex: 1 1 auto;
  background-color: blue;
}

<div class='outer'>
  <div class='inner'>
  </div>
</div>

有人可以解决这个问题吗？

提前致谢。

Answer 1

添加宽度和高度100％;内部div

.outer {
width: 200px;
height: 200px;
display: flex;
background-color: red;
align-items: center;
}

.inner {
  flex: 1 1 auto;
  background-color: blue;
  width : 100%;
  height: 100%;
}

<div class='outer'>
  <div class='inner'>
  </div>
</div>

Answer 2

#main {
    width: 220px;
    height: 300px;
    border: 1px solid black; 
    display: -webkit-flex; /* Safari */
    -webkit-align-items: center; /* Safari 7.0+ */
    display: flex;
    justify-content: center ;
    align-items: center;
}

#main div {
    height: 100%;
    width: 100%;


}
</style>
</head>
<body>

<div id="main">
  <div style="background-color:coral;"></div>
 </div>
</div>

CSS填充父级高度并保留

2 个答案: