2017-05-04 142 views
0

我想知道在CSS中flex标签是什么意思。我前几天曾用它进行过一些定位,但我想知道它究竟做了什么。flex标签究竟意味着什么?

我已经搜索了一些解释和camge到像W3和W3schools这样的网站,但没有更多。而那里的一切都是一样的。

初始的:1辆0汽车

大多数的解释是undersandable但我似乎无法找出什么是“1辆0汽车”的意思。现在我仍然认为它是一个布尔值1 =是/ 0 =否,但有人可以解释flex标签实际上做了什么吗?

伊夫用它在CSS这样

.flextest { 
    width: 100%; 
    height: 100%; 
    display: flex;    <--- 
    align-items: center; 
    position: relative; 
    top: -81px; 
} 

这适用于我的问题,但林不知道我在这里做。

这在这里不是问题。所以要么这会被讨厌,要么这将成为社区的一个很好的补充。所以我很抱歉,如果这不属于这里。我把它看作是一个编程问题。

+2

我发现https://css-tricks.com/snippets/css/a-guide-to-flexbox/是一个很好的flexbox指南 – Nsevens

+1

在Stackoverflow上,flex标签指的是Apache Flex,一个ActionScript脚本编程框架。至于CSS的flexbox,我会留给那个答案:) – Brian

+0

@布赖恩啊oke对不起,因为它回来:P和thx的解释 –

回答

2

您可以先了解柔性容器和物品之间的区别。

display: flex创建柔性容器

柔性容器是由具有计算的 显示flex或inline-flex的元素生成的框。柔性容器 的流动儿童称为弹性项目,并使用柔性布局模型进行布局。 Source

然后,您可以自定义如何柔性物品的行为在容器内通过设置不同的属性或使用flexshorthand property允许增大,缩小和基础值进行设置。

正如现在我仍然认为它的一个布尔值1 = YES/0 =无

正确,1 = YES 0 = NO。

因此flex: 1 0 auto(初始值)指定flex项目应该增长而不是收缩,并且使用auto size basis来确定大小。

+0

所以我创建了一个弹性容器,这就是为什么我的容器中的东西得到适当的调整?如果你有一个弹性容器,容器内的所有组件都变成弹性项目? –

+1

正确,每个孩子成为一个弹性项目(https://www.w3.org/TR/css-flexbox-1/#flex-items)。但是,您经常想要更改Flex项目的行为方式,那就是当您在这些项目上使用“flex”属性时。 –

+0

理论上如此。我对标签感到幸运,因为我没有使用其他的flex属性。 –

3

以这种方式flex的初始化flex: 1 2 10%;意味着您正在为flex属性设置特定值。

`/* this is equivalent */ 
    flex: 1 2 10%; 

    /* to this */ 
    flex-grow: 1; 
    flex-shrink: 2; 
    flex-basis: 10%;

这只是一种速记方式。

+0

好的,所以左边的标签是增长,中间是缩小,正确的是它可以增长或缩小的最大百分比?确切地说,是 –

+1

。你应该看看[这个](https://www.w3schools.com/css/css3_flexbox.asp)。 W3Schools有很多关于flexbox的文档。 – ViLar

+0

好的谢谢你的帮助!我会再阅读一些文档。我喜欢你,但蒂姆梅多拉首先回答了一个问题,然后再解释一下。 –

相关问题