CSSのdisplay:inlineとdisplay:flexの違い
display:inlineはブロック要素（divタグなど）を横並びに表示することができます。
それに対し、display:flexは、親要素の下の子要素の高さなどを統一することができます。
display:inlineのサンプルです。
<!DOCTYPE html> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>サンプル</title> <meta charset="utf-8"> </head> <body> <div style="display:inline;width:100rem;height:100rem;background-color:red">inlineは</div> <div style="display:inline;width:120rem;height:150rem;background-color:blue">width,heightが効かない</div> </body> </html>
display:flexのサンプルです。flexにすることにより、子要素の高さなどを統一することができます。
<!DOCTYPE html> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>サンプル</title> <meta charset="utf-8"> </head> <body> <div style="display:flex;width:12rem;height:15rem;"> <p style="background-color:red">あいう<br>えお<br></p> <p style="background-color:blue">あいう<br></p> <p style="background-color:green">あいう<br>えお<br>かきく<br>けこ<br>さし</p> </div> </body> </html>
KHI入社して退社。今はCONFRAGEで正社員です。関西で140-170/80～120万から受け付けております^^
得意技はJS(ES6),Java,AWSの大体のリソースです
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^
コメント