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

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

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

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

HTML

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

CSS

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

Q&A

解決済

2回答

2016閲覧

flexboxでのレイアウトボックスを均等配置

退会済みユーザー

退会済みユーザー

総合スコア0

CSS3

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

HTML

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

CSS

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

0グッド

0クリップ

投稿2018/03/31 15:48

編集2019/09/04 14:23

flexboxを使ってレイウトの作成を行なっておりますがサイドバーにボックス配置が出来ず困っております。

floatは使わずにして、どのようにサイドバーにflexboxを使用し
綺麗に並べることが出来ますでしょうか。

発生している問題・エラーメッセージ

※CSSコード参照)

該当のソースコード

css

1body { 2 margin: 0; 3 padding: 0; 4 font-size: 15px; 5} 6 7#main_wrapper { 8 width: 960px; 9 border: solid 1px #333; 10 padding: 10px; 11 margin: 0 auto; 12} 13 14#header { 15 border: solid 1px #333; 16 margin-bottom: 10px; 17} 18 19#menu { 20 border: solid 1px #333; 21 margin-bottom: 10px; 22} 23 24#main_flexbox { 25 width: 960px; 26 display: flex; 27} 28 29#left_wrapper { 30 width: 624px; 31} 32 33.contents1 { 34 border: solid 1px #333; 35 height: 80px; 36 padding: 5px; 37 display: flex; 38 margin-bottom: 10px; 39} 40 41.box1, .box2, .box3, .box4 { 42 border: solid 1px #333; 43 flex: 1; 44 justify-content: space-around; 45 margin: 5px; 46} 47 48.contents2 { 49 border: solid 1px #333; 50 height: 80px; 51 padding: 5px; 52 display: flex; 53 margin-bottom: 10px; 54} 55 56.box5, .box6, .box7 { 57 border: solid 1px #333; 58 flex: 1; 59 justify-content: space-around; 60 margin: 5px; 61} 62 63.contents3 { 64 border: solid 1px #333; 65 height: 80px; 66 padding: 5px; 67 display: flex; 68 margin-bottom: 10px; 69} 70 71.box8, .box9 { 72 border: solid 1px #333; 73 flex: 1; 74 justify-content: space-around; 75 margin: 5px; 76} 77 78.contents4 { 79 border: solid 1px #333; 80 height: 80px; 81 padding: 5px; 82 display: flex; 83 margin-bottom: 10px; 84} 85 86.box10, .box11, .box12, .box13, .box14, .box15 { 87 border: solid 1px #333; 88 flex: 1; 89 justify-content: space-around; 90 margin: 5px; 91} 92 93#right_wrapper { 94 width: 326px; 95 border: solid 1px #333; 96 padding: 0px 10px 0px 10px; 97 margin: 0px 0px 10px 10px; 98 display: flex; 99 flex-direction: column; 100} 101 102.rightbox1 { 103 flex-basis: content; /*横幅 縦幅記述?*/ 104} 105 106.rightbox2, .rightbox3 { 107/*ここにコードを記述*/ 108} 109 110.rightbox4, .rightbox5, .rightbox6 { 111/*ここにコードを記述*/ 112} 113 114.rightbox7 { 115/*ここにコードを記述*/ 116} 117 118#footer { 119 border: solid 1px #333; 120}

html

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<meta charset="utf-8"> 5<meta name="viewport" content="width=device-width,initial-scale=1"> 6<link rel="stylesheet" href="css/layout_float4_flexbox4.css"> 7<title>flexboxレイアウト4</title> 8</head> 9 <body> 10 <div id="main_wrapper"> 11 <div id="header"> 12 <h1>ヘッダー</h1> 13 </div> 14 <div id="menu"> 15 <h2>メニュー</h2> 16 </div> 17 <div id="main_flexbox"> 18 <div id="left_wrapper"> 19 <div class="contents1"> 20 <div class="box1"></div> 21 <div class="box2"></div> 22 <div class="box3"></div> 23 <div class="box4"></div> 24 </div> 25 <div class="contents2"> 26 <div class="box5"></div> 27 <div class="box6"></div> 28 <div class="box7"></div> 29 </div> 30 <div class="contents3"> 31 <div class="box8"></div> 32 <div class="box9"></div> 33 </div> 34 <div class="contents4"> 35 <div class="box10"></div> 36 <div class="box11"></div> 37 <div class="box12"></div> 38 <div class="box13"></div> 39 <div class="box14"></div> 40 <div class="box15"></div> 41 </div> 42 </div> 43 <div id="right_wrapper"> 44 <div class="rightbox1"></div> 45 <div class="rightbox2"></div> 46 <div class="rightbox3"></div> 47 <div class="rightbox4"></div> 48 <div class="rightbox5"></div> 49 <div class="rightbox6"></div> 50 <div class="rightbox7"></div> 51 </div> 52 </div> 53 <div id="footer"> 54 <h2>フッター</h2> 55 </div> 56 </body> 57</html>

