HTMLDOMスタイルのflexBasisプロパティ
HTML DOMスタイルのflexBasisプロパティは、フレックス表示で要素の初期サイズを指定するために使用されます。 flexBasisプロパティは、flex-basisのauto以外の値の場合、widthよりも優先されます。
以下は、-
の構文です。flexBasisプロパティの設定-
object.style.flexBasis = "number|auto|initial|inherit"
上記の特性は次のように説明されます-
| 値 | 説明 |
|---|---|
| 番号 | フレキシブルアイテムの初期の長さをパーセンテージまたは任意の法定長さの単位で指定します。 |
| 自動 | これらはフレキシブルアイテムの長さに等しい長さです。長さが指定されていない場合は、その内容に応じたものになります。これがデフォルト値です。 |
| 初期 | このプロパティを初期値に設定します。 |
| 継承 | 親プロパティ値を継承する |
flexBasisプロパティの例を見てみましょう-
例
<!DOCTYPE html>
<html>
<head>
<style>
#demo, #demo2{
background-color: #fff8dc;
margin: 10px;
height: 100px;
box-shadow: 0 0 0 4px brown;
display: flex;
}
#demo div {
flex-basis: 110px;
}
</style>
<script>
function changeFlexBasis() {
for(var i=1;i<3;i++){
document.getElementsByTagName("DIV")[i].style.flexBasis="200px";
}
document.getElementById("Sample").innerHTML="The flex basis value is increased to 200px";
}
</script>
</head>
<body>
<h2>Demo Heading</h2>
<div id="demo">
<div><img src="https://www.tutorialspoint.com/images/home_tensor_flow.png"></div>
<div><img src="https://www.tutorialspoint.com/images/home_blockchain_python.png"></div>
<div><img src="https://www.tutorialspoint.com/images/multilanguage-tutorials.png"></div>
</div>
<p>Change the flex basis property for the image present inside divs by clicking the below button</p>
<button onclick="changeFlexBasis()">Change Flex Basis</button>
<p id="Sample"></p>
</body>
</html> 出力
「フレックスベースの変更」をクリックすると 」ボタン-
-
HTMLDOMスタイルのflexDirectionプロパティ
HTML DOMスタイルのflexDirectionプロパティは、フレックス要素の配置方向を設定または返すために使用されます。 以下は、-の構文です。 flexDirectionプロパティの設定- object.style.flexDirection = "row|row-reverse|column|column-reverse|initial|inherit" 上記の特性は次のように説明されます- 値 説明 行 これは、フレックスアイテムを行として水平方向に表示し、デフォルト値です。 row-reverse これは、フレックス
-
HTMLDOMスタイルのflexプロパティ
HTML DOMスタイルのflexプロパティは、displayプロパティがflexに設定されている要素の柔軟な長さを設定または返すために使用されます。これは、flexGrow、flexShrink、およびflexBasisのプロパティを操作するために使用されます。 以下は、-の構文です。 フレックスプロパティの設定- object.style.flex = "flex-grow flex-shrink flex-basis|auto|initial|inherit" 以下は値です- 値 説明 flex-grow 指定された数だけ柔軟なアイテム