我试图垂直对齐ID包装器中的元素.我将属性display:inline-flex;赋予此ID,因为ID包装器是flex容器.
但是演示文稿没有区别.我希望能够显示包装器ID中的所有内容inline.为什么不呢？
#wrapper {
display: inline-flex;
/*no difference to display:flex; */
}<body>
<div id="wrapper">
<header>header</header>
<nav>nav</nav>
<aside>aside</aside>
<main>main</main>
<footer>footer</footer>
</div>
</body>我有以下结构,我想了解为什么我的行不会随其内在内容而增长.
.row {
border:solid red;
display: flex;
flex-direction: row;
}
.cell {
border: solid green;
flex: 0 0 400px;
}<div class="row">
<div class="cell">
cell 1
</div>
<div class="cell">
cell 2
</div>
<div class="cell">
cell 3
</div>
</div>我不希望细胞生长或收缩,它们应该总是400px宽.父进程应该增长并溢出窗口,并且预计会出现水平滚动条.
在上面的示例中,红色边框应位于绿色边框周围.绿色边框具有预期尺寸,而不是红色边框.
出于与我的用例相关的可维护性原因,我不想为我的行设置静态宽度.
我对非flexbox解决方案持开放态度(参见内联块尝试),但会更喜欢一个flexbox(因为我需要align-items: center行上的行为)