Fichas
f
Fichas del conjunto (28)
- 1increase all items in containers height manually to 500px.container{height: 500px;}
- 2stretch the container.container{display: flex;}
- 3reverse row order in container.contiainer{ flex-direction: row-reverse; }
- 4display items in columns.container{ flex-direction: column; }
- 5reverse column order.container{ flex-direction: column-reverse; }
- 6prevent items from falling out of container.container{flex-wrap: wrap}
- 7right align items in orderjustify-content: flex-end;
- 8center align items in order.container
justify-content: center; - 9left align items in order.container{
justify-content: flex-start; - 10add space around items in container.container{
justify-content: space-between; - 11add space inside items in container.container{
justify-content: space-around;
- 12add margin space to items.item{
margin-right: auto;
- 13what are all of the margins available?margin-top: auto;
margin-left: auto;
margin-down: auto;
margin-right: auto;
margin: auto; - 14what is flex grow?all items depending on their content and the content of other items around them take up even space
- 15how do you grow items? (make them take up the free space equally and proportionately).item{
flex-grow: 1; - 16by default do flex box items take up the whole space?no the containers do
- 17by default do the display:flex containers grow to take up the free space?yes
- 18does display: inline-flex; containers grow to take up the free space?no
- 19when there's only one flex-grow 1; item what happensit grows and takes up all of the free space
- 20when there's two flex-grow:1; items what happens?if content is the same they grow to take up the free space equally
- 21what happens when there's a flex-grow:1; and a flex-grow:3;?3+1 = 4 so the total space taken up will be 4 flex-grow:3 will take up 3 times as much space as flex-grow:1;
- 22what is flex basis?items with flex basis will maintain their flex grow property until screen shrinks to below certain point
- 23how do you apply flex basis?flex-basis: _ Px;
- 24flex basis is applied to container? or items?items
- 25short hand for flex grow 2 and flex basis 350px?flex: 2 350px;
- 26place container items vertically in center.container{
align-items:center;} - 27place container items at the bottom.container{
align-items:flex-end; - 28place container items at the top.container{
align-items:flex-start;
Información
- Descripción
- Fichas sobre f, creado por M B el 12/06/2018.
- Creado por
- M B
- Visitas
- 0
- Etiquetas
- Valoración