Flexboxで横並べ デモ

このページはブログ『Wataame Frog』の「リスト(UL/LI) を横並べにする「flexbox」の書き方」という記事のサンプルです。
記事URL : http://wataame.sumomo.ne.jp/archives/7812

flexbox

flexboxなし

• リスト1
• リスト2
• リスト3
• リスト4

flexbox デモ１

ul に display: flex;

• リスト1
• リスト2
• リスト3
• リスト4
• リスト5
• リスト6

flexbox デモ２

ul横幅：250px

• リスト1
• リスト2
• リスト3
• リスト4
• リスト5
• リスト6

flexbox デモ３

ul横幅：250px
li横幅：3em

• リスト1
• リスト2
• リスト3
• リスト4
• リスト5
• リスト6

flexbox デモ４

ul横幅：250px
ul に justify-content: center;

• リスト1
• リスト2
• リスト3
• リスト4
• リスト5
• リスト6

flexbox デモ５

横：250px
リスト内容の文字数がバラバラの場合

• リストリスト1
• リスト2
• リストリストリスト3
• リスト4
• リストリストリストリスト5
• リスト6

flexbox デモ６

横：250px
liを<span>で括り、li に display: table;
span に display: table-cell; と vertical-align: middle;

• リストリスト1
• リスト2
• リストリストリスト3
• リスト4
• リストリストリストリスト5
• リスト6

flexbox デモ７

横：400px

• リストリスト1
• リスト2
• リストリストリスト3
• リスト4
• リストリストリストリスト5
• リスト6

flexbox デモ８

横：450px

• リストリスト1
• リスト2
• リストリストリスト3
• リスト4
• リストリストリストリスト5
• リスト6