代码:
.parent{
display:flex;
justify-content:flex-start;
align-items:flex-start;
}
默认左右横向排列,效果:
屏幕快照 2017-05-14 下午4.23.31.png代码:
.parent{
display:flex;
justify-content:center;
}
主轴方向居中,效果:
屏幕快照 2017-05-14 下午4.25.38.png代码:
.parent{
display:flex;
justify-content:flex-end;
}
主轴方向靠右排列,效果:
屏幕快照 2017-05-14 下午4.28.49.png代码:
.parent{
display:flex;
align-items:center;
}
侧轴居中效果:
屏幕快照 2017-05-14 下午4.30.45.png
代码:
.parent{
display:flex;
align-items:flex-end;
}
侧轴排列至最后:
屏幕快照 2017-05-14 下午4.32.43.png代码:
.parent{
display:flex;
justify-content:center;
align-items:center;
}
主轴和侧轴居中效果:
屏幕快照 2017-05-14 下午4.34.58.png代码:
.parent{
display:flex;
justify-content:center;
align-items:flex-end;
}
主轴居中,侧轴最后效果:
代码:
.parent{
display:flex;
justify-content:flex-end;
align-items:flex-end;
}
主轴和侧轴都靠后效果:
屏幕快照 2017-05-14 下午4.41.04.png
网友评论