flexbox
last update:
2020/12/17
// 親に指定するもの
display: flex;
// 基本
flex-direction: row;
// row, row-reverse, column, column-reverse
// 左から右, 右から左, 上から下, 下から上
flex-wrap: nowrap;
// nowrap, wrap, wrap-reverse
// 横1行, 上から複数行, 下から複数行
flex-flow: row nowrap;
// directionとwrapのショートハンド
justify-content: flex-start;
// flex-start, flex-end, center, space-between, space-around
// 左寄せ, 右寄せ, 中央, 等幅(端マージン無し), 等幅(端マージンあり)
align-items: stretch;
// stretch, flex-start, flex-end, center, baseline
// 縦100%, 上寄せ, 下寄せ, 中央, アイテム中身のbaseline揃え
align-content: stretch;
// stretch, flex-start, flex-end, center, space-between, space-around
// justify-contentの縦版
// 子に指定するもの
order: 0;
// item個別に指定すれば、数値が小さい順に左から並ぶ
flex-grow: 1;
// item個別に指定すれば、各々の横幅の割合を変更できる
flex-shrink: 0;
// item個別に指定すれば、各々の横幅の割合を変更できる
flex-basis: auto;
// item個別に数値(px)で指定すれば、各々の横幅の割合を変更できる
flex: 1 0 auto;
// grow | shrink | basis のショートハンド
// あるタイプの中央寄せの例
<!doctype html>
<title>title</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
<style>
html, body {
height: 100%;
}
body, div {
margin: 0;
padding: 0;
}
.wrap {
display: flex;
flex-direction: column;
height: 100%;
}
.content {
flex-grow: 1;
padding: 10px;
background: #f1f1f1;
display: flex;
justify-content: center;
align-items: center;
}
.box {
padding: 50px;
border: #000 1px solid;
}
.footer {
padding: 10px;
background: #fff1f1;
}
</style>
<div class="wrap">
<div class="content">
<div class="box">box</div>
</div>
<div class="footer">footer</div>
</div>
code_popup
sample
// 3カラムの例
<!doctype html>
<title>title</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
<style>
body, ul, li {
margin: 0;
padding: 0;
list-style: none;
font-size: 12px;
}
ul {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
li {
flex-basis: calc(90% / 3);
position: relative;
display: block;
height: 100px;
margin-bottom: 10px;
background: #f1f2f3;
text-align: center;
}
li:nth-child(3n+2):last-child {
margin-right: calc(90% / 3);
position: relative;
right: calc(10% / 2);
background: #f1d2d3;
}
span {
position: absolute;
top: 0;
left: 0;
}
img {
margin-top: 20px;
width: 60px;
height: 60px;
}
</style>
<ul>
<li><span>li</span><img src="flexbox.png" alt=""></li>
<li><span>li</span><img src="flexbox.png" alt=""></li>
<li><span>li</span><img src="flexbox.png" alt=""></li>
<li><span>li</span><img src="flexbox.png" alt=""></li>
<li><span>li</span><img src="flexbox.png" alt=""></li>
<li><span>li</span><img src="flexbox.png" alt=""></li>
<li><span>li</span><img src="flexbox.png" alt=""></li>
<li><span>li</span><img src="flexbox.png" alt=""></li>
<li><span>li</span><img src="flexbox.png" alt=""></li>
<li><span>li</span><img src="flexbox.png" alt=""></li>
<li><span>li</span><img src="flexbox.png" alt=""></li>
</ul>
code_popup
sample
// リストの例
<!doctype html>
<title>title</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
<style>
body, ul, li {
margin: 0;
padding: 0;
list-style: none;
font-size: 12px;
}
ul {
}
li {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
border-bottom: #dddedf 1px solid;
}
span {
flex-basis: calc(100% - 50px);
word-break: break-all;
}
a {
}
</style>
<ul>
<li><span>description</span><a href="#">delete</a></li>
<li><span>descriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescription</span><a href="#">delete</a></li>
<li><span>description</span><a href="#">delete</a></li>
<li><span>description</span><a href="#">delete</a></li>
<li><span>description</span><a href="#">delete</a></li>
</ul>
code_popup
sample