今回はflexbox内の子要素の折り返しと折り返したものの位置を指定するプロパティを解説します
折り返したものに対して専用のプロパティがあるんだね
これを知っていないとせっかく並べた子要素が上手く動かないということもありますので気をつけましょう
1.flex-wrapプロパティ
flex-wrapプロパティは主軸方向の子要素が溢れた際に折り返すか否かを値によって指定するプロパティです。
何も指定しなければ折り返しません
セレクター{
display:flex;
flex-wrap: 値;
}1-1.nowrap
“nowrap”は折り返さないという意味でこちらが初期値になります。
<div class="flex-wrapper">
<div>aaa</div>
<div>bbb</div>
<div>ccc</div>
<div>ddd</div>
</div>.flex-wrapper{
display:flex;
flex-direction: row;
flex-wrap: nowrap;
height: 200px;
}
.box{
width: 40%;
height: 70px;
}初期値なので目に見える変化はありません。
1-2.wrap
“wrap”は親要素から溢れた分を折り返します。
この例の場合ですと子要素の幅が40%なので3つ目のbox(cccのbox)が収まりきらないので折り返されて次の列に行っています。
.flex-wrapper{
display:flex;
flex-direction: row;
flex-wrap: wrap;
height: 200px;
}
.box{
width: 40%;
height: 70px;
}
また主軸の方向が変わっても…
flex-direction: column;の場合だね
.flex-wrapper{
display:flex;
flex-direction: column;
flex-wrap: wrap;
height: 200px;
}
.box{
width: 40%;
height: 60px;
}ちゃんと折り返されていますね。
1-3.wrap-reverse
“wrap-reverse”は軸の交差軸が逆(reverse)から始まり”wrap”と同様に収まりきらないものが折り返されて上の列に行っています。
.flex-wrapper{
display:flex;
flex-direction: row;
flex-wrap: wrap-reverse;
height: 200px;
}
.box{
width: 40%;
height: 70px;
}
こちらも主軸の方向を変えてもちゃんと逆から始まり折り返されます。
.flex-wrapper{
display:flex;
flex-direction: column;
flex-wrap: wrap-reverse;
height: 200px;
}
.box{
width: 40%;
height: 70px;
}2.align-contentプロパティ
align-contentプロパティはflex-wrapプロパティで折り返すことで複数行になっておりかつ、交差軸方向に余裕がある時に機能します。
セレクター{
display:flex;
flex-wrap: wrap;
align-content: 値;
}
2-1.stretch
“stretch”は初期値で子要素に高さが設定されていないと親要素の高さいっぱいに引き延ばされます。
.flex-wrapper{
display:flex;
flex-wrap: wrap;
height: 200px;
}
.box{
width: 40%;
}2-2.flex-start
“flex-start”は主軸の開始点揃えになります。
.flex-wrapper{
display:flex;
flex-wrap: wrap;
align-content: flex-start;
height: 200px;
}
.box{
width: 40%;
}こちらも主軸の方向を変えても大丈夫です。
.flex-wrapper{
display:flex;
flex-wrap: wrap;
flex-direction: column;
align-content: flex-start;
height: 200px;
}
.box{
width: 40%;
}2-3.center
“center”は主軸の中央揃えになります。
.flex-wrapper{
display:flex;
flex-wrap: wrap;
align-content: center;
height: 200px;
}
.box{
width: 40%;
}少し脱線しますが”flex-direction”と”flex-wrap”を同時に指定できる便利なプロパティがあります。
セレクター{
flex-flow: flex-directionプロパティの値 flex-wrapプロパティの値;
}flex-flowプロパティを使い値に”flex-directionプロパティの値”、スペースを空けて”flex-wrapプロパティ”の値を書きます。
.flex-wrapper{
display:flex;
flex-flow: row wrap;
align-content: center;
height: 200px;
}
.box{
width: 40%;
}主軸方向を「横」に「折り返しをする」という指定になっています
上と変わらない結果になりました
書く量も減るしこちらの方が楽だね
2-4.flex-end
“flex-end”は主軸の終点揃えになります。
.flex-wrapper{
display:flex;
flex-wrap: wrap;
align-content: flex-end;
height: 200px;
}
.box{
width: 40%;
}2-5.space-between
“space-between”は”justify-contentプロパティ”の時と同じように主軸方向に子要素を両端に配置をしてから残った子要素を均等配置します。
.flex-wrapper{
display:flex;
flex-wrap: wrap;
align-content: space-between;
height: 200px;
}
.box{
width: 40%;
}こちらも主軸を変えても大丈夫です。先ほどみた”flex-flowプロパティ”を使って指定しました。
.flex-wrapper{
display:flex;
flex-flow: column wrap;
align-content: space-between;
height: 200px;
}
.box{
width: 40%;
}2-6.space-around
“space-around”も”justify-contentプロパティ”の時と同じように主軸方向に子要素の余白を含め均等配置します。
.flex-wrapper{
display:flex;
flex-wrap: wrap;
align-content: space-around;
height: 200px;
}
.box{
width: 40%;
}3.まとめ
・flex-wrapプロパティで値を指定することで主軸方向で子要素が溢れた際に折り返すか、折り返さないかを指定できる。
・flex-wrapプロパティで折り返すことで複数行になった子要素に対して指定するプロパティで、交差軸方向に余裕がある事で機能する
・flex-flowプロパティを使うとflex-directionプロパティの値とflex-wrapプロパティの値を同時に指定できる
セレクター{
flex-flow: flex-directionプロパティの値 flex-wrapプロパティの値;
}前回でてきたalign-itemsと名前も似ていてややこしいけど、align-contentを使うのはwrapを指定して複数行にした時だと覚えておいてね
確かに実は迷ってたところだよ(笑)
違いは折り返して複数行になっているかどうかってところね
コメント