Flexbox

ここをみる。

containerとitemで構成される。

とりあえず、これだけで良い。

container側で、

direction: itemを横に並べるか、縦に並べるかなど

wrap: 画面の収まらない時に、wrapするかどうか、初期値はしない

justify-content: itemの水平方向(directionの方向?)の間隔調整をどうするか、初期値は左寄せ

align-items: itemの垂直方向(direction出ない方？)の配置調整をどうするか？ 初期値はstrech, baselineというのもある

align-content: wrapされた際に間隔調整

items側で、(当然個別のitemに設定することになる)

order: 通常は sourceの記述順に並ぶが、そうしたくない場合に使う?

grow: 各itemの初期値が1で、どれからのitemを相対的に伸ばしたいときは、設定する。 3で 1:1:1だったのが、1つ2にすれば、1:2:1 という形

shrink: growの逆の設定ができる。ある部分だけ縮小したいなど

basis: 幅指定。pixcel単位のみ？

Flexboxは1次元、CSS Gridは2次元、と覚えておいてもよいでしょう。

container(display:flex)内にitem(flex:integer)を配置(order:integer)する

flex-direction, flext-wrap, align-content, justify-content, align-items で並び方を決める

https://gyazo.com/285ffed91edb019c99634d4c55eaa4b3

cssは、inline, blockというのが枠組みの概念だったけど、CSS3で、container - itemという枠組みを導入した？という感じ????

flexibleなbox?

単語だけ拾って、イメージしてないけど、役立つかもで抜書しておく。

flex, flexDirection, alignItem, justifyContentを組み合わせて

flexは子要素が主軸

画面幅すべてのスペースを埋める

flexDirection: 子要素が配置される方向の定義

justifyContent: アイテムの配置方法を定義

alignment: 交差軸内でアイテムの配置方法を定義

to give the container the ability to alter its items' width/height (and order) to best fill the available space (mostly to accommodate to all kind of display devices and screen size

direction-agnostic

ここを起点にするのがよいかな。

container, items, display, order, flex-direction, flex-wrap, flex-grow, flex-shrink, flex-flow, flex-basis, justify-content, flex,

align-self, align-items, align-content

w3schoolで手を動かすのもよい。

日本語でquickに行きたい場合。

formの中に、input=text, input=submitが並ぶと、10:2の割合で並ぶ。

code: form.css

form{

display:flex;

}

flex:10;

padding: 10px;

}

flex: 2;

}

gridで３列に

code:grid.css

.todos {

display: grid;

grid-template-columns: repeat(3, 1fr);

grid-gap: 1rem;

}

.todo {

padding: 1rem;

border-radius: center;

}