From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/css/flex-basis/index.html | 214 +++++++++++++++++++++++++++++++++ 1 file changed, 214 insertions(+) create mode 100644 files/ja/web/css/flex-basis/index.html (limited to 'files/ja/web/css/flex-basis') diff --git a/files/ja/web/css/flex-basis/index.html b/files/ja/web/css/flex-basis/index.html new file mode 100644 index 0000000000..68cdc32397 --- /dev/null +++ b/files/ja/web/css/flex-basis/index.html @@ -0,0 +1,214 @@ +--- +title: flex-basis +slug: Web/CSS/flex-basis +tags: + - CSS + - CSS Flexible Boxes + - CSS Property + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/flex-basis +--- +
{{CSSRef}}
+ +

flex-basis は CSS のプロパティで、フレックスアイテムの主要部分の初期の寸法を設定します。 {{Cssxref("box-sizing")}} で設定していない限り、このプロパティはコンテンツボックスの寸法を定義します。

+ +
{{EmbedInteractiveExample("pages/css/flex-basis.html")}}
+ + + +
+

メモ: (auto 以外の) flex-basis と width (または flex-direction: column の場合は height) の両方が要素に設定されていた場合、 flex-basis が優先されます。

+
+ +

構文

+ +
/* 幅を指定する */
+flex-basis: 10em;
+flex-basis: 3px;
+flex-basis: auto;
+
+/* 固有のサイズ指定キーワード */
+flex-basis: fill;
+flex-basis: max-content;
+flex-basis: min-content;
+flex-basis: fit-content;
+
+/* フレックスアイテムの内容物に基づいて自動設定する */
+flex-basis: content;
+
+/* グローバル値 */
+flex-basis: inherit;
+flex-basis: initial;
+flex-basis: unset;
+
+ +

flex-basis プロパティは、content キーワードまたは <'width'> で指定します。

+ +

値

+ +
+
<'width'>
+
絶対的な {{cssxref("<length>")}}、親のフレックスコンテナーの main size に対する {{cssxref("<percentage>")}}、あるいは auto キーワードで定義します。負の値は不正です。既定値は auto です。
+
content
+
flex アイテムの内容物に基づいて、自動的にサイズを決めます。
+
+
メモ: この値は Flexible Box Layout の初期リリースでは定義されていませんでしたので、古い実装では対応していない場合があります。 main size (width または height) を auto にするのと合わせて auto を使用することで、同等の効果を得られます。
+ +
+

経緯:

+ +
    +
  • 元々、flex-basis:auto は "自身の width または height プロパティを参照する" ことを意味していました。
    • +
  • その後 flex-basis:auto の意味が自動サイズ設定に変わり、また "自身の width または height プロパティを参照する" キーワードとして "main-size" を導入しました。これは {{bug("1032922")}} で実装しました。
    • +
  • さらに、この変更が {{bug("1093316")}} で戻されて auto が再び "自身の width または height プロパティを参照する" になり、自動サイズ設定を行うための content キーワードを新たに導入しました (content キーワードの追加は {{bug("1105111")}} で扱っています)。
    • +
+
+
+
+ +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

フレックスアイテムの初期の寸法の設定

+ +

HTML

+ +
<ul class="container">
+  <li class="flex flex1">1: flex-basis test</li>
+  <li class="flex flex2">2: flex-basis test</li>
+  <li class="flex flex3">3: flex-basis test</li>
+  <li class="flex flex4">4: flex-basis test</li>
+  <li class="flex flex5">5: flex-basis test</li>
+</ul>
+
+<ul class="container">
+  <li class="flex flex6">6: flex-basis test</li>
+</ul>
+
+ +

CSS

+ +
.container {
+  font-family: arial, sans-serif;
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.flex {
+  background: #6AB6D8;
+  padding: 10px;
+  margin-bottom: 50px;
+  border: 3px solid #2E86BB;
+  color: white;
+  font-size: 14px;
+  text-align: center;
+  position: relative;
+}
+
+.flex:after {
+  position: absolute;
+  z-index: 1;
+  left: 0;
+  top: 100%;
+  margin-top: 10px;
+  width: 100%;
+  color: #333;
+  font-size: 12px;
+}
+
+.flex1 {
+  flex-basis: auto;
+}
+
+.flex1:after {
+  content: 'auto';
+}
+
+.flex2 {
+  flex-basis: max-content;
+}
+
+.flex2:after {
+  content: 'max-content';
+}
+
+.flex3 {
+  flex-basis: min-content;
+}
+
+.flex3:after {
+  content: 'min-content';
+}
+
+.flex4 {
+  flex-basis: fit-content;
+}
+
+.flex4:after {
+  content: 'fit-content';
+}
+
+.flex5 {
+   flex-basis: content;
+}
+
+.flex5:after {
+  content: 'content';
+}
+
+.flex6 {
+  flex-basis: fill;
+}
+
+.flex6:after {
+  content: 'fill';
+}
+
+ +

結果

+ +

{{EmbedLiveSample('Setting_flex_item_initial_sizes', '', '360')}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Flexbox', '#propdef-flex-basis', 'flex-basis')}}{{Spec2('CSS3 Flexbox')}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.flex-basis")}}

+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf