ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS flex-basis プロパティの使用方法
CSS flex-basis プロパティの使用方法
- 藏色散人オリジナル
- 2019-05-27 16:04:023722ブラウズ
css flex-basis 属性は、フレキシブル ボックス拡張ベースライン値を設定または取得するために使用されます。CSS 構文は flex-basis:number|auto|initial|inherit です。要素がフレックス ボックス オブジェクトの要素でない場合は、 flex-basis 属性は機能しません。
css flex-basis プロパティを使用するにはどうすればよいですか?
定義と使用法
flex-basis プロパティは、フレックス ボックスのスケーリング ベースライン値を設定または取得するために使用されます。 。
注: 要素がフレックスボックス オブジェクトの要素ではない場合、flex-basis プロパティは効果がありません。
デフォルト: 自動
継承: いいえ
アニメーション化可能: はい。
バージョン: CSS3
JavaScript 構文:
object.style.flexBasis="200px"
CSS 構文
flex-basis: number|auto|initial|inherit;
プロパティValue
number フレキシブル項目の初期長さを指定する長さの単位またはパーセンテージ。
auto デフォルト値。長さはフレキシブルアイテムの長さと同じです。長さの指定がない場合は内容に応じて長さを決定させていただきます。
initial このプロパティをデフォルト値に設定します。
inherit このプロパティを親要素から継承します。
#例
2 番目のフレックスボックス要素の初期長を 80 ピクセルに設定します:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#main {
width: 350px;
height: 100px;
border: 1px solid #c3c3c3;
display: -webkit-flex; /* Safari */
display: flex;
}
#main div {
-webkit-flex-grow: 0; /* Safari 6.1+ */
-webkit-flex-shrink: 0; /* Safari 6.1+ */
-webkit-flex-basis: 40px; /* Safari 6.1+ */
flex-grow: 0;
flex-shrink: 0;
flex-basis: 40px;
}
#main div:nth-of-type(2) {
-webkit-flex-basis: 80px; /* Safari 6.1+ */
flex-basis: 80px;
}
</style>
</head>
<body>効果: #
以上がCSS flex-basis プロパティの使用方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。