[] 1. We first need a container to contain the item
and set the container to display: flex,
such as :
.container{
display:flex
}
Or we could set the display as inline-flex
then the background container would fit the size of items inside
[] 2. Then we set the property of flex in container:
-flex-direction, the default is row, we can also set it as column
.container{
display: flex;
flex-direction: column;
}
-flex-wrap: if we'll auto-change the row when the content is more than the width
default is non-wrap, we could set is as flex-wrap
.container{
display: flex;
flex-wrap: wrap;
}
-flex-flow is the combination of flex-direction and flex-wrap:
.container{
display: flex;
flex-flow: row-reverse wrap;
}
We also have column-reverse, wrap-reverse for the order
-justify-content:(where the location of items start)
.container{
display: flex;
justify-content: flex-end;
}
the default is flex-start, we can also let the items locate in the center by:
justify-content:center
Or locate all items evenly in the space of container
.container{
display: flex;
justify-content: space-between;
}
space-around is also leave space between item and parent container, while space-between not
-align-items (how the items align with each other)
the default is align-items:stretch
.container{
display: flex;
justify-content: space-around;
height: 300px;
}
when we set the height of container to 300px, the items inside is also stretch to 300px height
We can also use align-items:flex-start, then we'll not get stretched items
We'll get items aligns at the top of the container
.container{
display: flex;
justify-content: space-around;
height: 300px;
align-items: center;
}
For align-items:center, we'll get the items aligns in the middle of container with 300px
and not stretched
For align-items:flex-end, the items would align at the bottom of container
align-contents has same logic as align-items
[] 3. Last we set the property of items
-order, we can set the order of flex items by set values (...-1,0,1... from left to right)
the default order values for items are 0
.item-1{
order: 1;
}
.item-6{
order: -1;
}
In this case, item6 is at the most left and item1 is at most right while other items keeps usual order
-> Item 6, 2, 3, 4, 5, 1
| : means the property around this symbol is Exclusive(排他)，
can not appear at the same time with other properties
[]: means rule range
Thus all the followings are correct:
flex: auto;
flex: none;
/ 3个值 /
flex: 1 1 100px;
let's check the symbols inside []:
? : ? around flex-shrink means, flex-shrink is not obligatory
we can have value of flex-shrink, or we can omit it
such as flex: flex-grow: 1 flex-basis: 100px
|| : means OR, which means we could use the conditions around ||
are both correct. flex-grow+flex-shrink OR flex-basis
-Initial values:
flex:initial equals flex: 0 1 auto.
here flex-growth is 0, flex-shrink is 1, flex-basis is auto
which means,
0:- the item would not enlarge itself to occupy spare space
1:- the item would decrease itself to fit in the small space
auto: the size would automatically adjust based on itself and container
-So if we [only] set display: flex in container:
the items would not occupy the spare space when the items are small
than contaniner;
the items would shrink itself to fit in the small container
the items would occupy the spare space when the container is too large
and shrink to fit in the container when the container is small
-None values:
flex:none equals flex: 0 0 auto
the items would not enlarge or shrink when the container size
doesn't fit
In this case, when the container's size is smaller than items
the items would exceed and overflow to the outside of container
Flex Layout review: https://juejin.cn/post/6844904105362587661
[] 1. We first need a container to contain the item and set the container to display: flex, such as : .container{ display:flex }
[] 2. Then we set the property of flex in container:
[] 3. Last we set the property of items
flex property for items: https://www.zhangxinxu.com/wordpress/2019/12/css-flex-deep/
flex has flex-basis,flex-grow,flex-shrink
-flex-basis is the fixed unit of space -flex-grow is how to distribute spare space -flex-shrink is how to distribute space when space is not enough
-Let's check the rule of flex:
flex: none | auto | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
| : means the property around this symbol is Exclusive(排他)， can not appear at the same time with other properties
[]: means rule range
Thus all the followings are correct:
flex: auto; flex: none; / 3个值 / flex: 1 1 100px;
let's check the symbols inside []:
? : ? around flex-shrink means, flex-shrink is not obligatory we can have value of flex-shrink, or we can omit it such as flex: flex-grow: 1 flex-basis: 100px
|| : means OR, which means we could use the conditions around || are both correct. flex-grow+flex-shrink OR flex-basis
For example:
flex: auto; flex: none; / 1个值，flex-grow / flex: 1; / 1个值，flex-basis / flex: 100px; / 2个值，flex-grow和flex-basis / flex: 1 100px; / 2个值，flex-grow和flex-shrink / flex: 1 1; / 3个值 / flex: 1 1 100px;
Setting values for flex item
-Initial values: flex:initial equals flex: 0 1 auto. here flex-growth is 0, flex-shrink is 1, flex-basis is auto
which means,
0:- the item would not enlarge itself to occupy spare space 1:- the item would decrease itself to fit in the small space auto: the size would automatically adjust based on itself and container
-So if we [only] set display: flex in container: the items would not occupy the spare space when the items are small than contaniner; the items would shrink itself to fit in the small container
-Auto values: flex:auto equals flex: 1 1 auto
-So if we also add flex:auto in items:
.container { display: flex; } .container item { flex: auto; }
-None values: flex:none equals flex: 0 0 auto