CSS flex-basis プロパティの使用方法-CSSチュートリアル-php.cn

CSS flex-basis プロパティの使用方法

藏色散人

リリース： 2019-05-27 16:04:02

オリジナル

3701 人が閲覧しました

css flex-basis 属性は、フレキシブルボックス拡張ベースライン値を設定または取得するために使用されます。CSS 構文は flex-basis:number|auto|initial|inherit です。要素がフレックスボックスオブジェクトの要素でない場合は、 flex-basis 属性は機能しません。

CSS 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 サイトの他の関連記事を参照してください。