1. flex-direction
改變主軸方向?yàn)椋核絩ow(默認(rèn)) 或者 垂直column
并且設(shè)置item元素的排序方式start->end(默認(rèn)) 或者 end->start
- row
- row-reverse
- column
- column-reverse
<style>
.container{
/* 改變主軸方向 */
display: flex;
flex-direction: row;
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;
}
</style>
direction.png
2. justify-content
改變item元素在主軸main(水平)上的對齊方式
- flex-start
- flex-center
- flex-end
- space-between
- space-evently
- space-around
<style>
.container{
display: flex;
/* 改變item在主軸上的對齊方式 */
justify-content: flex-start;
justify-content: flex-end;
justify-content: center;
justify-content: space-between;
justify-content: space-evenly;
justify-content: space-around;
}
</style>
justify_content.png
3. align-items
改變item元素在在交叉軸cross(垂直)上的對齊方式
- stretch
- baseline
- flex-start
- center
- flex-end
<style>
.container{
display: flex;
flex-direction: row;
justify-content: flex-start;
/* 改變item在交叉軸(垂直)cross的對齊方式 */
align-items: stretch;
align-items: flex-start;
align-items: center;
align-items: flex-end;
align-items: baseline;
}
.item{
width: 100px;
/* 不設(shè)置item高度 */
/* height: 100px; */
color: #fff;
text-align: center;
}
</style>
align_items.png
