我正在尝试使用 flexbox 创建一个 CSS 小部件组件。
该组件有一个标题(应该有旋转的文本)和一个内容区域。
标题和内容都应填充父容器的高度,标题应为 15px 宽度,然后内容拉伸(stretch)以填充剩余部分。
到目前为止,我让内容 100% 正常工作,但由于某种原因, header 未填满父容器的高度。
到目前为止我有这个:
.widget {
height: 200px;
width: 200px;
border: 1px solid #ddd;
background-color: #eee;
display: flex;
}
.widget-header {
background-color: #1976D2;
color: #fff;
transform: rotate(-90deg);
border: 1px solid red;
font-size: 10px;
flex: 0;
height: 15px;
align-self: center;
text-align: center;
}
.widget-content {
border: 1px solid blue;
flex: 1;
}
<div class="widget">
<div class="widget-header">order summary</div>
<div class="widget-content">
<p>some text here</p>
<p>some more text ...</p>
</div>
</div>
最佳答案
旋转文本但不旋转较大的容器。 header 的宽度为 15 像素,如指定的那样。
.widget {
height: 200px;
width: 200px;
border: 1px solid #ddd;
background-color: #eee;
display: flex;
}
.widget-header {
background-color: #1976d2;
flex: 0 0 15px;
min-width: 0;
display: flex;
justify-content: center;
align-items: center;
}
.widget-header > span {
color: #fff;
font-size: 10px;
transform: rotate(-90deg);
white-space: nowrap;
}
.widget-content {
border: 1px solid blue;
flex: 1;
}
<div class="widget">
<div class="widget-header">
<span>order summary</span>
</div>
<div class="widget-content">
<p>some text here</p>
<p>some more text ...</p>
</div>
</div>
关于html - 带有旋转文本的 Flexbox,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41426872/