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

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

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

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

CSS

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

Q&A

解決済

1回答

6213閲覧

cssのflexを利用して横配列と縦配列を再現したい

2001Y

総合スコア83

CSS3

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

CSS

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

0グッド

0クリップ

投稿2017/07/13 07:15

編集2017/07/14 07:15

CSSのflexを利用して以下のような構造を作りたいのですが、どのようにすればいいのでしょうか。
イメージ説明
HTML的には以下のような構造です。

HTML

1<main> 2 <div id="main-content"> 3 </did> 4 <div class="AD"> 5 </did> 6 <div id="side-content"> 7 </did> 8</main>

ADなしでの、main-contentとside-contentでは以下のCSSでできたのですが、ADを入れると当たり前ですが3カラムになります

CSS

1main { 2 display: flex; 3}

ReactNativeのFlexboxレイアウト の記事を読んで、align-itemsを使うべきなのかと思いましたが、align-itemsではないようです。。。
教えていただけないでしょうか。。。

サイドバーにはめるべきADとside-contentをdivでくくってしまえば良いのですが、できればくくらないでいければなと思うのですが。

##追記
現在、divで囲ってやっているので、divで囲った状態で、 main-content と AD + side-content の高さを揃える方法を教えてください。
さらにADの数を増やせるようにしたいです。(高さの変化に対応する)

HTML

1<main> 2 <div id="main-content"> 3 </div> 4 <div id="Sidebar"> 5 <div class="AD"> 6 </div> 7 <div class="side-contents"> 8 </div> 9 <div class="AD"> 10 </div> 11</main>

CSS

1main { 2 display: flex; 3}

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

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

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

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

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

Lhankor_Mhy

2017/07/13 10:39

高さは固定ですか? 成り行きですか?
2001Y

2017/07/13 12:07

高さは変動します。よろしくお願いします。
Lhankor_Mhy

2017/07/14 00:26

main-content と AD + side-content の高さの大きい方に合わせる、という理解で合ってますか?
2001Y

2017/07/14 02:38

はい。ADは高さが固定なので、side-content か main-contentが変動することになります。
Lhankor_Mhy

2017/07/14 03:27

それはCSSだけだと難しいかと思います。全体の高さが固定であるならば可能かと思います。または、成り行きであればカラムの高さを合わせなくて良ければ方法がないこともないですが対応ブラウザが不安です。javascriptを使用するのが無難かな、と思います。
Lhankor_Mhy

2017/07/14 04:49

質問の変更を拝見しました。ご提示のコードで(打ち間違いを直せば)問題なく想定の表示になると思うのですが、分からない部分はどれですか?
2001Y

2017/07/14 06:53

12:27 - ですよね。追記の方での高さもJavaScriptが必要になりますね?100%などの指示ができないのですが。
2001Y

2017/07/14 06:55

13:49 - 追記 をみてくださったのだと思いますが、divで囲って仕舞えばあのように表示ができます。最初はdivなしでやってみたかったのですが、ダメそうなのでdivで囲った上で、高さの変更に対応させたいなと思い追記させていただきました。
Lhankor_Mhy

2017/07/14 07:01

では、解決ですか? その場合は、自己解決の登録をお願いいたします。
2001Y

2017/07/14 07:03

こちらの質問については解決したとさせていただきますが、divで囲った場合、中の要素の高さがそろいません。その部分について教えてくださると嬉しいです。
Lhankor_Mhy

2017/07/14 07:08

当方で試したところ、問題なく要素の高さがそろいました。前記のとおり、ご提示のコードには何箇所か打ち間違いがありますが、それを修正しても想定する表示になりませんか?
Lhankor_Mhy

2017/07/14 07:10

あ、そうか、高さが合わないケースありますね。失礼しました。
2001Y

2017/07/14 07:14

大変申し訳ありません。完全な説明不足でした。#Sidebarは高さ変動するのですが、.side-contentsを高さに合わせたく、その方法がわかりません。また、追記のコードないのはdidは全てdivです。大変申し訳ありません。
guest

回答1

0

ベストアンサー

こちらでいかがですか。
https://jsfiddle.net/1zu5gydq/

CSS

1main{ 2 display:flex; 3} 4#Sidebar{ 5 display:flex; 6 flex-flow: column wrap; 7} 8#Sidebar div{ 9 flex:1; 10}

投稿2017/07/14 07:19

Lhankor_Mhy

総合スコア35865

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

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

Lhankor_Mhy

2017/07/14 07:24

あ、wrapの指定はいらないですね……
2001Y

2017/07/14 07:40

サイドバーにflexを入れちゃえばよかったんですね!ありがとうございます!! 真ん中の大きさを変動させるためにはflex:1;。ありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問