試したこと

right_wrapper(サイドバー)に、display: flex; と flex-direction: column;を記述。
子の.rightbox1 ~ .rightbox7に対し下記のコードを記述したが上手くいかず。

flex-basis: content:横幅 縦幅

補足情報(FW/ツールのバージョンなど)

Google Chrome バージョン: 65.0.3325.181(Official Build) (64 ビット)
テキストエディタ:Brackets 使用

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

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

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

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

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

karamarimo

2018/03/31 16:48

「flex-basis: content:」最後がコロンになってますよ。
退会済みユーザー

退会済みユーザー

2018/03/31 16:58

あ、すみません、これは単なる記載ミスです。コピペでコードを貼り付ける際にしてしまいました。
guest

回答2

0

ベストアンサー

MDNによれば、flex-basis: content;に対応しているのはEdgeだけです。
https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis

CSS

1#right_wrapper { 2 flex-direction: row; 3 flex-wrap: wrap; 4 justify-content: space-between; 5 align-items: center; 6} 7 8#right_wrapper > div { 9 height: 20%; 10 border: solid 1px #333; 11} 12 13.rightbox1 { 14 width: 100%; 15} 16 17.rightbox2, .rightbox3 { 18 width: 43%; 19} 20 21.rightbox4, .rightbox5, .rightbox6 { 22 width: 27%; 23} 24 25.rightbox7 { 26 width: 100%; 27}

投稿2018/04/02 02:04

x_x

総合スコア13749

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

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

0

▼実際のサンプル
https://jsfiddle.net/jgoL1dw1/7/

▼その解説
まずはHTMLです。
フレックスボックスにしたい要素を<div class="rigthbox2-3"> <div class="rigthbox4-5-6">で囲ってあげましょう。
後述しますが、そこにCSSでdisplay: flex;を適用させるためです。

html

1<div id="right_wrapper"> 2 <div class="rightbox1"></div> 3 <div class="rigthbox2-3"> 4 <div class="rightbox2"></div> 5 <div class="rightbox3"></div> 6 </div> 7 <div class="rigthbox4-5-6"> 8 <div class="rightbox4"></div> 9 <div class="rightbox5"></div> 10 <div class="rightbox6"></div> 11 </div> 12 <div class="rightbox7"></div> 13</div>

お次はCSSです。
上のHTMLをご提示の形にするためには次にように書けばいけると思います。

css

1.rightbox1 { 2 /*flex-basis: content;*/ 3 border: 1px solid #000; 4 height: 30%; 5 width: 90%; 6 margin: 5% auto 0 auto; 7} 8.rigthbox2-3 { 9 height: 30%; 10 width: 90%; 11 margin: 5% auto 0 auto; 12 display: flex; 13 justify-content: space-between; 14} 15.rigthbox2-3 div { 16 width: 45%; 17 border: 1px solid #000; 18} 19.rigthbox4-5-6 { 20 height: 30%; 21 width: 90%; 22 margin: 5% auto 0 auto; 23 display: flex; 24 justify-content: space-between; 25} 26.rigthbox4-5-6 div { 27 width: calc(33.3% - 5%); 28 border: 1px solid #000; 29} 30.rightbox7 { 31 border: 1px solid #000; 32 height: 30%; 33 width: 90%; 34 margin: 5% auto 5% auto; 35} 36

投稿2018/04/01 23:09

編集2018/04/01 23:36
退会済みユーザー

退会済みユーザー

総合スコア0

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問