⼩程序-----Flex布局（如何安排居中）
⼩程序-----Flex布局
中display表⽰布局显⽰，有两种形式⼀个是block，⼀个是flex。
block，代表⼀种盒⼦，表达⼀种占整个宽的⼀个长条
flex，（flexiable灵活的）代表灵活的表达⽅式
对于block，简单的理解为盒⼦布局
⽽flex是灵活性de
⼀般来说：
1、display:flex/column
说明将布局⽅式变成灵活性的
2、flex-direction：row/column/row-reverse/column-reverse
主轴布局的⽅式，默认的是横轴row，我们所⽤的还有column 纵向 （reverse分别表⽰相反⽅向 例：本来横轴是从左到右的，reverse后则是从右边到左边）
3、justufy-content：center/flex-start/flex-end/space-around/space-between
设置内容排布,
center：垂直居中
flex-start: ⾸段布局
flex-end: 尾端布局
space-around ：四周
space-between：间隔
对应的⽅式⾃⾏去打印，输出即可看出差别
4、align-items:stretch/flex-start/flex-end/center/baseline
stretch 填充整个容器(默认值)
flex布局对齐方式flex-start 起点对齐
flex-end 终点对齐
center 居中对齐
baseline 以⼦元素的第⼀⾏⽂字对齐
5、flex-wrap:wrap/nowrap/wrap-reverse
wrap；换⾏
nowrap：不换⾏
wrap-reverse : 倒序换⾏

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