<body>
<div class="parent">
<div class="child child1"></div>
<div class="child child2"></div>
</div>
</body>
.child{
width:100px;
height: 50px;
border:1px solid red;
}
.parent {
border:1px solid black;
display: flex
}
只需要在父元素上加一个flex就可以进行flex布局
image.png
flex-container的6个属性
flex-direction
flex-direction: row;
按照行进行排序
image.png
flex-direction: row-reverse
按照行的相反序列进行排序
image.png
flex-direction: column
按照列进行排序
image.png
flex-wrap
换行
flex-wrap: nowrap；//不换行
flex-wrap:wrap; //换行
flex-flow
上面两个的简写
flex-flow: row wrap;
justify-content
justify-content: space-between
image.png
空间块里面的空间
justify-content: space-around
image.png
空间包围在item里面
justify-content: flex-start;
image.png
item在start的开始排列
justify-content: flex-end;
image.png
item在end的地方开始排列
justify-content: center;
image.png
item在中间开始排列
align-items
align-items:stretch
image.png
每个item伸展成最高的那一个元素
align-items:flex-start
image.png
从侧轴的最开始的地方开始
align-items:flex-end
image.png
从侧轴最结尾的地方开始
align-items:center
image.png
从侧轴的中间开始排序
flex-item 的属性
flex-grow
.child:nth-child(1){
flex-grow: 1;
}
.child:nth-child(2){
flex-grow: 2
}
.child:nth-child(3){
flex-grow: 3;
}
剩余的空间按照1:2:3的比例进行排列
flex-shrink
.child:nth-child(1){
flex-shrink: 1
}
.child:nth-child(2){
flex-shrink: 2
}
.child:nth-child(3){
flex-shrink: 3;
}
image.png
剩下的item按照1:2:3的比例进行收缩
flex-basis
.child:nth-child(1){
flex-basis: 300px;
}
.child:nth-child(2){
}
.child:nth-child(3){
}
image.png
默认 大小为 300px
flex
flex-grow flex-shrink flex-basis的缩写
.child:nth-child(1){
flex: 1 2 100px;
}
.child:nth-child(2){
}
.child:nth-child(3){
}
order
.child:nth-child(1){
flex: 1 2 100px;
order: 3;
}
.child:nth-child(2){
order: 2;
}
.child:nth-child(3){
order: 1;
}
image.png
通过oreder来改变顺序
align-self
.child:nth-child(1){
}
.child:nth-child(2){
}
.child:nth-child(3){
align-self:center;
}
image.png
