HTMLDOMスタイルのflexプロパティ
HTML DOMスタイルのflexプロパティは、displayプロパティがflexに設定されている要素の柔軟な長さを設定または返すために使用されます。これは、flexGrow、flexShrink、およびflexBasisのプロパティを操作するために使用されます。
以下は、-
の構文です。フレックスプロパティの設定-
object.style.flex = "flex-grow flex-shrink flex-basis|auto|initial|inherit"
以下は値です-
| 値 | 説明 |
|---|---|
| flex-grow | |
| flex-shrink | |
| flex-basis | アイテムの長さを指定し、法的な長さの単位を取ります。 |
| auto | 3つのフレックスプロパティを11autoとして設定します。 |
| flexプロパティをデフォルト値の01autoに設定します。 | |
フレックスプロパティの例を見てみましょう-
例
<!DOCTYPE html>
<html>
<head>
<style>
#demo {
width: 400px;
height: 80px;
display: flex;
}
#demo div {
flex: 1 3 auto;
}
div:nth-of-type(even){
box-shadow: inset 0 0 12px red;
}
div:nth-of-type(odd){
box-shadow: inset 0 0 12px blue;
}
</style>
<script>
function changeFlex() {
document.getElementsByTagName("DIV")[1].style.flex="none";
document.getElementsByTagName("DIV")[4].style.flex="none";
document.getElementById("Sample").innerHTML="The flex value for first and fourth div is changed to none";
}
</script>
</head>
<body>
<div id="demo">
<div id="orange"></div>
<div id="green"></div>
<div id="blue"></div>
<div id="red"></div>
</div>
<p>Change the above divs flex property by clicking the below button</p>
<button onclick="changeFlex()">Change Flex</button>
<p id="Sample"></p>
</body>
</html> 出力
「フレックスの変更」をクリックすると ” −
-
HTMLDOMスタイルのflexBasisプロパティ
HTML DOMスタイルのflexBasisプロパティは、フレックス表示で要素の初期サイズを指定するために使用されます。 flexBasisプロパティは、flex-basisのauto以外の値の場合、widthよりも優先されます。 以下は、-の構文です。 flexBasisプロパティの設定- object.style.flexBasis = "number|auto|initial|inherit" 上記の特性は次のように説明されます- 値 説明 番号 フレキシブルアイテムの初期の長さをパーセンテージまたは任意の法定長さの単位で指定します。
-
HTMLDOMスタイルjustifyContentプロパティ
HTML DOM justifyContentプロパティは、使用可能なすべてのスペースを使用しない場合に、フレックスアイテムを主軸上で水平方向に整列させるために使用されます。 以下は、-の構文です。 justifyContentプロパティの設定- object.style.justifyContent = "flex-start|flex-end|center|space-between|space-around|initial|inherit" 上記の特性は次のように説明されます- 値 説明 flex-start これは、コンテナの先頭にア