質問編集履歴

2 css短縮

miyoshi_work

miyoshi_work score 69

2016/12/07 11:26  投稿

【css】display:flexで横並びにしたboxがwrapで折り返した際に上下の隙間が空くようにしたい
いつもお世話になっております。
###前提・実現したいこと
`display:flex`にて5つの要素が横並びになるといったものを作成しております。
`flex-wrap:wrap`を指定し、画面サイズが小さくなった際には
複数行に折り返すようにしたく、下記のようにcss、htmlを組みました。
しかし、下記のコードではboxが折り返した際に上と下のboxがぴったりくっついてしまいます。
これを上下で間隔が空くようにしたいです。
###該当のソースコード
```html
<ul class="top_card_list fl_simple">
   <li><span class="em">テキストテキスト</span>テキスト</li>
   <li><span class="em">テキストテキスト</span>テキストテキストテキスト</li>
   <li><span class="em">テキストテキスト</span>テキスト<span class="number">15</span>です</li>
   <li><span class="em">テキスト</span>テキスト</li>
   <li><span class="em">テキスト</span>テキスト<span class="number">25</span>テキスト</li>
</ul>
```
```css
.fl_simple {
 display: -webkit-box;
 display: -moz-box;
 display: -ms-flexbox;
 display: -webkit-flex;
 display: flex;
}
.top_card_list{
 text-align: center;
 flex-wrap: wrap;
 justify-content: flex-start;
 align-content: space-between;
 -webkit-align-content: space-between;
 list-style-type: none;
}
.top_card_list li:last-of-type {
 margin-right:0;
}
[class*="top_"] .number{
 font-size:18px;
}
.top_card_list .em{
 font-weight: bold;
 display: block;
 margin-bottom: 6px;
}
.top_card_list li {
 padding: 16px;
 border-radius: 4px;
 background: #f9f9f9;
 border: 1px solid #ccc;
 border-top: 3px solid #0091f0;
 margin-right: 24px;
 flex: 0 0 205px;
}
```
###
flexに対し、まだ苦手意識があり完璧に理解ができていないのですが、
親に指定した `align-content: space-between;`で
想定のデザインになるつもりでしたが`align-content`が
全く動作していないように思われます。。
そもそもalign-contentの考え方が違うのでしょうか?
ご教授頂けますと幸いです。
###16/12/07 追記
`align-content: space-between;`って
親要素の高さが設定されてないと効かないんですね…
今回の場合親要素の高さは指定できなかったので
`margin-bottom`での解決で最適解のようでした
メモ的にこちらの質問に追記させていただきます
```css
 /* align-content効かせる用 */
 .fl_simple {
   display: -webkit-box;
   display: -moz-box;
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;
 }
 .top_card_list{
   text-align: center;
   flex-wrap: wrap;
   justify-content: flex-start;
   align-content: space-between;
   -webkit-align-content: space-between;
   list-style-type: none;
   height:400px;
   width:auto;
   padding:8px;
 }
 .top_card_list li:last-of-type {  
   margin-right:0;  
 }  
 [class*="top_"] .number{  
   font-size:18px;  
 }  
 .top_card_list .em{  
   font-weight: bold;  
   display: block;  
   margin-bottom: 6px;  
 }  
 .top_card_list li {  
   padding: 16px;  
   border-radius: 4px;  
   background: #f9f9f9;  
   border: 1px solid #ccc;  
   border-top: 3px solid #0091f0;  
   margin-right: 24px;  
   flex: 0 0 205px;  
 
```
  • HTML

    16849 questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    11568 questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • CSS3

    3859 questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

1 追記

miyoshi_work

miyoshi_work score 69

2016/12/07 11:23  投稿

【css】display:flexで横並びにしたboxがwrapで折り返した際に上下の隙間が空くようにしたい
いつもお世話になっております。
###前提・実現したいこと
`display:flex`にて5つの要素が横並びになるといったものを作成しております。
`flex-wrap:wrap`を指定し、画面サイズが小さくなった際には
複数行に折り返すようにしたく、下記のようにcss、htmlを組みました。
しかし、下記のコードではboxが折り返した際に上と下のboxがぴったりくっついてしまいます。
これを上下で間隔が空くようにしたいです。
###該当のソースコード
```html
<ul class="top_card_list fl_simple">
   <li><span class="em">テキストテキスト</span>テキスト</li>
   <li><span class="em">テキストテキスト</span>テキストテキストテキスト</li>
   <li><span class="em">テキストテキスト</span>テキスト<span class="number">15</span>です</li>
   <li><span class="em">テキスト</span>テキスト</li>
   <li><span class="em">テキスト</span>テキスト<span class="number">25</span>テキスト</li>
</ul>
```
```css
.fl_simple {
 display: -webkit-box;
 display: -moz-box;
 display: -ms-flexbox;
 display: -webkit-flex;
 display: flex;
}
.top_card_list{
 text-align: center;
 flex-wrap: wrap;
 justify-content: flex-start;
 align-content: space-between;
 -webkit-align-content: space-between;
 list-style-type: none;
}
.top_card_list li:last-of-type {
 margin-right:0;
}
[class*="top_"] .number{
 font-size:18px;
}
.top_card_list .em{
 font-weight: bold;
 display: block;
 margin-bottom: 6px;
}
.top_card_list li {
 padding: 16px;
 border-radius: 4px;
 background: #f9f9f9;
 border: 1px solid #ccc;
 border-top: 3px solid #0091f0;
 margin-right: 24px;
 flex: 0 0 205px;
}
```
###
flexに対し、まだ苦手意識があり完璧に理解ができていないのですが、
親に指定した `align-content: space-between;`で
想定のデザインになるつもりでしたが`align-content`が
全く動作していないように思われます。。
そもそもalign-contentの考え方が違うのでしょうか?
ご教授頂けますと幸いです。
ご教授頂けますと幸いです。
###16/12/07 追記
`align-content: space-between;`って
親要素の高さが設定されてないと効かないんですね…
今回の場合親要素の高さは指定できなかったので
`margin-bottom`での解決で最適解のようでした
メモ的にこちらの質問に追記させていただきます
```css
  /* align-content効かせる用 */
 .fl_simple {
   display: -webkit-box;
   display: -moz-box;
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;
 }
 .top_card_list{
   text-align: center;
   flex-wrap: wrap;
   justify-content: flex-start;
   align-content: space-between;
   -webkit-align-content: space-between;
   list-style-type: none;
   height:400px;
   width:auto;
   padding:8px;
 }
 .top_card_list li:last-of-type {
   margin-right:0;
 }
 [class*="top_"] .number{
   font-size:18px;
 }
 .top_card_list .em{
   font-weight: bold;
   display: block;
   margin-bottom: 6px;
 }
 .top_card_list li {
   padding: 16px;
   border-radius: 4px;
   background: #f9f9f9;
   border: 1px solid #ccc;
   border-top: 3px solid #0091f0;
   margin-right: 24px;
   flex: 0 0 205px;
```
  • HTML

    16849 questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    11568 questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • CSS3

    3859 questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る