<style>
.container { display: flex; flex-direction: row; border: 1px solid black; } .item, .item2, .item3 { background: rebeccapurple; font-size: 3rem; padding: 2rem; color: white; } .item2 { background: skyblue; } .item3 { background: orangered; } </style> <div class="container"> <div class="item">1</div> <div class="item2">2</div> <div class="item3">3</div> </div> |
<style>
.container { border: 1px solid black; padding: 0.5rem; width: 500px; display: flex; flex-direction: row; } .item { width: 300px; text-align: center; color: white; font-size: 2rem; } .one { background: blue; } .two { background: red; } .three { background: green; } </style> <div class="container"> <div class="item one">1</div> <div class="item two">2</div> <div class="item three">3</div> </div> |
<style>
.container { border: 1px solid black; padding: 0.5rem; width: 120px; display: flex; flex-direction: row; flex-wrap: wrap; } .item { width: 300px; text-align: center; color: white; font-size: 2rem; } .one { background: blue; } .two { background: red; } .three { background: green; } </style> <div class="container"> <div class="item one">Item 1</div> <div class="item two">Item 2</div> <div class="item three">Item 3</div> </div> |
<style>
.container { border: 1px solid black; padding: 0.5rem; width: 500px; display: flex; flex-direction: row; } .item { width: 100px; text-align: center; color: white; font-size: 2rem; } .one { background: blue; } .two { background: red; } .three { background: green; } </style> <div class="container"> <div class="item one">1</div> <div class="item two">2</div> <div class="item three">3</div> </div> |
<style>
.container { border: 1px solid black; padding: 0.5rem; width: 500px; display: flex; flex-direction: row; } .item { width: 100px; text-align: center; color: white; font-size: 2rem; flex-grow: 1; } .one { background: blue; } .two { background: red; } .three { background: green; } </style> <div class="container"> <div class="item one">1</div> <div class="item two">2</div> <div class="item three">3</div> </div> |
<style>
.container { border: 1px solid black; padding: 0.5rem; width: 300px; display: flex; flex-direction: row; } .item { width: 200px; font-size: 2rem; color: white; text-align: center; } .one { background: blue; } .two { background: red; flex-shrink: 2; } .three { background: green; } </style> <div class="container"> <div class="item one">1</div> <div class="item two">2</div> <div class="item three">3</div> </div> |