1、css3弹性盒子
CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。
2、弹性盒子属性值
display:flex或inline-flex
justify-content(主轴方向的对齐方式)
- flex-start默认值 左对齐。
- flex-end 右对齐。
- center 居中。
- space-between 每两个项目之间间距相等。
- space-around 每个项目两侧距离相等。
- space-evenly 每个项目之间的间距相等。
align-items(交叉轴对齐方式)
- stretch默认值。项目被拉伸以适应容器。
- center 项目位于容器的中心。
- flex-start 项目位于容器的开头。
- flex-end 项目位于容器的结尾。
- baseline 项目位于容器的基线上。
flex-direction(修改主轴