相关疑难解决方法(0)

带有列表标签的网格列,我需要每3列以正确的顺序显示,并为每个额外的HTML列表元素启用自动宽度.

这是我的例子:

 <style>
        ul {
            margin: 0;
            padding: 0;
            display: -webkit-flex;
            display: flex;
            -webkit-flex-wrap: wrap;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
            -webkit-flex-direction: column;
            -ms-flex-direction: column;
            flex-direction: column;
            height: 150px;
            width:auto;
        }
    
        li {
            float: left;
            display: inline-block;
            list-style: none;
            position: relative;
            height: 50px;
            width: 50px;
        }
    </style>

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
    </ul>

我想像这样转换输出:

1 4 7 10
2 5 8 11
3 6 9 12

重要的是我到目前为止我的Safari浏览器工作,我似乎无法解决这个问题,我会适当的任何帮助:)

测试链接:

http://jsfiddle.net/rafcastro77/3zd7yspg/59/

我在使用flexbox时遇到了问题,并且想要了解嵌套父元素和子元素的工作方式.

我知道孩子继承了父母的弹性.但如果你需要为孩子(宝宝)抚摸一个孩子,这会被覆盖吗？flexbox的正确用法是什么？

我什么时候都适用display: flex于孩子的孩子(婴儿)的缘故,或将是覆盖孩子的父母柔性？

.parent-container {
  display: flex;
  flex: 1 0 100%;
  background-color:yellow;
}
.child-container {
  flex: 1 1 50%
  background-color: blue;
}
.baby-of-child-container {
  flex: 1 1 50%;
  background-color: green;
}

<div class='parent-container'>
  <div class='child-container'>
    <div class='baby-of-child-container'>child</div>
    <div class='baby-of-child-container'>child</div>
  </div>
  <div class='child-container'>
    <div class='baby-of-child-container'>child</div>
    <div class='baby-of-child-container'>child</div>
  </div>
</div>