質問編集履歴

2 css短縮

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で作成されています。 Myタグに追加 CSS 11568 questions CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。 Myタグに追加 CSS3 3859 questions CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。 Myタグに追加

1 追記

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で作成されています。 Myタグに追加 CSS 11568 questions CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。 Myタグに追加 CSS3 3859 questions CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。 Myタグに追加