千锋web前端开发项目教程_1000集完全零基础入门HTML5+CSS3+JS到

弹性盒

• 含义
• 弹性盒是css3引入的一种新的布局方式，只对子元素起作用，只影响子元素的排列方式
• 名称
• 容器：父元素
• 项目：子元素
• 弹性盒的特点
• 当父元素变成弹性盒后，子元素默认横向显示
• 当父元素变成弹性盒后，子元素能够设置宽度和高度
• 当父元素变成弹性盒后，如果只有一个子元素，实现水平垂直居中可以给子元素添加margin:auto;
• 注意：
• 实现下面的容器属性和项目属性的前提是父元素必须display:flex;

容器属性

• flex-direction 调整主轴方向
• row 默认值，规定主轴方向为横向
• column 规定主轴方向为纵向
• row-reverse 规定主轴方向为横向，项目反向排列
• column-reverse 规定主轴方向为纵向，项目反向排列
• justify-content 调整项目在横轴的对齐方式
• flex-start 横轴的开始位置对齐，没有间距
• flex-end 横轴的结束位置对齐，没有间距
• center 横轴的中间位置对齐，没有间距
• space-between 横轴的两端对齐，两端无间距，中间间距平均分配
• space-around 横轴的间距环绕，两端间距是中间的一半
• space-evenly 横轴的间距环绕，间距一致
• align-items 调整项目在纵轴的对齐方式
• flex-start 纵轴的开始位置
• flex-end 纵轴的结束位置
• center 纵轴的中间位置
• stretch 拉伸，子元素不设高度有效