我通常会问关于Angular的问题,但今天我对CSS和FlexBox有疑问。在我的应用程序中,我显示一些关于界面,用户名,公司名称和部门名称的信息,如果信息很长(如一个有很多字符的长名称)我希望文本在其单元格中包装,文本显示的行成长以适应文本。文本不应该渗入下面的行。
我的HTML看起来像......
<div class="assignment">
<!-- Here we want to colums, one to contain the rows of info
The other to contain a single button -->
<div class="assignment__details">
<div class="assignment__row">
<div class="assignment__row__title">User</div>
<div class="assignment__row__value">
Oh this is a long user name
</div>
</div>
<div class="assignment__row">
<div class="assignment__row__title">Company:</div>
<div class="assignment__row__value">
Oh this is a long company name
</div>
</div>
<div class="assignment__row">
<div class="assignment__row__title">Department:</div>
<div class="assignment__row__value" >
This is Such a long Department Name
</div>
</div>
</div>
<!-- here is the col with the button -->
<div class="assignment__controls">
<button mat-icon-button (click)="doSomething()">
<mat-icon>edit</mat-icon>
</button>
</div>
</div>
这是我的CSS(少用BEM写的)
.assignment {
display: flex;
background-color: #C0C0C0;
padding: 10px;
width: 300px; // just for demo puropses
&__details {
flex: 1 1 80%;
}
&__controls {
display: flex;
flex: 1 1 20%;
justify-content: flex-end;
align-items: center;
}
&__row {
display: flex;
height: 21px;
&__title {
flex: 1 0 50%;
}
&__value {
flex: 1 0 50%;
}
}
}
这是一个JS Bin https://jsbin.com/juguvovelo/edit?html,css,output
正如你所看到的那样,文本会流入下面的行并从容器中流出!正如这个屏幕截图所示!我设置flex-grow
but的.assignment__row
似乎没有得到我想要的效果?
如果有人能帮我解决这个问题,我将非常感激。也许这是我的HTML结构的问题?
你需要从.assignment__row
移除高度。这是一个JSBin link。
删除height
的assignment__row
.assignment {
display: flex;
background-color: #c0c0c0;
padding: 10px;
width: 300px;
}
.assignment__details {
flex: 1 1 80%;
}
.assignment__controls {
display: flex;
flex: 1 1 20%;
justify-content: flex-end;
align-items: center;
}
.assignment__row {
display: flex;
}
.assignment__row__title {
flex: 1 0 50%;
}
.assignment__row__value {
flex: 1 0 50%;
}
<div class="assignment">
<!-- Here we want to colums, one to contain the rows of info
The other to contain a single button -->
<div class="assignment__details">
<div class="assignment__row">
<div class="assignment__row__title">User</div>
<div class="assignment__row__value">
Oh this is a long user name
</div>
</div>
<div class="assignment__row">
<div class="assignment__row__title">Company:</div>
<div class="assignment__row__value">
Oh this is a long company name
</div>
</div>
<div class="assignment__row">
<div class="assignment__row__title">Department:</div>
<div class="assignment__row__value" >
This is Such a long Department Name
</div>
</div>
</div>
<!-- here is the col with the button -->
<div class="assignment__controls">
<button mat-icon-button (click)="doSomething()">
<mat-icon>edit</mat-icon>
</button>
</div>
</div>