【CSS3】【Flexbox】フレックスボックスの基本
flex-flow:columndisplay:flex;flex-flow:column;
See the Pen
flex-column by shiakisudev (@shiakisu)
on CodePen.
CSS
.oya{
display:flex;
flex-flow:column;
}
.main{
background-color:skyblue;
height:200px;
}
.sub{
background-color:yellow;
height:100px;
}
flex-flow:rowdisplay:flex;flex-flow:row;
See the Pen
flex-row by shiakisudev (@shiakisu)
on CodePen.
CSS
.oya{
display:flex;
flex-flow:row;
}
.main{
background-color:skyblue;
height:200px;
}
.sub{
background-color:yellow;
height:100px;
}
flex:1 1 autodisplay:flex;flex-flow:row;flex:1 1 auto;を設定する。flex:1 1 autoの場合はwidthが設定されていたとしても、それを無視して、ウィンドウサイズに合わせて幅が可変で変わります。
See the Pen
flex-row-11 by shiakisudev (@shiakisu)
on CodePen.
CSS
.oya{
display:flex;
flex-flow:row;
}
.main{
background-color:skyblue;
height:200px;
width:300px;
flex:1 1 auto;
}
.sub{
background-color:yellow;
height:100px;
width:300px;
flex:1 1 auto;
}
flex:0 0 autodisplay:flex;flex-flow:row;flex:0 0 auto;を設定する。
See the Pen
flex-row-00 by shiakisudev (@shiakisu)
on CodePen.
CSS
.oya{
display:flex;
flex-flow:row;
}
.main{
background-color:skyblue;
height:200px;
width:300px;
flex:0 0 auto;
}
.sub{
background-color:yellow;
height:100px;
width:300px;
flex:0 0 auto;
}
order:n
See the Pen
flex-col-11 by shiakisudev (@shiakisu)
on CodePen.
CSS
.oya{
display:flex;
flex-flow:row;
}
.main{
background-color:skyblue;
height:200px;
width:300px;
flex:1 1 auto;
order:2;
}
.sub{
background-color:yellow;
height:100px;
width:300px;
flex:1 1 auto;
order:1;
}
以上で記事の解説はお終い！
HTML、CSS、JavaScriptをもっと勉強したい方にはUdemyがオススメ！同僚に差をつけよう！