gpt4 book ai didi

html - 有人可以解释 flex-ratio 如何与 iron-flex-layout 一起使用吗?

转载 作者:太空宇宙 更新时间:2023-11-04 16:00:32 25 4
gpt4 key购买 nike

根据 Polymer Project's Documentation on flex-layout , 下面的代码应该生成下面的图像。

<div class="horizontal layout demo">
<div class="flex-3">Alpha</div>
<div class="flex">Beta</div>
<div class="flex-2">Gamma</div>
</div>

enter image description here

它说“例如,以下示例使“Gamma”比“Beta”大 2 倍,“Alpha”大 3 倍,分别使用 flex-2 和 flex-3。

我很困惑,因为正如您从图像中看到的那样,Alpha 和 Gamma 的大小相同,而 Beta 正好填满了两者之间的空间。有人可以解释一下吗?

最佳答案

文档演示显然有错误,但之前的说明文字是正确的。要使用弹性因子(即 flex-2flex-3 等),请确保包含 iron-flex-factors style module在你的组件样式中是这样的:

<dom-module id="x-foo">
<template>
<style include="iron-flex-factors"></style>
...

容器<div>使用 horizontallayout iron-flex 中定义的类style 模块,因此我们还将其包含在组件的样式中:

<dom-module id="x-foo">
<template>
<style include="iron-flex-factors iron-flex"></style>
...

HTMLImports.whenReady(() => {
Polymer({
is: 'x-foo'
});
});
<head>
<base href="https://polygit.org/polymer+1.9.3/components/">
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="iron-flex-layout/iron-flex-layout-classes.html">
</head>
<body>
<x-foo></x-foo>

<dom-module id="x-foo">
<template>
<style include="iron-flex iron-flex-factors">
div {
border: solid 1px blue;
}
</style>

<div class="horizontal layout">
<div class="flex-3"><p>flex-3</p></div>
<div class="flex"><p>flex</p></div>
<div class="flex-2"><p>flex-2</p></div>
</div>
</template>
</dom-module>
</body>

codepen

关于html - 有人可以解释 flex-ratio 如何与 iron-flex-layout 一起使用吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42012623/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com