- text-aligh:right
文章だけでなく、画像も右寄せ配置が可能。
ただ、本来は文章の右配置のためのもの
widthの指定がないimgには適用されない - display: flex;
justify-content: flex-end;
と記述。
widthの指定がないimgには適用されない - margin:0 0 0 auto; （もしくは、margin-left:auto; margin-right:0;）
天地のマージンを指定したくない場合にはかっこ内の方法を使用。
widthの指定がないimgには適用されない - ２と3が動作しない場合は、
display:flex;
margin:0 0 0 auto;
と記述。主にimgにwidthが指定がない場合の対処法。 - position: relative;
left:100%;
widthの指定がないimgにも使える
３の補足。なんで、うまくいかないのか・・・
今回3つめを試してみたので、メモ書き
元々flexを使って、「左、左、右」に要素を配置したいという事がきっかけでした。
flex自体が強いのか、text-alignもmargin-right:0も効かなかったので、じゃあmargin-left:autoにしてみたら？
と思い試したらうまくいきました。
サンプルコード
css
.right_css_flexbox {
margin-bottom: 10px;
padding: 15px 10px 0;
border-bottom: dotted 2px;
display: flex;
}
.rightitem{margin:0 0 0 auto;}
- 要素1（左）
- 要素2（左）
- 要素3（右）
5の補足
widthを指定しないimgで利用。position: relative;（相対的）を入れないと位置が指定できないみたい。
right:0にしたら変な位置にいってしまったので、leftを使用している