父元素常用属性
/*display: flex; 设置父元素是一个弹性盒 子元素会自动水平排列*/ <style> #box1{ width: 800px; height: 60px; border: 1px solid blue; display: flex; } #box1>div{ width: 200px; height: 60px; border: 1px solid green; </style>设置或者检索水平对齐方式justify-content
/*justify-content: flex-end; 项目位于容器的结尾*/ <style> display: flex; justify-content: flex-end; /*justify-content: flex-start; 默认项目位于容器的开头 */ /*justify-content: center; 项目位于容器的中间*/ /*justify-content: space-between; 项目中间平分空白 两边到头*/ /*justify-content: around; 项目中间两边都有空白*/ </style>设置或者检索水平垂直方式 align-items
/*align-items: center 水平垂直居中*/ <style> display: flex; justify-content: space-between; align-items: center;/*居中*/ align-items: stretch;/*默认项目被拉伸以适应容器* /*align-items: start; 开头*/ /* align-items: end; 结尾*/ </style>flex-wrap 让弹性盒元素在必要的时候拆行
<style> display: flex; flex-wrap:nowrap; /*默认不换行*/ min-width:960px;/*窗口最小缩到960px 不加可以一直缩小*/ /*flex-wrap:wrap;必要的时候换行换行*/ /*flex-wrap:wrap-reverse;必要的时候反着换行*/ </style>子元素常用属性
<style> /* 一个 数字，规定项目将相对于其他灵活的项目进行扩展的量 默认值为0 */ #box1>div:first-child{ flex-grow: 1; } #box1>div:nth-child(2){ flex-grow: 3; } #box1>div:last-child{ flex-grow: 1; } </style>