webかたつむり ウェブデザインを勉強中 ウェブ初心者のおぼえがき

webかたつむり

ウェブデザインを勉強中

flexbox

display: flex; 現時点でまとめる。

カラム落ちを前提にするならば、float 見出しのとおり、カラム落ちさせるならば、floatを使う。 そうでないときは、display: flexが便利。 ナビゲーションなど。 まず並べる display div id="flexBox" に、display: flex; 「横」に並べるには、flex-directio…

justify-content:

やりたいことは、 flexBoxの幅を指定しないで、 flex-wrap: wrap;にして、 ボディーのセンターに配置する。 ボディー幅を変えても、画像がボディーの中央にいる。 justify-contentの値の初期値は「flex-start」 これを、「flex-end」にしてみると… body の右…

flexBox 用語の定義

目的を叶えるには、justify-content を使うらしい。 順番も入れ替えられるみたいです。

flex-wrap: wrap;

display: flex; の続きです。そのままでは、とにかく横一列にしか並ばないので、なんとかします。 2列以上にしたいときは、下に、「flex-wrap: wrap;」と追加すればよい。そうすれば、親要素の幅に合わせて改行してくれる。とても便利! 以下、画像の横幅を…

display: flex;

float の代わりに display: flex を使う。 横並びさせたいアイテムを入れる箱を作る。<div id="flexBox">を作る。 <li>を並べたいのであれば,<ul>をそのまま使ってもよい。 flexboxにあたる要素に。display: flex;とcssに記述すればおしまい。 そうすると、中の子要素がすべて横に並ぶ</ul></li></div>…