CSS - flex-flow

• トップ
• CSSリファレンス
• flex-flow

概要

属性名	flex-flow
値	<flex-direction> || <flex-wrap>
初期値	個々の属性を参照。
適用可能要素	個々の属性を参照。
継承	個々の属性を参照。
メディア	個々の属性を参照。
アニメーション	個々の属性を参照。

サポート (説明)

CSS	IE/Edge	Firefox	Chrome	Opera	Safari
CSS3	11	20	21(-webkit) 29	15(-webkit) 17	6.1(-webkit) 9

説明

flex-direction と flex-wrap をまとめて指定します。フレックスボックスについての概要は flex を参照してください。

値	説明
<flex-direction>	flex-direction の値
<flex-wrap>	flex-wrap の値

使用例

.flexbox {
  display: flex;
  display: -ms-flexbox;
  margin: 10px;
  padding: 10px;
  border: 1px solid #999;
  background-color: #ddd;
  width: 250px;
  height: 50px;
}
.boxA, .boxB, .boxC {
  border: 1px solid #999;
  min-width: 100px;
  min-height: 20px;
  height: 22px;
  text-align: center;
}
.boxA { background-color: #fcc; }
.boxB { background-color: #cfc; }
.boxC { background-color: #ccf; }

<h3>row nowrap</h3>
<div class="flexbox" style="flex-flow:row nowrap">
 <div class="boxA">A</div>
 <div class="boxB">B</div>
 <div class="boxC">C</div>
</div>
<h3>row wrap</h3>
<div class="flexbox" style="flex-flow:row wrap">
 <div class="boxA">A</div>
 <div class="boxB">B</div>
 <div class="boxC">C</div>
</div>
<h3>row wrap-reverse</h3>
<div class="flexbox" style="flex-flow:row wrap-reverse">
 <div class="boxA">A</div>
 <div class="boxB">B</div>
 <div class="boxC">C</div>
</div>
<h3>column nowrap</h3>
<div class="flexbox" style="flex-flow:column nowrap">
 <div class="boxA">A</div>
 <div class="boxB">B</div>
 <div class="boxC">C</div>
</div>
<h3>column wrap</h3>
<div class="flexbox" style="flex-flow:column wrap">
 <div class="boxA">A</div>
 <div class="boxB">B</div>
 <div class="boxC">C</div>
</div>
<h3>column wrap-reverse</h3>
<div class="flexbox" style="flex-flow:column wrap-reverse">
 <div class="boxA">A</div>
 <div class="boxB">B</div>
 <div class="boxC">C</div>
</div>

関連項目

flex-direction, flex-wrap, flex-flow, order, flex, flex-grow, flex-shrink, flex-basis, justify-content, align-items, align-self, align-content

リンク

• http://www.w3.org/TR/css-flexbox-1/#flex-flow-property
• https://developer.mozilla.org/ja/docs/Web/CSS/flex-flow
• http://caniuse.com/#feat=flexbox

---