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

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

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

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

Flex

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

CSS

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

Q&A

解決済

2回答

6389閲覧

要素を縦に並べたものを右寄せしたいです

mono_chrome18

総合スコア14

CSS3

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

Flex

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

CSS

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

0グッド

0クリップ

投稿2021/05/09 02:32

編集2021/05/09 02:33

イメージ説明

要素の部分を縦並びのまま右寄せにしたい(青の右辺にくっつけたい。ただ三つ目の白丸の1行目の要素は白丸のなかで真ん中のままにしたい。)

HTML

1<div class="wrapper"> 2 <p>要素</p> 3 <p>要素要素</p> 4 <p>要素<br>要素</p> 5</div>

CSS

1.wrapper { 2 color: white; 3 background-color: blue; 4 height: 550px; 5 max-width: 400px; 6 margin: 0 auto; 7 background-color: blue; 8 text-align: center; 9 10 11 // 縦に並べる 12 display: flex; 13 flex-direction: column; 14 align-items: center; //centerで真ん中にはなるがstartにしてもendにしても右寄せにはならない 15} 16 17.wrapper p { 18 display: inline-block; 19 font-size: 16px; 20 font-weight: bold; 21 margin: 10px 0; 22 padding: 5px 5px; 23 border: solid 1.5px; 24 border-radius: 30px; 25 box-sizing: border-box; 26 line-height: 20px; 27}

「flex-direction: column;」を使って縦並びにはできました。
align-itemsを使って、startにすると左寄せ、centerにすると中央寄せにもできました。
しかし右寄せにはできません。
valueをendするのかとも思ったのですが、startと同じく真ん中寄せになってしまいます。
flexで縦並びで右寄せにする方法はないのでしょうか。

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

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

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

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

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

guest

回答2

0

自己解決

申し訳ありません、自己解決いたしました、、

「align-items」を「flex-end」にしただけで右端になりました。
「end」とは別に「flex-end」というものがあるんですね。

MozillaのサイトのCSSを一見した際は、valueは「stretch」「center」「start」「end」しかないと思ってましたが、ページの下の方を見ると他にもいろいろなvalueがあることに気づきました。

不注意でした。

ご回答いただいた方、ありがとうございました。感謝いたします。

投稿2021/05/09 03:16

mono_chrome18

総合スコア14

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

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

0

ちょっと手を入れました。

HTML

1<div class="wrapper"> 2 <div class="wrapper-2"> 3 <p>要素</p> 4 <p>要素要素</p> 5 <p>要素<br>要素</p> 6 </div> 7</div>

CSS

1.wrapper { 2 color: white; 3 background-color: blue; 4 height: 550px; 5 max-width: 400px; 6 margin: 0 auto; 7 background-color: blue; 8 display: flex; 9 justify-content: flex-end; 10} 11 12.wrapper-2 { 13 display: flex; 14 flex-direction: column; 15 align-items: center; 16} 17 18.wrapper-2 p { 19 display: inline-block; 20 font-size: 16px; 21 font-weight: bold; 22 margin: 10px 0; 23 padding: 5px 5px; 24 border: solid 1.5px; 25 border-radius: 30px; 26 box-sizing: border-box; 27 line-height: 20px; 28}

投稿2021/05/09 02:54

itagagaki

総合スコア8402

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問