<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>폭이 서로 다른 flex 레이아웃 만들기</title> <style> .container { display: flex; align-items: center; } .item { height: 30vh; background-color: #fea; border: 2px solid #cdf; border-radius: 3px; text-align: center; margin: 10px; } </style> </head> <body> <div class="container"> <div class="item" style="flex: 1">flex: 1</div> <div class="item" style="flex: 2">flex: 2</div> <div class="item" style="flex: 3">flex: 3</div> </div> </body> </html>