角度4 flexbox垂直对齐和嵌套容器中的布局
问题描述:
试图模拟将在项目中使用的实际布局。想法是允许NESTED容器,有些是行和其他列。 角度4 flexbox垂直对齐和嵌套容器中的布局
灰色(最右边)是包含一行的最外面的面板。 该行包含左边空白栏(绿色)和主显示栏(棕褐色)。 主显示器(列)包含一个由两个项目组成的标题行,左侧和右侧菜单项的相对大小不同。 显然这是一个问题:右侧包裹。另一个是对齐项目不是集中左侧的标题。
很抱歉的长度,我下调,就像我可以:
<!-- panel -->
<div
[ngStyle]="{
'width': '80vw',
'height': '100vh',
'background-color':'beige',
'border':'1px solid red',
'display': 'flex',
'flex-direction': 'row'
}"
>
<!-- left margin column -->
<div
[ngStyle]="{
'flex-direction': 'column',
'border':'1px solid green',
'background-color': 'lightgreen',
'width': '5%'
}"
>
margin
</div>
<!-- main panel -->
<div
[ngStyle]="{
'flex-direction': 'column',
'border':'1px solid brown',
'background-color': 'wheat',
'width': '85%'
}"
>
<!-- title bar -->
<div
[ngStyle]="{
'flex-direction': 'row',
'border':'1px solid blue',
'background-color': 'white',
'width': '100%',
'height': '50px',
'align-items': 'center'
}"
>
<!-- left title/menu items -->
<div
[ngStyle]="{
'border':'1px solid blue',
'background-color': 'white',
'width': '80%',
'flex-grow': '1',
'flex-shrink': '5',
'height': '50px',
'margin-left': '10px',
'align-items': 'center'
}"
>
left side title vertically centered??
</div>
<!-- right side menu items -->
<div
[ngStyle]="{
'border':'1px solid blue',
'background-color': 'lightgray',
'width': '10%',
'flex-grow': '1',
'flex-shrink': '1',
'height': '50px',
'align-items': 'center'
}"
>
right side vertically centered
</div>
</div>
</div>
</div>
我下定决心要全面了解Flexbox的。在此先感谢您的帮助。 Yogi
答
您的标题栏丢失display: flex
,这就是为什么它的孩子包裹。 align-items
对齐弹性盒的子元素。但是您的菜单div
被宣布具有相同的高度50px
,因此它们会自动居中。我创建了一个修复问题的plunker。
您还可以从不是弹性容器的元素(它们不是display: flex
)中移除与柔性版面相关的属性(flex-direction
,align-items
)。
+0
宝贵的经验教训。非常感谢你 ! –
当您使用flexbox时,应该使用flex-basis而不是宽度(方向行)或高度(方向列) – Whisher