Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <div class="flex-container">
- <div class="flex-item1"></div>
- <div class="flex-item2"></div>
- <div class="flex-item3"></div>
- </div>
- * {
- margin: 0;
- }
- .flex-container {
- display: flex;
- height: 300px;
- flex-wrap: wrap;
- border: 1px solid blue;
- background-color: gray;
- align-content: flex-start;
- }
- .flex-item1 {
- width: 100%;
- height: 10px;
- background: yellow;
- }
- .flex-item2 {
- width: 100%;
- height: 10px;
- border: 1px solid red;
- background: red;
- }
- .flex-item3 {
- width: 100%;
- border: 3px solid purple;
- background: purple;
- align-self: stretch;
- height: auto;
- }
- /* another attempt for the third child div */
- /* .flex-item3{
- width: 100%;
- border: 3px solid purple;
- background: purple;
- flex-direction: row;
- flex-grow: 1;
- } */
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement