Help us understand the problem. What is going on with this article?

Flexboxの基本

More than 3 years have passed since last update.

概要

React Nativeでの開発は楽しいですね。
Reactの「Learn Once, Write Anywhere」がフルに発揮されていると思います。
今回は、React Nativeではなく、React Nativeで柔軟にレイアウトを作成する際に必要となる、
Flexboxについてまとめました。
(CSSベースでまとめています。)

Flexbox

Flexboxの用語

flex container

レイアウトしていきたい要素を含めるための領域。

flex containerが生成されたら、flex-directionが定義される。
flex-directionのdefaultはrow(column縦方向)。

flex-directionに平行のaxisをmain axis、交差するaxisをcross axisと呼ぶ。

flex-direction

axisの設定を行う。

  • row
  • column
  • row-reverse
  • column-reverse

flex-wrap

デフォルトではラップされない。

  • nowrap
  • wrap
  • wrap-reverse

flex-flow

flex-directionとflex-wrapを順不同に設定できる。

.container {
    flex-flow: column wrap
}

justify-content

main axisに余白がある時、余白の埋め方指定できる。

  • flex-start
  • flex-end
  • center
  • space-between
  • space-around

align-items

cross axisに余白がある際に、余白の埋め方を指定できる。

  • flex-start
  • flex-end
  • center
  • stretch
    • 余白を埋めてくれる。
    • 高さを指定していたら反映されない。

align-content

wrapされた行をまとめて操作する。

  • flex-start
  • flex-end
  • center
  • space-between
  • space-around

flex item

レイアウトしていきたい要素。

flex-directionに沿って要素が作られる。

order

個別に要素の並び替えの順番を指定する事ができる。
デフォルトでは全ての要素が0になっている。
orderが同じ場合は、htmlの書かれた順番に並び替えられる。

align-self

特定の要素だけを、cross axis方向に設定できる。

  • flex-start
  • flex-end
  • center

flex-grow

余白がある時に、それぞれの要素の幅がどの様になるかを決める。
(余った余白をどの要素に付けるかを指定できる。)

flex-shrink

要素がflex-containerから溢れた時にどうするかを決める。

flex-basis

要素の基本となる幅を設定する。

flexBoxの作り方

親要素にdisplay:flex;を設定する。

  • 子要素のみがflexStyleになり、孫要素はflexにはならない。

flex-itemsでのflex

flex-start, flex-shrink, flex-basisに対応する。

.foo {
    flex: 0 1 auto;
}
  • 長さっぽい値がきたらflex-basisになる。
  • 数字が1個ならflex-startになる。

flex-growの仕組み

.container {
  width: 300px;
  height: 300px;
  color: #FFFFFF;
  background-color: #EEEEEE;
  display: flex;
}

.box {
  width: 80px;
  height: 80px;
}
.box-1 {
  background-color: tomato;
  flex: 1 1 80px;
}
.box-2 {
  background-color: slategray;
  flex: 2 1 80px;
}
.box-3 {
  background-color: pink;
  flex: 3 1 80px;
}
  • ①まずは余っている余白の幅を求める。
    • 今回であれば60px
      • 300 - 80 * 3
  • ②余っている余白の比率を記載する。
    • 今回であれば1:2:3

比率は以下の計算しきになる。

余りの余白(60px) / 比率の合計(6) = 10px(1flex grow)

flex-growの仕組み

.container {
  width: 300px;
  height: 300px;
  color: #FFFFFF;
  background-color: #EEEEEE;
  display: flex;
}

.box {
  width: 80px;
  height: 80px;
}

.box-1 {
  background-color: tomato;
  flex: 0 1 120px;
}
.box-2 {
  background-color: slategray;
  flex: 0 2 120px;
}
.box-3 {
  background-color: pink;
  flex: 0 3 120px;
}
  • ①まずははみだしている余白の幅を求める。
    • 今回であれば60px
      • 120 * 3 -300
  • ②はみ出した部分に併せてどれだけ縮めるかの比率を記載する。
    • 今回であれば1:2:3

比率は以下の計算しきになる。

(1*120) / それぞれの割合で広がった場合(1*120 + 2*120 + 3*120) * 余っている幅(60) = 10

  • 1は10px引く(110px)
  • 2は20px引く(100px)
  • 3は30px引く(90px)

flexboxとmargin:autoの組み合わせ

各flex-itemに対して、margin-XXX: autoを指定すると上手い具合で左寄せ、右寄せが可能である。

要素を上下左右中央に配置する

  • justify-content: center;
  • align-items: center;

これだけで上下左右中央揃えが可能である。

3カラムの作り方

スクリーンショット 2016-11-11 16.49.48.png

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>FlexBoxの練習</title>
        <link rel="stylesheet" href="./styles.css" media="screen" title="no title">
    </head>
    <body>
        <header class="header">
            header
        </header>
        <div class="container">
            <div class="left-content">
                left
            </div>
            <div class="center-content">
                center
            </div>
            <div class="right-content">
                right
            </div>
        </div>
        <footer class="footer">
            footer
        </footer>
    </body>
</html>
.header {
  background-color: #DDD;
}
.left-content {
  background-color: tomato;
  flex: 0 100px;
}
.center-content {
  background-color: skyblue;
  flex: 1 100px;
}
.right-content {
  background-color: pink;
  flex: 0 100px;
}
.footer {
  background-color: #DDD;
}

.container {
  display: flex;
}

レスポンシブデザインの作り方

.header {
  background-color: #DDD;
}
.left-content {
  background-color: tomato;
  flex: 0 100px;
}
.center-content {
  background-color: skyblue;
  flex: 1 100px;
}
.right-content {
  background-color: pink;
  flex: 0 100px;
}
.footer {
  background-color: #DDD;
}

.container {
  display: flex;
}

@media all and (max-width: 500px) {
  .container {
    flex-direction: column;
  }
  .center-content {
    order: 0;
    flex: 100%;
  }
  .left-content {
    order: 1;
    flex: 100%;
  }
  .right-content {
    order: 2;
    flex: 100%;
  }
}

終わり

今まではBootstrapやMaterialize.cssのフレームワークに頼るCSS生活でしたが、
Flexboxを導入すれば、かなり柔軟にレイアウトが作成できると思います。

React Nativeでも必要な知識になると思うので、
どんどん使っていきたいと思います。

tfrcm
React / ReactNative / Go / TypeScript / AWS / Docker / k8s
https://gemcook.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした