Home
CSS
CSS Flexbox
Flex Container
Tryit: align-content: space-between
Run ❯
Get your
own
website
❯
Run Code
Ctrl+Alt+R
Save Code
Ctrl+Alt+A
Change Orientation
Ctrl+Alt+O
Change Theme
Ctrl+Alt+D
Go to Spaces
Ctrl+Alt+P
<!DOCTYPE html> <html> <head> <style> .container { display: flex; height: 400px; flex-wrap: wrap; align-content: space-between; overflow: scroll; background-color: DodgerBlue; } .container div { background-color: #f1f1f1; width: 100px; margin: 10px; padding: 10px; text-align: center; font-size: 30px; } </style> </head> <body> <h1>align-content: space-between</h1> <p>align-content: space-between; - The space between the flex lines are equal, but the first flex line is flush with the start of the container, and the last flex line is flush with the end of the container:</p> <div class="container"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> </div> </body> </html>
