显示器的精确度如何：容器div上的flex属性和内部div上的flex属性？

-1

正如你可以在此布局看到存在具有ID =“COM”外部的div容器，并有这个CSS：

.com { 
    align-items: stretch; 
    display: flex; 
    height: 100vh; 
    overflow: hidden; 
}

所以设置了显示：弯曲;加上align-items：stretch;属性。所以，在阅读这里：

在我看来，它是定义在该元素被放在一个旁边其他的容器，但我绝对不知道如果我失去了一些东西。

然后，该容器，该容器限定具有ID = “com__content” 里面的内容，这一个：

<div class="com__content">

具有关联下面的CSS设置：

.com__content { 
    background: #404855 none repeat scroll 0 0; 
    flex: 8 1 0; 
    padding: 10vh 10vw; 
    position: relative; 
}

同样在该内部部件有与flex行为有关的内容。

究竟是什么flex：8 1 0;这个div的属性是什么意思？

首先，你似乎混淆了ID和类。寻求代码帮助的问题必须包含在问题本身**中重现它所需的最短代码**。尽管您已经提供了一个示例链接，但如果链接无效，那么您的问题对于其他未来具有相同问题的SO用户将没有任何价值。 –

请拼写检查您的问题标题。 –

flex: 8 1 0;
是快捷立场 '柔性成长'， '弹性收缩' 和 '柔性基础'
第一个Flex-增长8种手段：这个div完全有8 /总空间

例如：你有一个div.first flex-grow: 1; 和另一个div.second flex-grow: 2;
第一个div在这一行只有1/3 psace，剩下的就是第二个div的地方。

flex-shrink 这定义了如果需要收缩Flex项目的能力。
值1意味着收缩1次

最后flex-basis 定义了一个元素的默认大小的剩余空间被分配之前。
你可以设置，因为它可以是长度（20％或100像素），它规定了挠性项目

的初始大小为你提到的文章A Complete Guide to Flexbox有求佛

柔性这是flex-grow，flex-shrink和flex-basis相结合的简写。第二个和第三个参数（flex-shrink和flex-basis）是可选的。默认值是0 1 auto。

2016-03-14 12:16:32 Anami

回答