使用 CSS Flexbox 旋转 HTML 文本输入
Rotated HTML Text-Inputs with CSS Flexbox
我的网页上有按以下模式排列的标签：
主容器 content 包含 rows。一行有两个 labels，一个 label 包含三个 columns。每个 column 可以包含一个或多个 input["text"] 个元素。
input {
width: 100%;
resize: vertical;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
border: none;
background-color: transparent;
color: black;
outline: none;
font-weight: bold;
transition: ease-in-out, width .35s ease-in-out;
}
input:hover, input:focus {
background-color: #baffc9;
border-radius: 3px;
}
.label-row {
height: 3.0cm;
width: 18.8cm;
display: flex;
flex-direction: row;
flex-grow: 0;
flex-wrap: nowrap;
}
.label {
border: 1px dashed black;
width: 9.4cm;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
.col-left {
width: 4.4cm;
}
.col-middle {
width: 1.0cm;
border-left: 1px dotted black;
border-right: 1px dotted black;
}
.col-right {
width: 4.0cm;
}
/* ----- column-left ----- */
.hsig-wrapper {
flex-direction: column;
justify-content: space-evenly;
}
.hl {
font-size: 10px;
flex: 0 1 auto;
}
.sk {
font-size: 18px;
flex: 0 1 auto;
}
.format {
font-size: 18px;
flex: 0 1 auto;
}
.hsig {
font-size: 18px;
flex: 0 1 auto;
}
.sig_add {
font-size: 10px;
flex: 0 1 auto;
}
/* ----- column-middle ----- */
.loc-wrapper {
background-color: transparent;
width: 100%;
height: 100%;
display: flex;
text-align: center;
justify-content: center;
align-items: center;
}
.loc {
font-size: 20px;
width: 2.9cm;
height: 0.9cm;
-moz-transform:rotate(-90deg);
-webkit-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
}
/* ----- column-right ----- */
.as-wrapper {
width: 100%;
height: 100%;
display: flex;
text-align: center;
justify-content: center;
flex-direction: row;
align-items: center;
/*flex-wrap: nowrap;*/
/*justify-content: space-evenly;*/
}
.as_detail {
font-size: 18px;
width: 100%;
align-self: center;
flex: 0 1 auto;
width: 0.8cm;
/*height: 30%;*/
-moz-transform:rotate(-90deg);
-webkit-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
}
<div id="content">
<div class="label-row">
<div class="label">
<div class="col-left">
<div class="hsig-wrapper">
<input type="text" class="hl"
id="hl"
name="hl"
value="Headline">
<input type="text" class="format"
id="format"
name="format"
value="II">
<input type="text" class="hsig"
id="hsig"
name="hsig"
value="12 345">
<input type="text" class="sig_add"
id="sig_add"
name="sig_add"
value="Detail">
</div>
</div>
<div class="col-middle">
<div class="loc-wrapper">
<input type="text" class="loc"
id="loc"
name="loc"
value="ABC">
</div>
</div>
<div class="col-right">
<div class="as-wrapper">
<input type="text" class="as_detail"
id="as_detail_0"
name="as_detail_0"
value="1">
<input type="text" class="as_detail"
id="as_detail_1"
name="as_detail_1"
value="2">
<input type="text" class="as_detail"
id="as_detail_2"
name="as_detail_2"
value="3">
<input type="text" class="as_detail"
id="as_detail_3"
name="as_detail_3"
value="4">
</div>
</div>
</div>
</div>
</div>
liveweave 几乎是整个问题的图示。
问题：
- 唯一有效的列是 col-middle。
- 左边忽略
justify-content: space-evenly;。输入文本框不使用底部 space：我无法将 Detail 向下推到该行。
- 在右栏中我可以旋转输入文本框，但它们的尺寸太小了。我想将它们对齐在标签的中间（如
loc ABC），但它们不会向下移动。每次当我试图增加它们的宽度（从 0.8 厘米到 0.9 厘米）时，对齐都被破坏了。
在这些情况下我能做什么？我的 flexbox 模型是否过于复杂甚至构建完全错误？你有什么想法吗？
因此我对您的代码进行了以下更改：
制作了hsig-wrapper一个全角flexbox并且第一列整理好了
Flex items shrink 仅与其内容一样多，因为 min-width 默认为 auto -所以将 min-width: 0 设置为 as_detail 元素。
参见下面的演示：
input {
width: 100%;
resize: vertical;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
border: none;
background-color: transparent;
color: black;
outline: none;
font-weight: bold;
transition: ease-in-out, width .35s ease-in-out;
}
input:hover,
input:focus {
background-color: #baffc9;
border-radius: 3px;
}
.label-row {
height: 3.0cm;
width: 18.8cm;
display: flex;
flex-direction: row;
flex-grow: 0;
flex-wrap: nowrap;
}
.label {
border: 1px dashed black;
width: 9.4cm;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
.col-left {
width: 4.4cm;
}
.col-middle {
width: 1.0cm;
border-left: 1px dotted black;
border-right: 1px dotted black;
}
.col-right {
width: 4.0cm;
}
/* ----- column-left ----- */
.hsig-wrapper {
display: flex; /* ADDED */
height: 100%; /* ADDED */
flex-direction: column;
justify-content: space-evenly;
}
.hl {
font-size: 10px;
flex: 0 1 auto;
}
.sk {
font-size: 18px;
flex: 0 1 auto;
}
.format {
font-size: 18px;
flex: 0 1 auto;
}
.hsig {
font-size: 18px;
flex: 0 1 auto;
}
.sig_add {
font-size: 10px;
flex: 0 1 auto;
}
/* ----- column-middle ----- */
.loc-wrapper {
background-color: transparent;
width: 100%;
height: 100%;
display: flex;
text-align: center;
justify-content: center;
align-items: center;
}
.loc {
font-size: 20px;
width: 2.9cm;
height: 0.9cm;
-moz-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
}
/* ----- column-right ----- */
.as-wrapper {
width: 100%;
height: 100%;
display: flex;
text-align: center;
justify-content: center;
flex-direction: row;
align-items: center;
/*flex-wrap: nowrap;*/
/*justify-content: space-evenly;*/
}
.as_detail {
font-size: 18px;
width: 100%;
align-self: center;
flex: 0 1 auto;
width: 0.8cm;
/*height: 30%;*/
min-width: 0; /* ADDED */
-moz-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
}
<div id="content">
<div class="label-row">
<div class="label">
<div class="col-left">
<div class="hsig-wrapper">
<input type="text" class="hl" id="hl" name="hl" value="Headline">
<input type="text" class="format" id="format" name="format" value="II">
<input type="text" class="hsig" id="hsig" name="hsig" value="12 345">
<input type="text" class="sig_add" id="sig_add" name="sig_add" value="Detail">
</div>
</div>
<div class="col-middle">
<div class="loc-wrapper">
<input type="text" class="loc" id="loc" name="loc" value="ABC">
</div>
</div>
<div class="col-right">
<div class="as-wrapper">
<input type="text" class="as_detail" id="as_detail_0" name="as_detail_0" value="1">
<input type="text" class="as_detail" id="as_detail_1" name="as_detail_1" value="2">
<input type="text" class="as_detail" id="as_detail_2" name="as_detail_2" value="3">
<input type="text" class="as_detail" id="as_detail_3" name="as_detail_3" value="4">
</div>
</div>
</div>
</div>
</div>
input {
width: 100%;
resize: vertical;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
border: none;
background-color: transparent;
color: black;
outline: none;
font-weight: bold;
transition: ease-in-out, width .35s ease-in-out;
}
input:hover, input:focus {
background-color: #baffc9;
border-radius: 3px;
}
.label-row {
height: 3.0cm;
width: 18.8cm;
display: flex;
flex-direction: row;
flex-grow: 0;
flex-wrap: nowrap;
}
.label {
border: 1px dashed black;
width: 9.4cm;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
.col-left {
width: 4.4cm;
}
.col-middle {
width: 1.0cm;
border-left: 1px dotted black;
border-right: 1px dotted black;
}
.col-right {
width: 4.0cm;
}
/* ----- column-left ----- */
.hsig-wrapper {
flex-direction: column;
justify-content: space-evenly;
}
.hl {
font-size: 10px;
flex: 0 1 auto;
}
.sk {
font-size: 18px;
flex: 0 1 auto;
}
.format {
font-size: 18px;
flex: 0 1 auto;
}
.hsig {
font-size: 18px;
flex: 0 1 auto;
}
.sig_add {
font-size: 10px;
flex: 0 1 auto;
}
/* ----- column-middle ----- */
.loc-wrapper {
background-color: transparent;
width: 100%;
height: 100%;
display: flex;
text-align: center;
justify-content: center;
align-items: center;
}
.loc {
font-size: 20px;
width: 2.9cm;
height: 0.9cm;
-moz-transform:rotate(-90deg);
-webkit-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
}
/* ----- column-right ----- */
.as-wrapper {
width: 100%;
height: 100%;
display: flex;
text-align: center;
justify-content: center;
flex-direction: row;
align-items: center;
/*flex-wrap: nowrap;*/
/*justify-content: space-evenly;*/
}
.as_detail {
font-size: 18px;
width: 100%;
align-self: center;
flex: 0 1 auto;
width: 0.8cm;
/*height: 30%;*/
-moz-transform:rotate(-90deg);
-webkit-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
}
<div id="content">
<div class="label-row">
<div class="label">
<div class="col-left">
<div class="hsig-wrapper">
<input type="text" class="hl"
id="hl"
name="hl"
value="Headline">
<input type="text" class="format"
id="format"
name="format"
value="II">
<input type="text" class="hsig"
id="hsig"
name="hsig"
value="12 345">
<input type="text" class="sig_add"
id="sig_add"
name="sig_add"
value="Detail">
</div>
</div>
<div class="col-middle">
<div class="loc-wrapper">
<input type="text" class="loc"
id="loc"
name="loc"
value="ABC">
</div>
</div>
<div class="col-right">
<div class="as-wrapper">
<input type="text" class="as_detail"
id="as_detail_0"
name="as_detail_0"
value="1">
<input type="text" class="as_detail"
id="as_detail_1"
name="as_detail_1"
value="2">
<input type="text" class="as_detail"
id="as_detail_2"
name="as_detail_2"
value="3">
<input type="text" class="as_detail"
id="as_detail_3"
name="as_detail_3"
value="4">
</div>
</div>
</div>
</div>
</div>
我的网页上有按以下模式排列的标签：
主容器 content 包含 rows。一行有两个 labels，一个 label 包含三个 columns。每个 column 可以包含一个或多个 input["text"] 个元素。
input {
width: 100%;
resize: vertical;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
border: none;
background-color: transparent;
color: black;
outline: none;
font-weight: bold;
transition: ease-in-out, width .35s ease-in-out;
}
input:hover, input:focus {
background-color: #baffc9;
border-radius: 3px;
}
.label-row {
height: 3.0cm;
width: 18.8cm;
display: flex;
flex-direction: row;
flex-grow: 0;
flex-wrap: nowrap;
}
.label {
border: 1px dashed black;
width: 9.4cm;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
.col-left {
width: 4.4cm;
}
.col-middle {
width: 1.0cm;
border-left: 1px dotted black;
border-right: 1px dotted black;
}
.col-right {
width: 4.0cm;
}
/* ----- column-left ----- */
.hsig-wrapper {
flex-direction: column;
justify-content: space-evenly;
}
.hl {
font-size: 10px;
flex: 0 1 auto;
}
.sk {
font-size: 18px;
flex: 0 1 auto;
}
.format {
font-size: 18px;
flex: 0 1 auto;
}
.hsig {
font-size: 18px;
flex: 0 1 auto;
}
.sig_add {
font-size: 10px;
flex: 0 1 auto;
}
/* ----- column-middle ----- */
.loc-wrapper {
background-color: transparent;
width: 100%;
height: 100%;
display: flex;
text-align: center;
justify-content: center;
align-items: center;
}
.loc {
font-size: 20px;
width: 2.9cm;
height: 0.9cm;
-moz-transform:rotate(-90deg);
-webkit-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
}
/* ----- column-right ----- */
.as-wrapper {
width: 100%;
height: 100%;
display: flex;
text-align: center;
justify-content: center;
flex-direction: row;
align-items: center;
/*flex-wrap: nowrap;*/
/*justify-content: space-evenly;*/
}
.as_detail {
font-size: 18px;
width: 100%;
align-self: center;
flex: 0 1 auto;
width: 0.8cm;
/*height: 30%;*/
-moz-transform:rotate(-90deg);
-webkit-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
}
<div id="content">
<div class="label-row">
<div class="label">
<div class="col-left">
<div class="hsig-wrapper">
<input type="text" class="hl"
id="hl"
name="hl"
value="Headline">
<input type="text" class="format"
id="format"
name="format"
value="II">
<input type="text" class="hsig"
id="hsig"
name="hsig"
value="12 345">
<input type="text" class="sig_add"
id="sig_add"
name="sig_add"
value="Detail">
</div>
</div>
<div class="col-middle">
<div class="loc-wrapper">
<input type="text" class="loc"
id="loc"
name="loc"
value="ABC">
</div>
</div>
<div class="col-right">
<div class="as-wrapper">
<input type="text" class="as_detail"
id="as_detail_0"
name="as_detail_0"
value="1">
<input type="text" class="as_detail"
id="as_detail_1"
name="as_detail_1"
value="2">
<input type="text" class="as_detail"
id="as_detail_2"
name="as_detail_2"
value="3">
<input type="text" class="as_detail"
id="as_detail_3"
name="as_detail_3"
value="4">
</div>
</div>
</div>
</div>
</div>
liveweave 几乎是整个问题的图示。
问题：
- 唯一有效的列是 col-middle。
- 左边忽略
justify-content: space-evenly;。输入文本框不使用底部 space：我无法将Detail向下推到该行。 - 在右栏中我可以旋转输入文本框，但它们的尺寸太小了。我想将它们对齐在标签的中间（如
locABC），但它们不会向下移动。每次当我试图增加它们的宽度（从 0.8 厘米到 0.9 厘米）时，对齐都被破坏了。
在这些情况下我能做什么？我的 flexbox 模型是否过于复杂甚至构建完全错误？你有什么想法吗？
因此我对您的代码进行了以下更改：
制作了
hsig-wrapper一个全角flexbox并且第一列整理好了Flex items shrink 仅与其内容一样多，因为
min-width默认为 auto -所以将min-width: 0设置为as_detail元素。
参见下面的演示：
input {
width: 100%;
resize: vertical;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
border: none;
background-color: transparent;
color: black;
outline: none;
font-weight: bold;
transition: ease-in-out, width .35s ease-in-out;
}
input:hover,
input:focus {
background-color: #baffc9;
border-radius: 3px;
}
.label-row {
height: 3.0cm;
width: 18.8cm;
display: flex;
flex-direction: row;
flex-grow: 0;
flex-wrap: nowrap;
}
.label {
border: 1px dashed black;
width: 9.4cm;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
.col-left {
width: 4.4cm;
}
.col-middle {
width: 1.0cm;
border-left: 1px dotted black;
border-right: 1px dotted black;
}
.col-right {
width: 4.0cm;
}
/* ----- column-left ----- */
.hsig-wrapper {
display: flex; /* ADDED */
height: 100%; /* ADDED */
flex-direction: column;
justify-content: space-evenly;
}
.hl {
font-size: 10px;
flex: 0 1 auto;
}
.sk {
font-size: 18px;
flex: 0 1 auto;
}
.format {
font-size: 18px;
flex: 0 1 auto;
}
.hsig {
font-size: 18px;
flex: 0 1 auto;
}
.sig_add {
font-size: 10px;
flex: 0 1 auto;
}
/* ----- column-middle ----- */
.loc-wrapper {
background-color: transparent;
width: 100%;
height: 100%;
display: flex;
text-align: center;
justify-content: center;
align-items: center;
}
.loc {
font-size: 20px;
width: 2.9cm;
height: 0.9cm;
-moz-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
}
/* ----- column-right ----- */
.as-wrapper {
width: 100%;
height: 100%;
display: flex;
text-align: center;
justify-content: center;
flex-direction: row;
align-items: center;
/*flex-wrap: nowrap;*/
/*justify-content: space-evenly;*/
}
.as_detail {
font-size: 18px;
width: 100%;
align-self: center;
flex: 0 1 auto;
width: 0.8cm;
/*height: 30%;*/
min-width: 0; /* ADDED */
-moz-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
}
<div id="content">
<div class="label-row">
<div class="label">
<div class="col-left">
<div class="hsig-wrapper">
<input type="text" class="hl" id="hl" name="hl" value="Headline">
<input type="text" class="format" id="format" name="format" value="II">
<input type="text" class="hsig" id="hsig" name="hsig" value="12 345">
<input type="text" class="sig_add" id="sig_add" name="sig_add" value="Detail">
</div>
</div>
<div class="col-middle">
<div class="loc-wrapper">
<input type="text" class="loc" id="loc" name="loc" value="ABC">
</div>
</div>
<div class="col-right">
<div class="as-wrapper">
<input type="text" class="as_detail" id="as_detail_0" name="as_detail_0" value="1">
<input type="text" class="as_detail" id="as_detail_1" name="as_detail_1" value="2">
<input type="text" class="as_detail" id="as_detail_2" name="as_detail_2" value="3">
<input type="text" class="as_detail" id="as_detail_3" name="as_detail_3" value="4">
</div>
</div>
</div>
</div>
</div>
input {
width: 100%;
resize: vertical;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
border: none;
background-color: transparent;
color: black;
outline: none;
font-weight: bold;
transition: ease-in-out, width .35s ease-in-out;
}
input:hover, input:focus {
background-color: #baffc9;
border-radius: 3px;
}
.label-row {
height: 3.0cm;
width: 18.8cm;
display: flex;
flex-direction: row;
flex-grow: 0;
flex-wrap: nowrap;
}
.label {
border: 1px dashed black;
width: 9.4cm;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
.col-left {
width: 4.4cm;
}
.col-middle {
width: 1.0cm;
border-left: 1px dotted black;
border-right: 1px dotted black;
}
.col-right {
width: 4.0cm;
}
/* ----- column-left ----- */
.hsig-wrapper {
flex-direction: column;
justify-content: space-evenly;
}
.hl {
font-size: 10px;
flex: 0 1 auto;
}
.sk {
font-size: 18px;
flex: 0 1 auto;
}
.format {
font-size: 18px;
flex: 0 1 auto;
}
.hsig {
font-size: 18px;
flex: 0 1 auto;
}
.sig_add {
font-size: 10px;
flex: 0 1 auto;
}
/* ----- column-middle ----- */
.loc-wrapper {
background-color: transparent;
width: 100%;
height: 100%;
display: flex;
text-align: center;
justify-content: center;
align-items: center;
}
.loc {
font-size: 20px;
width: 2.9cm;
height: 0.9cm;
-moz-transform:rotate(-90deg);
-webkit-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
}
/* ----- column-right ----- */
.as-wrapper {
width: 100%;
height: 100%;
display: flex;
text-align: center;
justify-content: center;
flex-direction: row;
align-items: center;
/*flex-wrap: nowrap;*/
/*justify-content: space-evenly;*/
}
.as_detail {
font-size: 18px;
width: 100%;
align-self: center;
flex: 0 1 auto;
width: 0.8cm;
/*height: 30%;*/
-moz-transform:rotate(-90deg);
-webkit-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
}
<div id="content">
<div class="label-row">
<div class="label">
<div class="col-left">
<div class="hsig-wrapper">
<input type="text" class="hl"
id="hl"
name="hl"
value="Headline">
<input type="text" class="format"
id="format"
name="format"
value="II">
<input type="text" class="hsig"
id="hsig"
name="hsig"
value="12 345">
<input type="text" class="sig_add"
id="sig_add"
name="sig_add"
value="Detail">
</div>
</div>
<div class="col-middle">
<div class="loc-wrapper">
<input type="text" class="loc"
id="loc"
name="loc"
value="ABC">
</div>
</div>
<div class="col-right">
<div class="as-wrapper">
<input type="text" class="as_detail"
id="as_detail_0"
name="as_detail_0"
value="1">
<input type="text" class="as_detail"
id="as_detail_1"
name="as_detail_1"
value="2">
<input type="text" class="as_detail"
id="as_detail_2"
name="as_detail_2"
value="3">
<input type="text" class="as_detail"
id="as_detail_3"
name="as_detail_3"
value="4">
</div>
</div>
</div>
</div>
</div>