弹性盒模型

弹性盒模型

弹性盒模型是一种新的布局模式。页面需要适应不同的屏幕大小以及设备类型

弹性盒模型使用步骤

• 定义弹性盒 display：flex；
• 确定主轴 flex-direction:row / column / row-reverse / column-reverse
• 主轴对齐 justify-content flex-start / flex-end / center / space-around / space-between
• 是否换行 flex-wrap:wrap / nowrap
• 交叉轴对齐 换行 ： align-content：flex-start / flex-end / center / space-around / space-between 不换行：align-items : flex-start / flex-end / center

盒子之间“|” 的写法

.nav ul:nth-child(2) li + li:before {
content:"|";
}
表示nav里面第二个ul里面的从第二个li开始的前面都有一个“|”

弹性布局需要注意的地方

1. 弹性布局需要写在父元素上面，不能写给子元素，也不要写给爷爷
2. 弹性布局会改变子元素的元素类型