Flexbox с повернутым текстом
Я пытаюсь создать компонент виджета CSS, используя flexbox.
компонент имеет заголовок (который должен иметь повернутый текст) и область содержимого.
и заголовок, и содержимое должны заполнить высоту родительского контейнера, заголовок должен быть шириной 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>
2 ответов
вам нужно будет добавить еще одну обертку вокруг повернутого текста. Затем эта недавно вставленная оболочка должна быть повернута вместо Flex child.
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>
Поверните текст, но не больший контейнер. Заголовок имеет ширину 15px, заданную.
.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>