13. Netcetera | 13
.box1{
flex: 1;
}
.box2{
flex: 1;
}
.box3{
flex: 1;
}
Flex-grow
The ability for a flex item to
grow if necessary and dictates
the amount of available space
an item should take.
20. Netcetera | 20
.box1{
order: 1;
}
.box2{
order: 2;
}
.box3{
order: 3;
}
Order
Controls the order in which
items appear visually in a flex
container
26. Netcetera | 26
.container{
justify-content: flex-start; /* default */
}
Justify-content
Controls the order in which items appear visually in a
flex container (depending on the main axis, one row)
flex-start
flex-end
center
space-between
Space-around
32. Netcetera | 32
.container{
align-items: stretch; /* default */
}
Align-items
Controls the order in which items appear visually in a
flex container (depending on the cross axis, one row)
stretch
flex-start
flex-end
center
baseline
37. Netcetera | 37
.container{
align-content: stretch; /* default */
}
Align-content
Controls the order in which items appear visually in a
flex container (depending on the cross axis, wrapped)
flex-start
flex-end
center
Stretch
Space-between
Space-around
44. Netcetera | 44
.box2{
align-self: flex-end;
}
Align-self
Controls the order of a single child item (depending
on the cross axis)
auto
flex-start
flex-end
center
stretch
baseline
64. Netcetera | 64
THANK YOU!
any other questions?
aleksandra.hristov@netcetera.com
@alexhris
* Some of the graphics for Flexbox are picked up from Andrew Clarke’s workshop “CSS3 for responsive design”, 2015
Hinweis der Redaktion
You can leave out components depending on the screen size
You can leave out components depending on the screen size
You can leave out components depending on the screen size
You can leave out components depending on the screen size