更新日 2021.04.20
#1 枠のことを「要素」と呼ぶ
枠も、文字も、画像もすべて要素
htmlを学ぶのにいろいろな書物がありますが、枠も、文字も、画像のこともたいてい「要素」と 一括りに呼ばれています。 ただし、要素といっても複数のことを指していますので、これまでCBC入門1ではdivやpなどの枠のことをそのまま「枠」とよんできました。しかし、これからわからない機能を調べる際にwebや書籍から情報を集めます。その際ほとんどが「要素」と呼ばれますので、 慣れておきましょう。
#2 要素のレイアウトにflexを使う
要素をレイアウトする際にflexを使う
css3から使われるdisplayプロパティの新しい値として「flex」があります。flexを指定した要素はflexコンテナと呼ばれる親要素となり、 この中の子要素のことをflexボックスと呼び自由にレイアウトができるようになります。 主な特長としては、flexコンテナ内にあるflexボックスを横並びにできるということです。
すべてのflexプロパティを覚えるのは大変なので、よく使う手法だけを覚えて行きましょう。
ここでは代表的な使い方の例をあげています。
flexコンテナ(親要素)で使えるプロパティ
flex-direction | 子要素の配置する方向を指定するプロパティ。水平か垂直を指示 |
---|---|
flex-wrap | 子要素の行数を指定するプロパティ。一行、または複数行に並べるかを指示 |
flex-flow | flex-directionとflex-wrapをまとめて指定できるプロパティ。flex-flow:row nowrap; |
justify-content | flexコンテナー内に空きスペースがあった場合、水平方向のなかで要素をどの位置に配置するかを指定 |
align-items | flexコンテナー内に空きスペースがあった場合、垂直方向のなかで要素をどの位置に配置するかを指定 |
align-content | 子要素が複数行に渡った場合の垂直方向の揃えを指定 |
flexボックス(子要素)で使えるプロパティ
order | 子要素を任意の順で並べ替えられます。 |
---|---|
flex-grow | 親要素にスペースがある場合、子要素が他の子要素に対してどれくらい伸びるかを指定します。 |
flex-shrink | 子要素が他の子要素に対してどれくらい縮むかを指定 |
flex-basis | widthと同じように幅の値を指定できます。autoと指定した場合は子要素のコンテンツのサイズが適応されます。 |
flex | flex-grow、flex-shrink、flex-basis の3つのプロパティーを一行で指定できます。 |
align-self | 親要素に高さにスペースがある場合、子要素を垂直方向のどの位置に配置するかを指定 |
htmlファイルに直接cssを書き込んでブラウザで確認
テストフォルダにindex2.htmlを作成し、以下の内容を記入します。<style>タグの中にcssを記述できます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>flexテスト</title>
</head>
<body>
<style>
--ここにcssを記入できます--
</style>
--ここにhtmlを記入します--
</body>
</html>
flexその1 子にflex
<div class="container">
<div class="box">①</div>
<div class="box">②</div>
</div>
.container{
display:flex;
}
.box{
/*flexのありなしを確認してみよう*/
flex:1;
}
親要素にflexを指定すると、子がflexboxになり横並びになる。※その2ででてくるflex-direction: row;の状態。
子要素に特に指定なし
子要素にflex指定
flex: (flex-grow) (flex-shrink) (flex-basis) ;
flex:1;は短縮形。
flex-grow:1
flex-shrink:1
flex-basis:0 をまとめたもの、
flex:1 1 0; の略です。
①
②
①
②
flex:1;は短縮形。
flex-grow:1
flex-shrink:1
flex-basis:0 をまとめたもの、
flex:1 1 0; の略です。
flexその2 flex-direction
<div class="container">
<div>①</div>
<div>②</div>
<div>③</div>
<div>④</div>
<div>⑤</div>
</div>
.container{
display:flex;
/*flex-directionの値を変えてみよう*/
flex-direction:column;
}
flex-directionの値の初期値はrow(横並び)他には、row-reverse(横方向逆並び)
column-reverse(縦方向逆並び)があります
①
②
③
④
⑤
flexその3 flex-wrap
<div class="container">
<div class="box">①</div>
<div class="box">②</div>
<div class="box">③</div>
<div class="box">④</div>
<div class="box">⑤</div>
</div>
.container{
display:flex;
/*flex-wrapの値を変えてみよう*/
flex-wrap:nowrap;
}
.box{
width:28%;
}
flex-wrapは折返しの指示。初期値はnowrap(flexコンテナに収まる)
wrap(flexコンテナからあふれて複数行に)
wrap-reverse(wrapの逆順)
nowrap
wrap
①
②
③
④
⑤
①
②
③
④
⑤
flexその4 justify-content
<div class="container">
<div>①</div>
<div>②</div>
<div>③</div>
<div>④</div>
<div>⑤</div>
</div>
.container{
display:flex;
/*justify-contentの値を変えてみよう*/
justify-content: flex-end;
}
flexボックスを横並びさせたときの位置や間隔の指定。
flex-end
center
space-between
space-around
space-evenly
①
②
③
④
⑤
①
②
③
④
⑤
①
②
③
④
⑤
①
②
③
④
⑤
①
②
③
④
⑤
flexその5 align-items
<div class="container">
<div style="height:40px;">①</div>
<div>②</div>
<div style="height:70px;">③</div>
<div>④</div>
<div>⑤</div>
</div>
.container{
height:60px;
display:flex;
/*align-itemsの値を変えてみよう*/
align-items: flex-end;
}
flexボックスの縦位置を指定します。高さがバラバラな要素を作って配置してみました。初期値はstretch。
stretch
flex-start
flex-end
center
baseline
①
②
③
④
⑤
①
②
③
④
⑤
①
②
③
④
⑤
①
②
③
④
⑤
①
②
③
④
⑤
flexその6 要素を、途中から別の動きにする
margin-lfetのみ
<div class="container">
<div>①</div>
<div class="box1">②</div>
<div>③</div>
</div>
margin:auto;の場合
<div class="container">
<div>①</div>
<div class="box2">②</div>
<div>③</div>
</div>
.container{
display:flex;
}
.box1{
margin-left:auto;
width:20%;
background-color:#c55;
}
.box2{
margin:auto;
width:20%;
background-color:#c55;
}
marginのかけ方でいろんな配置ができます。
margin-lfetのみ
margin:auto;に設定した場合は中央に配置される
①
②
③
margin:auto;に設定した場合は中央に配置される
①
②
③
flexその7 センタリング
<div class="container">
<div class="box">子要素</div>
</div>
.container{
height:160px;
display:flex;
justify-content: center;
align-items: center;
}
.box{
height:50px;
width:100px;
background-color:#eee;
}
子要素
align-items(縦の位置)、
どちらもcenterにすることで中央配置になります。