Created
March 5, 2019 02:27
-
-
Save teethnclaws/013bebe85a28704591eec3912a171bb5 to your computer and use it in GitHub Desktop.
JS Bin align-content // source https://jsbin.com/zugemav
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta name="description" content="align-content"> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <title>JS Bin</title> | |
| <style id="jsbin-css"> | |
| .container{ | |
| display: flex; | |
| height: 100px; | |
| flex-wrap: wrap; | |
| } | |
| .one{ | |
| align-content: flex-start; | |
| } | |
| .two{ | |
| align-content: flex-end; | |
| } | |
| .three{ | |
| align-content: center; | |
| } | |
| .four{ | |
| /* default */ | |
| align-content: stretch; | |
| } | |
| .five{ | |
| align-content: space-between; | |
| } | |
| .six{ | |
| align-content: space-around; | |
| } | |
| /*basic styling*/ | |
| .container{ | |
| border: 4px solid #61585E; | |
| margin-bottom: 10px; | |
| } | |
| /*all flex items*/ | |
| .container > *{ | |
| background-color: #EA3556; | |
| padding: 5px; | |
| color: white; | |
| width: 100px; | |
| } | |
| .container > *:nth-child(even){ | |
| background-color: #49AEC0; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- BEGIN LESSON CODE --> | |
| <div class="container one"> | |
| <div>1</div> | |
| <div>2</div> | |
| <div>3</div> | |
| <div>4</div> | |
| <div>5</div> | |
| </div> | |
| <div class="container two"> | |
| <div>1</div> | |
| <div>2</div> | |
| <div>3</div> | |
| <div>4</div> | |
| <div>5</div> | |
| </div> | |
| <div class="container three"> | |
| <div>1</div> | |
| <div>2</div> | |
| <div>3</div> | |
| <div>4</div> | |
| <div>5</div> | |
| </div> | |
| <div class="container four"> | |
| <div>1</div> | |
| <div>2</div> | |
| <div>3</div> | |
| <div>4</div> | |
| <div>5</div> | |
| </div> | |
| <div class="container five"> | |
| <div>1</div> | |
| <div>2</div> | |
| <div>3</div> | |
| <div>4</div> | |
| <div>5</div> | |
| </div> | |
| <div class="container six"> | |
| <div>1</div> | |
| <div>2</div> | |
| <div>3</div> | |
| <div>4</div> | |
| <div>5</div> | |
| </div> | |
| <!-- END LESSON CODE --> | |
| <script id="jsbin-source-css" type="text/css">.container{ | |
| display: flex; | |
| height: 100px; | |
| flex-wrap: wrap; | |
| } | |
| .one{ | |
| align-content: flex-start; | |
| } | |
| .two{ | |
| align-content: flex-end; | |
| } | |
| .three{ | |
| align-content: center; | |
| } | |
| .four{ | |
| /* default */ | |
| align-content: stretch; | |
| } | |
| .five{ | |
| align-content: space-between; | |
| } | |
| .six{ | |
| align-content: space-around; | |
| } | |
| /*basic styling*/ | |
| .container{ | |
| border: 4px solid #61585E; | |
| margin-bottom: 10px; | |
| } | |
| /*all flex items*/ | |
| .container > *{ | |
| background-color: #EA3556; | |
| padding: 5px; | |
| color: white; | |
| width: 100px; | |
| } | |
| .container > *:nth-child(even){ | |
| background-color: #49AEC0; | |
| } | |
| </script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .container{ | |
| display: flex; | |
| height: 100px; | |
| flex-wrap: wrap; | |
| } | |
| .one{ | |
| align-content: flex-start; | |
| } | |
| .two{ | |
| align-content: flex-end; | |
| } | |
| .three{ | |
| align-content: center; | |
| } | |
| .four{ | |
| /* default */ | |
| align-content: stretch; | |
| } | |
| .five{ | |
| align-content: space-between; | |
| } | |
| .six{ | |
| align-content: space-around; | |
| } | |
| /*basic styling*/ | |
| .container{ | |
| border: 4px solid #61585E; | |
| margin-bottom: 10px; | |
| } | |
| /*all flex items*/ | |
| .container > *{ | |
| background-color: #EA3556; | |
| padding: 5px; | |
| color: white; | |
| width: 100px; | |
| } | |
| .container > *:nth-child(even){ | |
| background-color: #49AEC0; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
flex-start: lines packed to the start of the container
flex-end: lines packed to the end of the container
center: lines packed to the center of the container
space-between: lines evenly distributed; the first line is at the start of the container while the last one is at the end
space-around: lines evenly distributed with equal space around each line
stretch (default): lines stretch to take up the remaining space