html5——伸缩布局

基本概念

1、主轴：Flex容器的主轴主要用来配置Flex项目，默认是水平方向

2、侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向的

3、方向：默认主轴从左向右，侧轴默认从上到下

4、主轴和侧轴并不是固定不变的，通过flex-direction可以互换

display: flex;//给父盒子加flex属性，父盒子将具有伸缩属性，子盒子默认平铺

效果特征

1、设置了伸缩属性，在没有设置宽度的情况下是100%

2、设置了伸缩属性，行内元素会转化成块级元素，可以设置宽高，独占一行

主轴方向

flex-direction: row;//水平方向（默认）
flex-direction: row-reverse;//水平翻转
flex-direction: column;//垂直方向
flex-direction: column-reverse;//垂直翻转

对齐方式

1、justify-content：设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。

justify-content: flex-start;//从主轴开始的方向对齐
justify-content: flex-end;//从主轴结束的方向对齐
justify-content: center;//居中对齐
justify-content: space-around;//父盒子中平分
justify-content: space-between;//两端对齐平分

2、align-items：设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。

align-items:flex-start;//从侧轴开始的方向对齐
align-items:flex-end;//从侧轴结束的方向对齐
align-items:center;//居中
align-items:baseline;//基线对齐，默认同flex-start
align-items:stretch;//拉伸

参考地址：地址