元素内的子元素不会水平对齐

Question

我有一个不能溢出的包装盒。

一个包含孩子的内盒。

那些孩子需要水平对齐，不能被允许断到第二行。

如果孩子太多，我希望内盒水平溢出而不是外盒。

我不能让孩子们不换行，所以滚动条最终没用了。

孩子将水平对齐 float: left 哪个换行符和 flex 哪个压碎孩子以适应。

我在这里找到了三个关于堆栈溢出的类似问题的页面并尝试了它们，但没有一个起作用。 不确定这是否会禁止重复。

我怀疑是元素的旋转让事情变得奇怪。

代码笔：https://codepen.io/Tygari/pen/mdJQZVw

CSS

class{
    display: block;
    height: 210px;
    width: 70vw;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid black;
    overflow: hidden;
}
info{
    display: block;
    height: 10%;
    width: 70vw;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid black;
}
archetype{
    display: inline-block;
    height: 90%;
    width: 100%;
    overflow: scroll;
    overflow-y: hidden;
}
.foo > archetype,
.bar > archetype,
.baz > archetype,
.foobar > archetype,
.foobaz > archetype,
.barfoo > archetype,
.barbaz > archetype{
    display: none;
}
#foo div div div::before{
    content: 'Foo';
}
#bar div div div::before{
    content: 'Bar';
}
#baz div div div::before{
    content: 'Baz';
}
#foobar div div div::before{
    content: 'Foobar';
}
#foobaz div div div::before{
    content: 'Foobaz';
}
#barfoo div div div::before{
    content: 'Barfoo';
}
#barbaz div div div::before{
    content: 'Barbaz';
}
.diamond{
    height: 125px;
    width: 125px;
    margin-left: 60px;
    text-align: center;
    border: 1px solid black;
    transform: translate(-30px,30px) rotate(45deg);
}
.diamond div{
    position: relative;
    border: 1px solid black;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    height: 100px;
    width: 100px;
}
.diamond div div{
    border: 1px solid black;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    height: 75px;
    width: 75px;
}
.diamond div div div{
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%) rotate(-45deg);
    height: auto;
    width: auto;
    border:none;
}

HTML

<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/tygari/echo-js/echo.js" sync></script>
<class>
   <info></info>
   <archetype class="archetype" echo="foo bar baz foobar foobaz barfoo barbaz" code="<div class='diamond' 
      ><div><div><div></div></div></div></div>"> 
   </archetype>
</class>

DOM

<class>
   <info></info>
   <archetype class="archetype" echo="foo bar baz foobar foobaz barfoo barbaz" code="<div class='diamond' 
      onclick='this.parentNode.parentNode.className += this.id'><div><div><div></div></div></div></div>">
      <div id="foo" class='diamond'><div><div><div></div></div></div></div>
      <div id="bar" class='diamond'><div><div><div></div></div></div></div>
      <div id="baz" class='diamond'><div><div><div></div></div></div></div>
      <div id="foobar" class='diamond'><div><div><div></div></div></div></div>
      <div id="foobaz" class='diamond'><div><div><div></div></div></div></div>
      <div id="barfoo" class='diamond'><div><div><div></div></div></div></div>
      <div id="barbaz" class='diamond'><div><div><div></div></div></div></div>
   </archetype>
</class>

通过添加“display: flex;”解决原型元素和“flex-shrink：0；”到 .diamond 类。

Answer 1

通过添加“display: flex;”解决原型元素和“flex-shrink：0；”到 .diamond 类。