- ベストアンサー
フレックスボックスの左揃えに方法
フレックスボックスの左揃えはそろえる要素の親要素に display: flex; flex-direction: row; をつければいいのではないでしょうか？ うまくいきません。
- mousugusokoni
- お礼率52% (43/82)
- CSS
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (1)
- amaryllis_watch
- ベストアンサー率57% (4/7)
display: flex;で横並びしたのをまとめて左揃えにしたいということですね？ それなら、下記のサイトが参考になるでしょうか？
関連するQ&A
- テキストボックス内で行ごとに「○揃え」の設定
現在パワーポイント2002で資料作成しています。 スライド内にテキストボックスを作成し、 1行目…タイトル⇒「中央揃え」 2行目…空白行 ⇒特になし 3行目…内容 ⇒「左揃え」 にしたいのですが、ひとつのテキストボックス内で 行ごとに「～揃え」を設定する方法を教えてください。 目的の行を選択し、通常の「～揃え」ボタンでは 文章全体が左や中央になってしまいます。 よろしくお願いします。
- 締切済み
- オフィス系ソフト
- laravel5で上下中央揃えがずれる
現在、laravel5を使ったウェブサイト作成を勉強しています。 cssを編集してサイトの見栄えを整えているのですが、 laravelのデフォルトのcssを使用してflex box+align-items: centerでの上下中央揃えを行うと、 中央より少し上方にテキスト位置がずれてしまいます。 cssを一から自作した際には正しい表示位置となるので、 元々laravelで用意されているcssに問題があるのではないかと思っています。 一応、p要素やh1~h6要素にmargin-bottomが設定されている部分があることは発見したので、 この部分は0に設定し直したのですが、それでも修正されません。 cssのどこを修正すればよいか教えていただけないでしょうか。 よろしくお願いいたします。
- 締切済み
- CSS
- inline-blockを上下中央揃えにする方法
以下のhtmlで、内容に合わせてブロックの大きさが変わる状態での 上下の中央揃えができず悩んでいます。 html ------------------------------------------------------------------------------------------ <div id="box1"> <div id="box2"> <div id="box3"> <div>あああああああああああああああああああああああ</div> <div>いいいいいいいいいいいいいいいいいいいいいいい</div> <div>ううううううううううううううううううううううう</div> <div>えええええええええええええええええええええええ</div> <div>おおおおおおおおおおおおおおおおおおおおおおお</div> </div> </div> </div> ------------------------------------------------------------------------------------------ css ------------------------------------------------------------------------------------------ body { text-align:center; } #box1 { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width:700px; height:400px; background:#666666; } #box2 { position: absolute; left: 0; right: 0; margin: auto; width:500px; height: 300px; background:#FFF; } #box3 { display: inline-block; text-align: left; vertical-align: middle; background:#CCCCCC; } ------------------------------------------------------------------------------------------ #box2に対して#box3の内容が、縦に伸びても短くなっても常に上下が中央に配置されるようにしたいのですが、どうにもうまくいきません。 ブロック内のテキスト自体は左揃えで、ブロックそのものが中央です。 どなたか、ご教授お願い致します。 inline-blockを上下中央揃えにする方法
- 締切済み
- CSS
- codePenでメディアクエリーは対応していますか
cssの初心者です。ここ一週間位前からcodePenでHTML、CSS、Java Scriptの学習を開始したのですが、codePenはメディアクエリーに対応しているのか教えていただけますか。デスクトップファーストでコードを記載しており、class="gallery"はdisplay:flex; flex-direction:row;をしており、CSSコードの後半で @media(max-width:800px){ .gallery{ flex-direction: column-reverse; }} と記載してcodePenの画面を小さくしたら、その画面が小さくなるだけで、メディアクエリーは効かなそうでしたので質問しました。コーディングの学習はVS Codeで行っていますが、codePenに記載する場合にはgoogleフォント設定や、共有画像の読み込みの様に何か特別な記載の方法があれば、ご教示くださるようお願いします。
- ベストアンサー
- CSS
- FlexboxのレシポンシブCSSで困ってます。
Flexboxのレシポンシブの書き方で困ってます。各クラスのitemをPC版での場合は横並びで幅は20％、20％、60％。スマホ版では各itemが100%の画面横一杯に縦並びに表示したいです。他のCSSの関係上@media screen and (max-width:567px) の書き方は変えないでおきたいのですが上手くできません。 どなたか教えて下さい。宜しくお願いします。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title></title> <style> <!-- .infofl{ display: -webkit-flex; display: flex; padding:0; width:100% } .infofl-item1 { display: -webkit-flex; display: flex; flex-basis: 20%; } .infofl-item2 { display: -webkit-flex; display: flex; flex-basis: 20%; } .infofl-item3 { display: -webkit-flex; display: flex; flex-basis: 60%; } @media screen and (max-width:567px) { .infofl-item1 { display: block; } .infofl-item2 { display: block; } .infofl-item3 { display: block; } } --> </style> </head> <body> <div class="infofl"> <div class="infofl-item1" style="background-color : green;">フレックスアイテム1</div> <div class="infofl-item2" style="background-color : fuchsia;">フレックスアイテム2</div> <div class="infofl-item3" style="background-color : silver;">フレックスアイテム3</div> </div> </body> </html>
- ベストアンサー
- CSS
- PowerPoint2007で横書きテキストボックスの設定
こんにちは。PowerPoint2007で質問があります。 横書きテキストボックスの描画の初期設定はできるのでしょうか？ 横書きテキストボックスを選択し、文字を記入すると、 いつも右揃えになってしまい、左揃えで書き始めたいのです。 初期設定みたいな感じで文字の大きさ、揃え方など設定できますでしょうか？ よろしくお願い致します。
- ベストアンサー
- オフィス系ソフト
- AndroidブラウザでCSSのFlexbox
デスクトップ向けや比較的新しいスマートフォンブラウザでは、Flexboxを使用できますが、Android 4.0などの標準ブラウザでは用意されていないようです。こういったブラウザで垂直に並べて折り返すようなレイアウトを再現する方法、もしくはjQueryライブラリなどはありますでしょうか。 .flex { display:-ms-flexbox; display:-webkit-flex; display:-moz-box-flex; display:flexbox; -ms-flex-wrap:wrap; -webkit-flex-wrap:wrap; flex-wrap:wrap; -ms-flex-line-pack:start; -webkit-align-content: flex-start; align-content: flex-start; }
- ベストアンサー
- CSS
- Javascript初心者です助言おねがいします。
オセロを作成しています。 盤面の上にaからhも文字を表示して盤面の左に１から８の文字を表示させたいのですが、どうもうまくいきません。どうすればよいでしょうか。 Javascript // ボードの上に a から h までの文字を表示する const letters = document.createElement("div"); letters.classList.add("letters"); for (let i = 0; i < 8; i++) { const letter = document.createElement("div"); letter.classList.add("letter"); letter.textContent = String.fromCharCode(97 + i); letters.appendChild(letter); } // ボードの左に 1 から 8 までの数字を表示する const numbers = document.createElement("div"); numbers.classList.add("numbers"); for (let i = 1; i <= 8; i++) { const number = document.createElement("div"); number.classList.add("number"); number.textContent = i; numbers.appendChild(number); } board.appendChild(numbers); // 盤面を作成 for (let row = 0; row < 8; row++) { for (let col = 0; col < 8; col++) { const cell = document.createElement("div"); cell.classList.add("cell"); cell.setAttribute("data-row", row); cell.setAttribute("data-col", col); board.appendChild(cell); cells[`${row}-${col}`] = cell; } board.appendChild(letters); } css .letters { display: flex; justify-content: space-between; margin-bottom: 8px; } .letter { width: 12.5%; text-align: center; } .numbers { display: flex; flex-direction: column; justify-content: space-between; margin-right: 8px; } .number { height: 12.5%; text-align: center; }
- ベストアンサー
- JavaScript
- CSSで同一行で左右揃え
CSSによるレイアウトについてご質問です。 ブロック要素を左揃えまたは右揃えにする事は出来るのですが、 一つの行において、左揃えと右揃えをしたい場合は どのような方法があるのでしょうか。 例： [左テキスト 右テキスト]
- ベストアンサー
- CSS
お礼
そうですがリンクがありません。