flex 布局
父级元素属性:
justify-content 子元素水平排列方式
center: 居中
space-between: 两端对齐
space-around: 子元素拉手分布
flex-start: 居左
flex-end: 居右
align-items 子元素垂直排列
center: 居中
flex-end: 底部
flex-start: 开始
align-content 多行的时候垂直排列
center 居中
flex-direction 排列方式
row 横向排列
row-reverse 横向翻过排列
coloumn 纵向排列
coloumn 纵向翻过排列
flex-wrap: 子元素是否在一行显示
no-wrap 不换行
wrap 换行
子元素在划分父元素宽度,先刨除固定宽度
flex-grow:1 定义子元素放大比例
父元素外层包裹元素属性:
position:fixed;
left:0;
bottom:0;
width:100%;
非flex布局方式:实现上下左右居中
父元素: position:relative;
height:500px;
width:500px;
子元素: position:absolute;
width:100px;
height:100px;
left:50%;
top:50%;
(margin-left:-50px;
margin-top:-50px;) === transfrom:translate(-50%,50%)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。