So verwenden Sie das CSS-Box-Flex-Attribut-Front-End-Fragen und Antworten-php.cn

So verwenden Sie das CSS-Box-Flex-Attribut

藏色散人

Freigeben： 2019-05-29 14:20:24

Original

2449 Leute haben es durchsucht

Das CSS-Box-Flex-Attribut wird verwendet, um anzugeben, ob die untergeordneten Elemente der Box ihre Größe vergrößern oder verkleinern können. Seine Syntax ist box-flex: Der Wert kann abgekürzt oder vergrößert werden, wenn die Box kleiner oder größer wird.

So verwenden Sie das CSS-Box-Flex-Attribut

Wie verwende ich das CSS-Box-Flex-Attribut?

Funktion: Gibt an, ob die untergeordneten Elemente der Box ihre Größe vergrößern oder verkleinern können.

Syntax:

box-flex: value;

Nach dem Login kopieren

Beschreibung: Die skalierbare Reihe von Wertelementen. Flexibilität ist relativ, zum Beispiel ist ein untergeordnetes Element mit einem Box-Flex von 2 doppelt so flexibel wie ein untergeordnetes Element mit einem Box-Flex von 1.

Hinweis: Skalierbare Elemente können kleiner oder größer werden, wenn die Box kleiner oder größer wird. Immer wenn in der Box zusätzlicher Platz vorhanden ist, wird das skalierbare Element erweitert, um diesen Platz auszufüllen. Derzeit unterstützt kein Browser das Box-Flex-Attribut. Firefox unterstützt eine alternative Eigenschaft -moz-box-flex. Safari, Opera und Chrome unterstützen das alternative Attribut -webkit-box-flex.

Beispiel für die Verwendung des CSS-Box-Flex-Attributs

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
display:-moz-box; /* Firefox */
display:-webkit-box; /* Safari and Chrome */
display:box;
width:300px;
border:1px solid black;
}
#p1
{
-moz-box-flex:1.0; /* Firefox */
-webkit-box-flex:1.0; /* Safari and Chrome */
box-flex:1.0;
border:1px solid red;
}
#p2
{
-moz-box-flex:2.0; /* Firefox */
-webkit-box-flex:2.0; /* Safari and Chrome */
box-flex:2.0;
border:1px solid blue;
}
</style>
</head>
<body>
<div>
<p id="p1">Hello</p>
<p id="p2">php中文网</p>
</div>
<p><b>注释：</b>IE 不支持 box-flex 属性。</p>
</body>
</html>

Nach dem Login kopieren

Effektausgabe:

So verwenden Sie das CSS-Box-Flex-Attribut

Das obige ist der detaillierte Inhalt vonSo verwenden Sie das CSS-Box-Flex-Attribut. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!