height 50px | Justify-content: space-between | align-items: stretch
(default)
One Column
One Column
One Column
One Column
height 50px | Justify-content: space-around | align-items: stretch
(default)
One Column
One Column
One Column
One Column
height 50px | Justify-content: space-evenly | align-items: stretch
(default)
One Column
One Column
One Column
One Column
height 100px | Justify-content: flex-start | align-items: stretch
(default)
height 200px | Justify-content: flex-end | align-items: stretch
(default)
height 200px | Justify-content: center | align-items: stretch (default)
height 80px | Justify-content: space-between | align-items: center
height 80px | Justify-content: space-between | align-items: flex-start
height 80px | Justify-content: space-between | align-items: flex-start
height 80px | Justify-content: space-between | align-items: flex-start
height 200px | Justify-content: space-between | align-items: flex-start
some content comes
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid
dolorum adipisci delectus voluptate facere fugit eligendi temporibus
quis soluta! Voluptatum iste ipsum tempore voluptas reiciendis sunt
unde officia dolores blanditiis?
3
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint nihil
odio, ducimus officia nulla libero dolorem harum cumque delectus
sapiente quae perferendis, esse molestiae. Totam adipisci autem vitae
consequatur dolorem? Sunt nulla recusandae aut molestias incidunt,
officia vero temporibus, atque doloribus veniam, quos at sed illo modi
laboriosam tempora! Eius voluptates inventore natus fugit voluptatem
rerum laboriosam itaque sunt optio.
height 400px | Justify-content: space-between | align-items: center |
flex-grow: 1 | flex-basis: 25%
some content comes
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid
dolorum adipisci delectus voluptate facere fugit eligendi temporibus
quis soluta! Voluptatum iste ipsum tempore voluptas reiciendis sunt
unde officia dolores blanditiis?
3
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint nihil
odio, ducimus officia nulla libero dolorem harum cumque delectus
sapiente quae perferendis, esse molestiae. Totam adipisci autem vitae
consequatur dolorem? Sunt nulla recusandae aut molestias incidunt,
officia vero temporibus, atque doloribus veniam, quos at sed illo modi
laboriosam tempora! Eius voluptates inventore natus fugit voluptatem
rerum laboriosam itaque sunt optio.
height 80px | Justify-content: space-between | align-items: flex-start
height 80px | Justify-content: space-between | align-items: flex-start
flex-grow: 1
flex-grow: 1
3
4
height 80px | Justify-content: space-between | align-items: flex-start
flex-grow: 1
flex-grow: 1
flex-grow: 1
flex-grow: 1
height 80px | Justify-content: space-between | align-items: flex-start
flex-grow: 2
flex-grow: 1
flex-grow: 1
flex-grow: 1
height 80px | Justify-content: space-between | align-items: flex-start
flex-grow: 4
flex-grow: 1
flex-grow: 1
flex-grow: 1
height 80px | Justify-content: space-between | align-items: flex-start
flex-grow: 2
flex-grow: 2
flex-grow: 1
flex-grow: 1
height 80px | Justify-content: space-between | align-items: stretch
flex-grow: 2
flex-grow: 2
flex-grow: 1
flex-grow: 1
height 150px | Justify-content: space-between | align-items: stretch |
gap : 10px | overflow: auto
min-height: 50px | padding: 10px
min-height: 50px | padding: 10px
min-height: 50px | padding: 10px
min-height: 50px | padding: 10px
min-height: 50px | padding: 10px
min-height: 50px | padding: 10px
min-height: 50px | padding: 10px
min-height: 50px | padding: 10px
height 150px | Justify-content: flex-start | align-items: center | gap :
10px | flex-wrap: wrap
align-self: flex-start
min-height: 50px | padding: 10px
3
4
min-height: 80px | padding: 10px
6
7
align-self: flex-end
height 150px | Justify-content: flex-start | align-items: stretch | gap
: 10px | overflow: auto
height 150px | Justify-content: flex-start | align-items: stretch | gap
: 10px | overflow: auto
height 150px | Justify-content: flex-start | align-items: stretch | gap
: 10px | overflow: auto
xxx
display: flex; align-items: center
xxx
xxx
