質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

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

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

CSS

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

Q&A

解決済

4回答

3190閲覧

cssのflexについて

am_

総合スコア11

CSS3

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

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

CSS

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

0グッド

0クリップ

投稿2018/04/13 11:05

WordPressの記事一覧(archive.phpなど)を横に3つずつで表示したいです。
横並びにするには flex が良いといろいろな所で見たので調べてみましたが、よく理解できません。
以下のCSSですと、投稿数が3の倍数ではないカテゴリーなどの場合に右と左にそれぞれ寄ってしまって真ん中がかなり空いてしまいます。

php

1<ul class="list"> 2<?php if(have_posts()): while(have_posts()): the_post(); ?> 3<li class="list-item">~~省略~~</li> 4<?php endwhile; endif; ?> 5</ul>

css

1.list{ 2 list-style:none; 3 display:flex; 4 flex-direction:row; 5 flex-wrap:wrap; 6 justify-content:space-between; 7 align-items:flex-start; 8 align-content:space-around; 9 align-items:stretch 10} 11.list-item{ 12 width:calc(95% / 3); 13 margin:10px 14}

justify-content を flex-start にすると2つ目が左に寄ってくれますが、今度は3の倍数の数の記事があるカテゴリだと右側が大きく空いてしまいます(左に寄っているので当たりまえですが)。
本当は「list-item」の width を calc(100% / 3) にしたいのですが、そうすると隙間がなくなってしまい、どうしたら良いのか分からなくなって95%としました。

わかりにくいかもしれないのですが、
こうなるので
↑こうなるので、こうしたい↓ です。
こうしたい
おとなしく float を使ったほうが良いでしょうか。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

defghi1977

2018/04/13 11:54

display:flex周りの質問はteratailでも頻出のものですので, 他の質問・回答も検索・参考になさって下さい.
guest

回答4

0

グリッドレイアウトを採用するという手もあります.

HTML

1<ul> 2 <li>1</li> 3 <li>2</li> 4 <li>3</li> 5 <li>4</li> 6 <li>5</li> 7</ul>

CSS

1ul{ 2 margin: 0; 3 padding: 0; 4 display: grid; 5 grid-auto-flow: row; 6 grid-template-columns: repeat(3, 1fr); 7 grid-auto-rows: 200px; 8 grid-gap: 20px; 9} 10li{ 11 margin: 0; 12 list-style: none; 13 background-color: gray; 14}

https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Grid_Layout

投稿2018/04/13 11:31

defghi1977

総合スコア4756

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

CSS

1.list{ 2 list-style:none; 3 display:flex; 4 flex-wrap:wrap; 5 padding: 10px; 6} 7.list-item{ 8 width: calc(100% / 3 - 20px); 9 margin: 10px; 10}

flexならCSSはこれだけでいいかと思います。
flexのプロパティをあれこれつけすぎたのが迷走の始まりかと。

calcの - 20px は両サイドのマージンを足した数値です。
.listにpaddingをつけることでバランスをとってみました。

codepenで確認する↓
https://codepen.io/RaRukAnA/pen/XEwqwy/

投稿2018/04/13 12:10

編集2018/04/13 12:13
Atsushi_Okumura

総合スコア355

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

am_

2018/04/14 01:42

Atsushi_Okumura様のやり方でうまくいきました! columnではなぜかデザインが大幅に崩れてしまい、 グリッドレイアウトは記事リスト以降が全く表示されなくなってしまいました(ソースも表示されないです)。 皆様ありがとうございました。
guest

0

最近この質問多い気がする。3列固定なら一通りしか考えなくていいし楽

css

1.list-item:nth-child(3n+2):last-child{ 2 margin-right:calc(95% / 3 + 30px); 3}

投稿2018/04/13 11:44

sousuke

総合スコア3828

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

css

1.list{ 2 list-style:none; 3 column-count: 3; 4 column-gap: 10px; 5} 6.list-item{ 7 width:100%; 8 margin-bottom:10px; 9}

columnを使ってみました。
CSS 段組みレイアウトの使用 - ウェブデベロッパーガイド | MDN
Can I use... Support tables for HTML5, CSS3, etc

投稿2018/04/13 11:29

Lhankor_Mhy

総合スコア35865

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問