CSS Property: flex
[this page | pdf | back links]
The CSS (CSS3) flex property is a shorthand
property for setting certain flex properties for an element.
Valid property values (other
than inherit and initial) are defined
by the elements of the shorthand. Shorthand elements (in the order in which
they appear):
-
flex-grow
-
flex-shrink
-
flex-basis
|
Default Value:
|
0 1 auto
|
|
JavaScript syntax:
|
e.g. object.style.flex="1"
|
|
Inherited:
|
No
|
|
Animatable:
|
See individual
properties
|
EXAMPLE:
HTML USED IN THIS EXAMPLE:
<!DOCTYPE html>
<html> <!-- Copyright (c) Nematrian Limited 2018 -->
<head>
<style>
div.x1 {border: 1px solid blue;}
div.x2 {border: 1px solid blue; flex: 1;}
</style>
</head>
<body>
Element with default property<br>
<div style="width: 200px; display: flex;">
<div class="x1">1</div><div class="x1">2000</div>
</div><br>
Property set using in-file HTML style<br>
<div style="width: 200px; display: flex;">
<div class="x2">1</div><div class="x2">2000</div>
</div><br>
Property set using JavaScript<br>
<div style="width: 200px; display: flex;">
<div id="x3">1</div><div id="x4">2000</div>
</div><br>
<script>
document.getElementById("x3").style.border = "1px solid blue";
document.getElementById("x4").style.border = "1px solid blue";
document.getElementById("x3").style.flex = "1";
document.getElementById("x4").style.flex = "1";
</script>
</body>
</html>
|
FUNCTION THAT MAY ASSIST IN TESTING WHETHER FEATURE IS SUPPORTED:
function isSupportedCSSPropertyFlex() {
var x = document.createElement("DIV"); x.style.flex = "1"; return (window.getComputedStyle(x, null).flex == "1");
} |
NAVIGATION LINKS
Contents | Prev | Next | CSS Properties