练好弹性盒就得会练骰子
下面是一些弹性盒的属性
弹性盒: 控制子元素布局方式:display:flex 使当前父元素变成弹性盒控制子元素 主轴排列方向:(属性给父元素加) flex-direction:row 默认轴X轴 flex-direction:row-reverse 主轴横向的相反方向 flex-direction:column 改变主轴(纵轴为主轴) flex-direction:column-reverse 主轴纵向的相反方向 主轴对齐方式:(属性给父元素加) justify-content:flex-star 默认 justify-content:flex-end 主轴末端 justify-content:center 居中 justify-content:space-between 两端对齐头尾没有间距 justify-content:space-around 自动对齐中间有间距 侧轴对齐方式:(属性给父元素加) algin-items:flex-star 默认 algin-items:flex-end 末端 algin-items:center 居中 控制子元素换行(属性给父元素加) flex-wrap:wrap 换行中间没有间距 flex-wrap:wrap-reverse 反向排序换行中间有间距上面的元素到底下 flex-wrap:no-wrap 不换行 行与行之间的对齐方式 必须先添加flex-wrap:wrap; align-content:flex-star 顶端开始 align-content:flex-end 换行到末端中间没有间距 align-content:center 居中 align-content:space-around 居中状态间距自动分配 align-content:space-between 上贴上下贴下中间有间距 控制子元素侧轴对齐方式(属性给操作的子元素加) align-self:auto 默认值 align-self:center 侧轴居中 align-self:flex-end 侧轴末端 align-self:flex-star 侧轴顶端 align-self:strech 控制的子元素不能添加高度否则实现不了拉伸 align-self:order 数值(接受负值)加在子元素后 剩余空间自动分配 给需要添加元素的元素添加flex:1 会自动撑开其他元素保持本身 flex-shrink 当数值为0,不在收缩 flex-shrink:1 使宽度不在超出 设置单位 vw 设计图为640px:html{font-size:31.25vw} 设计图为750px:html{font-size:26.67} 设置像素px转为rem 量出的尺寸 / 100 = rem 没有引入插件➗200 移动端准备工作:(需要设置的公共样式) .clear_fix:after{content:'.';display:block;clear:both;height:0;overflow:hidden;visibility:hidden;} html,body{height:100%;} body{display:flex;flex-direction:column;} html{font-size:26.67vw;} *{box-sizing:border-box;}(怪异盒) 属性:order()像素越大越往后排(加在子元素上的) 属性:flex-shrink:0; 移动端主轴溢出
原文地址:https://www.cnblogs.com/home-/p/11589026.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。