为什么当我把flex-grow= 1从文本中移开时，图片(来自fontawesome)会从文本中移开？

Question

为什么当我放置flex-grow= 1;观看这个视频时，图片(字体)会从文本上移开：https://drive.google.com/file/d/1hsDeG1RFczXVts75HuPwgktDSFa5iT-3/view?usp=sharing

​

.srv {
display: flex;
 }
 
i {
  color: #10cab7;;
    flex-basis: 60px;
    flex: 1;
}

h3 {
  margin: 0px;
}

p {
  line-height: 1.6;
    color: #444;
    font-weight: 300;
}

<div class="srv">
                <i class="fas fa-palette fa-2x"></i>
                <div class="text">
                    <h3>Graphic Design</h3>
                    <p>
                        Graphic design is the process of visual communication and problem-solving using one or more of
                        typography, photography and illustration.
                    </p>
                </div>
            </div>

​

Answer 1

在CSS flex中，子对象可能有不同的flex值，以使其比兄弟项更大或更小，因此删除flex属性将使其大小正常，或者如果有width属性，它将使用该值作为大小。

Answer 2

Flex是flex-grow、flex-shrink和flex-basis的缩写；其中flex-basis等同于width。

当稳定的flex - have : 60px表示元素"i“的宽度为60px时；但是当您应用flex属性时，您正在覆盖flex-have属性。

screenshot

当您仅使用Flex-basis时。

Flex-grow: 0默认值Flex-shrink: 1默认值。灵活基准: 60px

当您使用Flex属性时: 1。

Flex-grow: 1 Flex-shrink: 1 Flex-basis: 1

flex-grow属性是元素增长的原因。