弹性布局：flex的学习-css实现⽔平垂直居中
弹性布局可以理解为将盒⼦分为若⼲块，通过css对弹性布局的⼏个属性的控制，将盒中盒移动到合适位置。这是七娃对弹性布局flex的初步认知！
flex的属性：flex-direction、flex-wrap、justify-content、align-items、align-content。
使⽤⽅法：⽗级盒⼦
display:flex;
1.flex-direction，盒⼦内元素排列与⽅向
flex-direction:row; /*⽔平⽅向从左向右排列*/
css设置文字垂直居中
flex-direction:row-reverse;/*⽔平⽅向从右向左排列*/
flex-direction:column;/*垂直⽅向从上到下排列*/
2.flex-wrap，盒⼦内元素换⾏
flex-wrap: nowrap; /*(默认)不换⾏，⾃动等⽐伸缩*/
flex-wrap: wrap; /*换⾏，⼀个元素⼀⾏*/
3.justify-content， ⽔平⽅向的对齐⽅式
justify-content : center;/*⽔平居中排列*/
justify-content : flex-start;/*偏头对齐：由左到右、上到下*/
justify-content : flex-end;/*偏尾对齐：由右到左、下到上*/
justify-content : space-between;/*平均分布*/
justify-content : space-around;/*等间距平均分布*/
4.align-items ，垂直⽅向的对齐⽅式
align-items : flex-start;/*顶部对齐*/
align-items : flex-end; /*底部对齐*/
align-items : center;/*垂直⽅向居中对齐*/
5.align-content，会设置⾃由盒内部各个项⽬在垂直⽅向排列⽅式
align-content:strecth;/*默认，会拉伸容器内每个项⽬占⽤的空间，填充⽅式为给每个项⽬下⽅增加空⽩。默认从顶部开始排列。*/
align-content:flex-start;/*顺序堆叠*/
align-content: flex-end; /*倒序堆叠*/
align-content: center; /*中⼼堆叠*/
align-content: space-between;/*从头尾开始平均分布*/
align-content: space-around;/*平均分布，距离头尾有间距*/
缺点：使⽤弹性布局之后，⼦元素的float、clear和vertical-align属性将失效，浮动将不再⽣效了！
实例教程：盒中盒实现⽔平垂直居中，将以下css写⼊⽗级css即可！；
display: flex;/*开启弹性布局*/ justify-content: center;/*横轴居中*/ align-items: center;/*垂直居中*/

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。