伸缩高度与flexbox对齐项目中心

我有一个div与display: flex; flex-direction: row;。除非我指定align-items: center，否则这个div的孩子会占据全高。下面的代码 -伸缩高度与flexbox对齐项目中心

.row { 
 
    display: flex; 
 
    flex-direction: row; 
 
    width: 100%; 
 
    height: 100px; 
 
    background: beige; 
 
    border: 1px solid red; 
 
    margin: 10px 0; 
 
} 
 

 
.row2 { 
 
    align-items: center; 
 
} 
 

 
.row-item { 
 
    border: 1px solid green; 
 
} 
 

 
.item1, 
 
.item3 { 
 
    width: 100px; 
 
} 
 

 
.item2 { 
 
    flex: 1; 
 
}

<div class="row row1"> 
 
    <div class="row-item item1">1</div> 
 
    <div class="row-item item2"> 
 
    <div> 2.1 </div> 
 
    <div> 2.2 </div> 
 
    </div> 
 
    <div class="row-item item3">3</div> 
 
</div> 
 

 
<div class="row row2"> 
 
    <div class="row-item item1">1</div> 
 
    <div class="row-item item2"> 
 
    <div> 2.1 </div> 
 
    <div> 2.2 </div> 
 
    </div> 
 
    <div class="row-item item3">3</div> 
 
</div>

JSFiddle

我想实现的是2.1和2.2应为50像素（50％）的高度和应有内容中间垂直对齐。他们还应该横向拉伸整个可用空间（如宽度：自动或100％）。那么如果2.1不存在，则2.2应该占用100像素的高度，并且应该垂直与中间对齐。

来源

2017-05-16 jaibatrik

你需要让行项目柔性对话框并应用他们

这是你应该添加

.row1 .row-item { 
    display: flex; 
    align-items: center; 
}

参见导致下面的代码：

.row { 
 
    display: flex; 
 
    flex-direction: row; 
 
    width: 100%; 
 
    height: 100px; 
 
    background: beige; 
 
    border: 1px solid red; 
 
    margin: 10px 0; 
 
} 
 

 
.row2 { 
 
    align-items: center; 
 
} 
 

 
.row-item { 
 
    border: 1px solid green; 
 
} 
 

 
.row1 .row-item { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 

 
.row1 .row-item div { 
 
    width: 100%; 
 
    border: 1px solid blue; 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
.item1, 
 
.item3 { 
 
    width: 100px; 
 
} 
 

 
.item2 { 
 
    flex: 1; 
 
}

<div class="row row1"> 
 
    <div class="row-item item1">1</div> 
 
    <div class="row-item item2"> 
 
    <div> 2.1 </div> 
 
    <div> 2.2 </div> 
 
    </div> 
 
    <div class="row-item item3">3</div> 
 
</div> 
 

 
<div class="row row2"> 
 
    <div class="row-item item1">1</div> 
 
    <div class="row-item item2"> 
 
    <div> 2.1 </div> 
 
    <div> 2.2 </div> 
 
    </div> 
 
    <div class="row-item item3">3</div> 
 
</div>

来源

2017-05-16 07:32:19 Chiller

你好，我想任何股利是内部进行集中排列的行项目。你有什么想法如何实现这一点。刚刚更新了这个问题来反映这一点。 – jaibatrik

@jaibatrik你的意思是与row2相同的结果，但具有整个行项目的高度？ – Chiller

是的，这就是我想要实现的; 2.1和2.2的高度应为50px（50％），并且其中间内容应垂直对齐。他们还应该横向拉伸整个可用空间（如宽度：自动或100％）。 – jaibatrik

您可以使用line-height来实现垂直对齐。自从你.row1这种情况下，具有100像素的高度添加以下到CSS：line-height: 100px;查看更新jsfiddle且仅用于.row1看到这jsfiddle

来源

2017-05-16 07:31:02 Deathstorm

伸缩高度与flexbox对齐项目中心

回答

相关问题