Set the cross axis item alignment with align-items. For example, if the value of flex-direction is row, set vertical alignment. Below is an example with flex-direction: row.
The default is stretch, which stretches to fit the height of the container.
<!doctype html><html lang= “ko” > <head > <meta charset= “utf-8” > <title >CSS</title > <style > body { box-sizing: border-box; margin: 0px; font-family: Consolas, monospace; } .jb-container { height: 100vh; background-color: #01579b; display: flex; align-items: stretch; } .jb-item { padding: 10px; } .jb-item:nth-child(1) { background-color: #e3f2fd; } .jb-item:nth-child(2) { background-color: #bbdefb; font-size: 2em; } .jb-item:nth-child(3) { background-color: #90caf9; font-size: 3em; } </style > </head > <body > <div class= “jb-container” > <div class= “jb-item” >Item 1</div > <div class= “jb-item” >Item 2</div > <div class= “jb-item” >Item 3</div > </div > </body ></html >
#css
