カテゴリー:
モバイルデザイン
閲覧数:597 配信日:2016-01-08 18:13
Yahoo! JAPAN
display:flex;
ピックアップCSS
.List__body{
padding-right:0;
padding-left:0
}
.List__item--noBorder .List__body{
border-bottom:0
}
.List__item--disableMinHeight .List__body{
min-height:initial
}
.List__item--paddingSmall .List__body{
padding:4px
}
.List__body{
display:-webkit-box;
display:-webkit-flex;
display:flex;
flex-direction:column;
min-height:44px;
padding:8px;
border-bottom:1px solid #eff2f5;
-webkit-box-orient:vertical;
-webkit-box-direction:normal;
-webkit-flex-direction:column;
-webkit-box-flex:1;
-webkit-flex:1;
flex:1;
-webkit-box-pack:center;
-webkit-justify-content:center;
justify-content:center
}
.List__body.is-disabled{
pointer-events:none;color:#ccc
}ユニクロ
display: table;
ピックアップCSS
.uni-icon-list a {
padding: 12px 16px;
display: table;
width: 100%;
table-layout: fixed;
}・理解するために設置してみたデモ
今後の方針
1.ブロック OR リスト
・何れの表示にするかを決定
2.実装方法選定
・リストにする場合は、「display:flex;」「display: table;」何れにするかを決定