防止弹性项目伸展 [英] Prevent flex items from stretching

问题描述

示例：

  div {display：flex; height：200px;背景：tan;} span {background：red;}   
 

b $ b

我有两个问题，请：



1. 为什么它基本上发生在 span ？


2. 什么是正确的方法来防止伸缩而不会影响flex容器中的其他flex项目？
   

   解决方案

   您不想在高度上伸展跨度？
   
   您可能会影响一个或多个flex - 不能拉伸容器的整个高度。

   
   
   

   要影响容器的所有弹性项目，请选择： em>
   
   您必须将 align-items：flex-start; 设置为 div ，这个容器的所有弹性项目都会获得其内容的高度。
   
   

   div {alig n-items：flex-start;背景：棕褐色;显示：flex; height：200px;} span {background：red;}

   b $ b

   要仅影响单个弹性项目，请选择此项：

如果要解开单个弹性项目容器，你必须设置 align-self：flex-start; 到这个flex-item。所有其他的容器flex-items都不受影响。



   div {display：flex; height：200px;背景：棕褐色;} span.only {背景：红色; align-self：flex-start;} span {background：green;}

    < DIV> < span class =only>这是一些文字。< / span> < span>这是更多文字。< / span>< / div>  

   b $ b

   为什么会发生这种情况 span ？
   
   属性的默认值 align-items 是 stretch 。这就是 span 填满 div 的高度的原因。

   
   
   

   $ 基准和 flex-start ？之间的区别
   如果在弹性项目上有不同的字体大小的文本，则可以使用第一行的基线垂直放置弹性项目。一个更小的字体大小的Flex项目在容器和顶部之间有一定的空间。使用 flex-start ，flex-item将被设置为容器的顶部（不含空格）。
   
   

     div {align-items：baseline;背景：棕褐色;显示：flex; height：200px;} span {background：red;} span.fontsize {font-size：2em;}  

    < DIV> < span class =fontsize>这是一些文字。< / span> < span>这是更多文字。< / span>< / div>  

   Sample:

   div {
     display: flex;
     height: 200px;
     background: tan;
   }
   span {
     background: red;
   }

   <div>
     <span>This is some text.</span>
   </div>

   I have two questions, please:

   1. Why does it basically happen to the span?
   2. What is the right approach to prevent it from stretching without affecting other flex items in a flex container?

   解决方案

   You don't want to stretch the span in height?
   You have the possiblity to affect one or more flex-items to don't stretch the full height of the container.

   To affect all flex-items of the container, choose this:
   You have to set align-items: flex-start; to div and all flex-items of this container get the height of their content.

   div {
     align-items: flex-start;
     background: tan;
     display: flex;
     height: 200px;
   }
   span {
     background: red;
   }

   <div>
     <span>This is some text.</span>
   </div>

   To affect only a single flex-item, choose this:
   If you want to unstretch a single flex-item on the container, you have to set align-self: flex-start; to this flex-item. All other flex-items of the container aren't affected.

   div {
     display: flex;
     height: 200px;
     background: tan;
   }
   span.only {
     background: red;
     align-self:flex-start;
   }
   span {
       background:green;
   }

   <div>
     <span class="only">This is some text.</span>
     <span>This is more text.</span>
   </div>

   Why is this happening to the span?
   The default value of the property align-items is stretch. This is the reason why the span fill the height of the div.

   Difference between baseline and flex-start?
   If you have some text on the flex-items, with different font-sizes, you can use the baseline of the first line to place the flex-item vertically. A flex-item with a smaller font-size have some space between the container and itself at top. With flex-start the flex-item will be set to the top of the container (without space).

   div {
     align-items: baseline;
     background: tan;
     display: flex;
     height: 200px;
   }
   span {
     background: red;
   }
   span.fontsize {
     font-size:2em;
   }

   <div>
     <span class="fontsize">This is some text.</span>
     <span>This is more text.</span>
   </div>

   这篇关于防止弹性项目伸展的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！