#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>
/* 枠線と余白の初期設定 */
.container {
  border: 3px solid #fcc;
  margin: 0 0 25px;
  padding: 3px;
}
.container > div,
.container > span,
.container > p,
.container > li {
    background-color: #eee;
    margin: 2px;
    padding: 0 5px;
}
/* 枠線と余白の初期設定 */

  --ここに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その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;に設定した場合は中央に配置される

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;
}
子要素
justify-content(横並びの位置)、
align-items(縦の位置)、
どちらもcenterにすることで中央配置になります。
コピーしました
RSS https://cbc-study.com/rss.xml
質問などあればSlackで