flex布局

  

      

      

  

.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