旋转所有子元素但仍适合父元素答案

【问题标题】：Rotate all child elements but still fit to parent element旋转所有子元素但仍适合父元素
【发布时间】：2018-02-10 11:10:37
【问题描述】：

这里需要一张图片。

我有一个像这样使用 CSS 网格定义的 9 网格...

.App {
  height: 100vh;
  width: 100vw;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-areas: "1 2 3" "4 5 6" "7 8 9";
}

在 2、4、6 和 8 grid-areas 我有许多输入元素。他们使用这样的 flexbox 拉伸以适应其父元素 ...

.ItemsSection {
  display: flex;
  flex-direction: column;
}

.ItemsSection * {
  flex: 1;
  font-size: 100%;
}

您可以从图像中看到我尝试旋转 4 grid-area。它没有用。我对此并不感到惊讶，但我正在努力思考如何在没有太多痛苦的情况下实现这种布局。

我需要将输入转换 90 度并然后安装到父元素上，这样它们就在侧面，但大小为中间蓝色区域。

老实说，我什至不知道该用谷歌搜索什么！

我真的在寻找一个纯 CSS 的解决方案，但乞丐不能成为选择者。

编辑：按要求添加代码 sn-p

 .app {
        height: 100vh;
        width: 100vw;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr 1fr;
        grid-template-areas: "a b c" "d e f" "g h i";
    }

    .ItemSection {
        display: flex;
        flex-direction: column;
        padding:10px;
    }

    .ItemSection * {
        flex: 1;
        font-size: 100%;
        text-align: center;
    }

    .one {
        background-color: #999;
        grid-area: a;
    }

    .two {
        background-color: #666;
        grid-area: b;
    }

    .three {
        background-color: #999;
        grid-area: c;
    }

    .four {
        background-color: #666;
        grid-area: d;
    }

    .five {
        background-color: #999;
        grid-area: e;
    }

    .six {
        background-color: #666;
        grid-area: f;
    }

    .seven {
        background-color: #999;
        grid-area: g;
    }

    .eight {
        background-color: #666;
        grid-area: h;
    }

    .nine {
        background-color: #999;
        grid-area: i;
    }

<div class="app">
        <div class="ItemSection one">
            <input />
            <input />
            <input />
            <input />
        </div>
        <div class="ItemSection two">
            <input />
            <input />
            <input />
            <input />
        </div>
        <div class="ItemSection three">
            <input />
            <input />
            <input />
            <input />
        </div>
        <div class="ItemSection four">
            <input />
            <input />
            <input />
            <input />
        </div>
        <div class="ItemSection five">
            <input />
            <input />
            <input />
            <input />
        </div>
        <div class="ItemSection six">
            <input />
            <input />
            <input />
            <input />
        </div>
        <div class="ItemSection seven">
            <input />
            <input />
            <input />
            <input />
        </div>
        <div class="ItemSection eight">
            <input />
            <input />
            <input />
            <input />
        </div>
        <div class="ItemSection nine">
            <input />
            <input />
            <input />
            <input />
        </div>
    </div>

提前致谢。

【问题讨论】：

据我所知，这是不可能的，因为转换（如旋转）不会触发回流，因此您不能依靠它来获得您想要的结果…除非你可以使用像width: 33vh和height: 33vw这样的值？如果您将div 放在网格item 中，并简单地使用div.width = item.height 和div.height = parent.width 的逻辑，JavaScript 解决方案似乎更有可能工作。是否存在纯 CSS 解决方案，我很想听听！
当你transform 一个元素时，它只是在视觉上发生了变化，从技术上讲，它的行为和被视为没有任何变化。
此外，为了让我们能够提出适当的解决方案，我们需要一个工作代码 sn-p。
我想出了这个作为概念证明：codepen.io/chriskirknielsen/pen/mXWwdO - 也许它会帮助你走上正轨？
@LGSon 完成。我发帖的时候在火车上，时间有点有限。

标签： css flexbox css-transforms css-grid

【解决方案1】：

尽管我用working solution 对你的问题发表了评论（尽管它只适用于特定布局），但我相信你可以用writing-mode: sideways-lr; 解决你的问题（也许还有前缀？）但你可能想要调整您的inputs 的大小如何。

.app {
  height: 100vh;
  width: 100vw;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-areas: "a b c" "d e f" "g h i";
}

.ItemSection {
  display: flex;
  flex-direction: column;
  padding: 10px;
}

.ItemSection * {
  flex: 1;
  font-size: 100%;
  text-align: center;
}

.one {
  grid-area: a;
}

.two {
  grid-area: b;
}

.three {
  grid-area: c;
}

.four {
  grid-area: d;
}

.five {
  grid-area: e;
}

.six {
  grid-area: f;
}

.seven {
  grid-area: g;
}

.eight {
  grid-area: h;
}

.nine {
  grid-area: i;
}

.one,
.three,
.five,
.seven,
.nine {
  background-color: #999;
}

.two,
.four,
.six,
.eight {
  background-color: #666;
  -webkit-writing-mode: sideways-lr;
  -ms-writing-mode: sideways-lr;
      writing-mode: sideways-lr;
}

<div class="app">
  <div class="ItemSection one">
    <input />
    <input />
    <input />
    <input />
  </div>
  <div class="ItemSection two">
    <input />
    <input />
    <input />
    <input />
  </div>
  <div class="ItemSection three">
    <input />
    <input />
    <input />
    <input />
  </div>
  <div class="ItemSection four">
    <input />
    <input />
    <input />
    <input />
  </div>
  <div class="ItemSection five">
    <input />
    <input />
    <input />
    <input />
  </div>
  <div class="ItemSection six">
    <input />
    <input />
    <input />
    <input />
  </div>
  <div class="ItemSection seven">
    <input />
    <input />
    <input />
    <input />
  </div>
  <div class="ItemSection eight">
    <input />
    <input />
    <input />
    <input />
  </div>
  <div class="ItemSection nine">
    <input />
    <input />
    <input />
    <input />
  </div>
</div>

【讨论】：