Ich möchte einen Abschnitt auf der linken oder rechten Seite beschriften. Das Etikett für jeden Abschnitt sollte vertikal zentriert und um 90 Grad gedreht sein.Flexbox Vertikale Ausrichtung und Drehung des Textes
Ich habe versucht, dies mit Flexbox zu archivieren, aber das Etikett Text fließt immer nach rechts, auf der Text-Länge des Etiketts abhängig. Ich habe keine Ahnung, wie das zu beheben ist.
Das Problem ist, dass das transformierte Element die gleiche Stelle im Layout einnimmt, wie es nicht transformiert wurde. Sie müssen also absolute Positionierung verwenden, um es zu beheben. Demo:
.section {
position: relative;
/* move content to label width + some offset */
padding-left: 35px;
/* just styles for demo */
background-color: #e0e0e0;
height: 100px;
}
.label-wrapper {
/* absolutely positioned-element */
position: absolute;
top: 0;
left: 0;
bottom: 0;
/* setting height of content + some offset */
width: 30px;
/* become a flex-container */
/* its children will be flex-items */
display: flex;
/* center flex-items vertically */
align-items: center;
/* center flex-items horizontally */
justify-content: center;
/* just style for demo */
background-color: #a0a0a0;
}
.label {
/* rotate text */
transform: rotate(-90deg);
}<div class="section">
<div class="label-wrapper">
<div class="label">
ASD
</div>
</div>
This is content
</div>benutzte ich eine verschachtelte Flexbox für die Ausrichtung.
.section {
display: flex;
height: 10em;
border: thin solid darkgray;
}
.section:not(:last-child) {
margin-bottom: 0.5em;
}
.label {
width: 3em;
background: darkgray;
display: flex;
justify-content: center;
align-items: center;
}
.label p {
transform: rotate(270deg);
}
.content {
padding: 0.5em;
}<div class="container">
<div class="section">
<div class="label">
<p>Label</p>
</div>
<div class="content">Lorem Ipsum</div>
</div>
<div class="section">
<div class="label">
<p>asdlkfdfdasdlfasd</p>
</div>
<div class="content">Lorem Ipsum</div>
</div>
</div>