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

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

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

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

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

CSS

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

Q&A

3回答

192閲覧

display flexについて質問です。※画像あり

roronoazoro

総合スコア113

CSS3

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

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

CSS

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

0グッド

0クリップ

投稿2018/06/19 12:52

編集2022/01/12 10:55

下記画像のようなレイアウトをdisplay flexを用いてやりたいのですが、SP版の時にどのような指定をすれば実現できますでしょうか?
flex

一応①②と③④をdivで囲んでdisplay flexでも横並びなると思いますが、そのために余計なdivを作るのもなぁと思ったりします。
各番号をwidth 50%指定して親にcolumn指定しても縦並びのままでうまくいきません、、

アドバイスいただけると助かります。
よろしくお願いします。

html

1<div class="pageNav"> 2 <ul> 3 <li><a href="#" class="oBtn1" rel="#">テキスト1</a></li> 4 <li><a href="#" class="oBtn1" rel="#">テキスト2</a></li> 5 <li><a href="#" class="oBtn1" rel="#">テキスト3</a></li> 6 <li><a href="#" class="oBtn1" rel="#">テキスト4</a></li> 7 </ul> 8</div>

css

1.pageNav ul { 2 width: 600px; 3 margin: 0 auto; 4 display: flex; 5} 6.pageNav li { 7 width: calc(620px / 4); 8 padding: 20px 0; 9 position: relative; 10} 11.pageNav li a { 12 color: #fff; 13 display: block; 14 font-size: 15px; 15 text-align: right; 16 padding-right: 35px; 17}

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

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

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

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

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

kei344

2018/06/19 14:17

ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。
roronoazoro

2018/06/20 01:57

ありがとうございます。備忘録もかねて時間のある時にまとめようかと思います。 よろしくお願いします。
guest

回答3

0

flex-wrap: wrap; でいけそうです。

CSS

1.pageNav ul { 2 /*width: 600px;*/ 3 margin: 0 auto; 4 display: flex; 5 flex-wrap: wrap; /*ADD*/ 6} 7.pageNav li { 8 /*width: calc(620px / 4);*/ /*REMOVE*/ 9 flex-basis: 50%; /*ADD*/ 10 padding: 20px 0; 11 position: relative; 12} 13.pageNav li a { 14 /*color: #fff;*/ 15 display: block; 16 font-size: 15px; 17 text-align: right; 18 padding-right: 35px; 19} 20```**動くサンプル:**[https://jsfiddle.net/entbga6s/](https://jsfiddle.net/entbga6s/) 21 22--- 23 24【CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 | コリス】 25[http://coliss.com/articles/build-websites/operation/css/css3-flexbox-properties-by-scotch.html](http://coliss.com/articles/build-websites/operation/css/css3-flexbox-properties-by-scotch.html) 26 27【CSS3のFlexboxを基本から理解して、使い倒そう! | 株式会社LIG】 28[http://liginc.co.jp/web/html-css/css/21024](http://liginc.co.jp/web/html-css/css/21024)

投稿2018/06/20 03:58

kei344

総合スコア69364

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

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

0

CSS

1.pageNav ul { 2 display: grid; 3 grid-template-columns: repeat(2, 1fr); 4} 5 6@media screen and (min-width: 768px) { 7 .pageNav ul { 8 grid-template-columns: repeat(4, 1fr); 9 } 10}

投稿2018/06/20 02:51

x_x

総合スコア13749

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

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

0

親要素のdiv(フレックスコンテナー)
flex-direction: row;
flex-wrap: wrap;

子要素の1から4(フレックスアイテム)
flex-grow: 0;
flex-shrink: 0;
flex-basis: 50%;

で図のSP版のような並びになりませんか?

投稿2018/06/19 15:30

with_crows

総合スコア12

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問