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

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

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

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

Flex

FlexはFlash PlayerやAdobe Airで動作するRIA(リッチインターネットアプリケーション)を開発する為のフレームワークです

HTML

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

CSS

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

Q&A

3回答

1375閲覧

display flexのitemの両端を揃えたい

Allmycoding

総合スコア5

CSS3

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

Flex

FlexはFlash PlayerやAdobe Airで動作するRIA(リッチインターネットアプリケーション)を開発する為のフレームワークです

HTML

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

CSS

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

0グッド

0クリップ

投稿2019/02/16 13:55

編集2022/01/12 10:55

display :flex;<br>を使う際の両端の揃え方について質問です。

以下の画像のように子要素同士に空白を持たせつつ両端を見出しと同じ幅に揃えたいのですが、(画像1)

画像1

flexの子要素に対してmargin-left,margin-rightをかけてしまうと両端に空白ができてしまいます。(画像2)

画像2

flexの子要素のmarginを下記のように個別で指定してしまうと(cssコードA)
画面幅を変えた時にmarginがまちまちになってしまいます(画像3)

/////////cssコードA ここから////////////

div:nth-of-type(1) { margin-left: 0; } div:nth-of-type(2) { margin-right: 0; } div:nth-of-type(3) { margin-left: 0; } div:nth-of-type(4) { margin-right: 0; } div:nth-of-type(5) { margin-left: 0; margin-right: 0; }

//////////cssコードA ここまで//////////////

画像3

flexboxを使ってcssだけでitem同士の間隔を取りつつ、綺麗に両端を揃える方法はないのでしょうか?
ご存じの方がいらっしゃいましたら、ご教授ください。よろしくお願いします。

以下現在のサンプルコードです//////////////

<h1>程よい見出し</h1> <section> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </section> <style> h1{ background: #999999; color: #ffffff; text-align: center; } section { display: flex; flex-wrap: wrap; justify-content:space-around; align-items: center; } div{ height: 100px; line-height: 100px; text-align: center; flex-basis: 200px; margin: 10px 10px; } /*カラー指定***/ div:nth-of-type(1) { background: #ffdddd; margin-left: 0; } div:nth-of-type(2) { background: #ffffaa; margin-right: 0; } div:nth-of-type(3) { background: #aaffff; margin-left: 0; } div:nth-of-type(4) { background: #ffddff; margin-right: 0; } div:nth-of-type(5) { background: #ddffdd; margin-left: 0; margin-right: 0; } div:nth-of-type(n + 2) { } </style>

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

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

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

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

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

kei344

2019/02/16 13:58

(質問文は編集できます)質問文のコードはそれぞれコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
yu-smc

2019/02/16 13:58

例示コードは、コードブロック(```)で記述お願いします(コピーボタンがつくなど便利なので)。 回答についてはいま検討していますのでお待ちください。
Allmycoding

2019/02/16 14:34

ご指摘ありがとうございます。 修正いたしました。
guest

回答3

0

justfy-contentプロパティspace-betweenと同じことがやりたいように見えるのですが、違いますでしょうか。

程よい見出しと書かれている要素と同じ幅をsectionにも適用して、justify-contentプロパティはspace-betweenに設定します。その場合端の幅を取るためのmarginを指定しなくてもよくなります。

css

1<h1>程よい見出し</h1> 2<section> 3<div>1</div> 4<div>2</div> 5<div>3</div> 6<div>4</div> 7<div>5</div> 8</section> 9 10<style> 11h1{ 12background: #999999; 13color: #ffffff; 14text-align: center; 15} 16section { 17display: flex; 18flex-wrap: wrap; 19justify-content:space-between; 20align-items: center; 21} 22 23div{ 24height: 100px; 25line-height: 100px; 26text-align: center; 27flex-basis: 200px; 28margin: 10px 10px; 29flex-grow: 1; 30} 31</style>

投稿2019/02/16 14:03

編集2019/02/16 14:19
BluOxy

総合スコア2663

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

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

0

flexはBluOxyさんの回答で出来ると思います。
別の解としてgridを提案。

CSS

1section { 2 display: grid; 3 grid-template-columns: repeat(2, calc((100% - 20px) / 2)); 4 grid-auto-rows: max-content; 5 grid-gap: 20px; 6} 7 8div { 9 height: 100px; 10 line-height: 100px; 11 text-align: center; 12} 13 14div:nth-of-type(5) { 15 background: #ddffdd; 16 grid-column: span 2; 17} 18```**動くサンプル:**[https://jsfiddle.net/gunop5eq/](https://jsfiddle.net/gunop5eq/) 19 20--- 21 22 23【CSS Grid Layout を極める!(基礎編) - Qiita】 24[https://qiita.com/kura07/items/e633b35e33e43240d363](https://qiita.com/kura07/items/e633b35e33e43240d363) 25 26【CSS Grid Layout を極める!(場面別編) - Qiita】 27[https://qiita.com/kura07/items/486c19045aab8090d6d9](https://qiita.com/kura07/items/486c19045aab8090d6d9)

投稿2019/02/16 15:08

kei344

総合スコア69364

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

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

kei344

2019/02/16 15:19

flexについては「div:nth-of-type(n + 2)」とかでmarginを打ち消さず、「section」で「margin: -10px;」とかする手もある。 https://jsfiddle.net/fxnqd3ah/
guest

0

上記の方の回答に加えて、
div要素にflex-grow: 1;がかかっていてこれが余白を消しているように思うので、このプロパティ指定は不要なのではないでしょうか。

投稿2019/02/16 14:07

yu-smc

総合スコア610

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問