Question

我现在正在努力解决这个问题，所以我希望有人可以提供帮助。

例如：

<section class="example-a"> 
    <ol>
        <li class="spacer"></li>
        <li class="cell">A</li>
        <li class="cell">B</li>
        ....
        <li class="spacer"></li>
   </ol>
</section>

如果我将.example-a调整40％，我希望每个li缩小40％。这意味着，如果.spacer是.cell的两倍，则在调整大小时将保持该比率。查看此DEMO中的第一个section。如果你调整大小，你会发现从一开始每个元素都会缩小或增长。

它表现得像我想要的那样，除了我想以不同的方式想象它; ol需要以组的形式显示。结帐demo中的第二个section。但无论我做什么，当我调整大小时，.spacer元素首先在ol之前缩小。

有任何建议我可以解决这个问题或者解决它吗？

main {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.example-a, 
.example-b {
    display: flex; 
    border: 2px solid blue;
    align-items: center;
    justify-content: center;
    
    ol {
         list-style-type: none;
         display: flex;
         align-items: center;
         margin: 0;
         padding: 0;
         width: 100%;
       
       .cell {
             border: 1px solid #000;
             width: 100px;
             height: 100px;
             
            
               //display: flex;
               align-items: center;
               justify-content: center;
             
         }
     }
       
    
     .spacer {
            display: inline-block;
            width: 200px;
            height: 20px;
            background-color: green;
            
            &:first-child {
              width: 400px;
            }
        }
}

.example-b {
  ol {
    background-color: lightgrey;
    padding: 10px;
    border-radius: 10px;
    max-width: 400px;
  }
}

section + section {
  margin-top: 20px;
}

<main>
<section class="example-a"> 
    <ol>
        <li class="spacer"></li>
        <li class="cell">A</li>
        <li class="cell">B</li>
        <li class="cell">D</li>
        <li class="cell">D</li>
        <li class="spacer"></li>
    </ol>
</section>

<section class="example-b">
    <span class="spacer"></span>  
    <ol>
        <li class="cell"><span>A</span></li>
        <li class="cell"><span>B</span></li>
        <li class="cell"><span>C</span></li>
        <li class="cell"><span>D</span></li>
    </ol>
    <span class="spacer"></span>  
</section>
</main>

更新：虽然大多数答案都很有用并且在某种程度上解决了这个问题，但我选择的答案对我的具体案例帮助最大

Answer 1

这非常简单：您只需要在第二个示例中的<ol>中声明显式宽度。当视口比屏幕上可以安装的视口更窄时，这会强制嵌套的<ol>缩小：

.example-b {
  ol {
    background-color: lightgrey;
    padding: 10px;
    border-radius: 10px;
    max-width: 400px;
    width: 40%;  /* Added this rule */
  }
}

请在此处查看更新的小提琴：https://jsfiddle.net/teddyrised/tjtp5403/17/

Answer 2

我想这可能就是你所追求的。如果是这样，您的代码可以简化。

revised fiddle demo

ol {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid blue;  
  list-style-type: none;
  margin: 0;
  padding: 0;
}
       
.cell {
  width: 100px;
  height: 100px;
  border: 1px solid #000;  
}

ol::before, ol::after {
  width: 200px;
  height: 20px;
  background-color: green;
  content: "";
}

ol::before {
  width: 400px;
}

<ol>
  <li class="cell">A</li>
  <li class="cell">B</li>
  <li class="cell">D</li>
  <li class="cell">D</li>
</ol>

Answer 3

如果您提供cell flex: 1 1 0和spacer flex: 2 2 0，spacer将始终是cell的两倍（ flex: <flex-grow> <flex-shrink> <flex-basis>）

这样的工作就是spacer flex-grow：2 而cell flex-grow：1 ，{ {1}}将占用可用空间的两倍，并且当 flex-basis 设置为 0 时，每个弹性项目中的内容不会影响可用空间的方式分发。

当存在负空间时，spacer的作用相同。我还添加了flex-shrink，这将允许项目缩小超出其内容，因此当内容不适合flex容器时，将保持纵横比。（如果内容溢出/重叠，请使用min-width: 0代替overflow: hidden）

Updated fiddle

Stack snippet

＆＃13;

min-width: 0

＆＃13;

main {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.example-a {
  display: flex;
  border: 2px solid blue;
  align-items: center;
  justify-content: center;
}

.example-a ol {
  list-style-type: none;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  width: 100%;
}

.example-a ol .cell {
  flex: 1 1 0;
  border: 1px solid #000;
  height: 100px;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.example-a ol .spacer {
  flex: 2 2 0;
  align-items: center;
  justify-content: center;
  height: 20px;
  background-color: green;
  min-width: 0;
}

＆＃13;

更新

如果<main> <section class="example-a"> <ol> <li class="spacer"></li> <li class="cell">A</li> <li class="cell">B</li> <li class="cell">D</li> <li class="cell">D</li> <li class="spacer"></li> </ol> </section> </main>的唯一目的只是那个， spacer ，你可以使用伪元素，就像这样（我也简化了一些代码）

Updated fiddle 2

Stack snippet

＆＃13;

spacer

＆＃13;

.example-a {
  display: flex;
  border: 2px solid blue;
  align-items: center;
  justify-content: center;
}

.example-a ol {
  flex-grow: 1;
  list-style-type: none;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
}

.example-a ol .cell,
.example-a ol::before,
.example-a ol::after {
  border: 1px solid #000;
  height: 100px;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.example-a ol .cell {
  flex: 1 1 0;
}

.example-a ol::before,
.example-a ol::after {
  content: '';
  height: 20px;
  background: green;
  flex: 2 2 0;
}

＆＃13;

如果您希望它与IE一起使用， flex-basis 值需要一个单位，即<section class="example-a"> <ol> <li class="cell">A</li> <li class="cell">B</li> <li class="cell">D</li> <li class="cell">D</li> </ol> </section>

Updated fiddle 3

CSS：在flexbox中调整大小时缩放项目

3 个答案: