我正在尝试使用flexBox创建一个CSS小部件组件.
标题和内容都应填充父容器的高度,标题应为15px宽度,然后内容将拉伸以填充余数.
到目前为止,我得到的内容100％工作,但由于某种原因,标题没有填充父容器的高度.
到目前为止我有这个：
.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>
解决方法
您需要在旋转的文本周围再添加一个环绕.然后应该旋转这个新插入的包装而不是flex子.
HTML：
<div class="widget">
<div class="widget-header">
<div class="header-content">
order summary
</div>
</div>
<div class="widget-content">
<p>some text here</p>
<p>some more text ...</p>
</div>
</div>
必要的CSS：
.widget {
position: relative;
display: flex;
}
.widget-header {
background-color: #1976D2;
border: 1px solid red;
text-align: center;
color: #fff;
width: 25px;
}
.header-content {
transform: rotate(-90deg);
transform-origin: 0 100%;
position: absolute;
line-height: 25px;
font-size: 14px;
height: 25px;
width: 100%;
left: 25px;
bottom: 0;
}
* {Box-sizing: border-Box;}
.widget {
height: 200px;
width: 200px;
border: 1px solid #ddd;
background-color: #eee;
position: relative;
display: flex;
}
.widget-header {
background-color: #1976D2;
color: #fff;
border: 1px solid red;
font-size: 10px;
width: 27px;
text-align: center;
height: 100%;
}
.header-content {
transform: rotate(-90deg);
transform-origin: 0 100%;
position: absolute;
line-height: 25px;
font-size: 14px;
z-index: 10;
height: 25px;
width: 100%;
left: 25px;
bottom: 0;
}
.widget-content {
border: 1px solid blue;
flex: 1;
}
<div class="widget">
<div class="widget-header">
<div class="header-content">
order summary
</div>
</div>
<div class="widget-content">
<p>some text here</p>
<p>some more text ...</p>
</div>
</div>
