弹性盒子:C3提供的一种新的布局方式
x轴,y轴,主轴,侧轴 主轴: 元素排列的方向 侧轴: 另一个方向是侧轴 容器: 父元素 项目: 子元素 先定义弹性盒子: display:flex;
1.主轴排列方向 flex-direction
属性值: row 横向排列(默认值) row-reverse 反转横向排列 column 纵向排列 column-reverse 反转纵向排列
2.主轴对齐方式 justify-content
属性值: flex-start 顶端对齐 flex-end 末端对齐 space-between 两端对齐 space-around 两端环绕对齐 center 居中 space-evenly 完全的平均分配
3.侧轴对齐方式 align items
center 居中 flex-start 顶部对齐 flex-end 底部对齐 baseline: 基线对齐(大多情况与flex-start效果一致) stretch:拉伸以撑满父元素高度(默认值)
4.设置项目是否换行: flex-wrap
warp: 换行 nowarp: 不换行(默认值) warp-reverse 反转换行
5.align-content(行与行之间的对齐方式)
flex-start 起始位置对齐,没有间距 flex-end 末端对齐,没有间距 center 居中对齐,没有间距 space-between 两端对齐,有间距 space-around 两端环绕对齐,有间距 stretch 拉伸撑满父元素高度(默认值)
- 项目属性
- 单独设置某个项目的侧轴对齐方式, align-self
flex-start 顶端对齐
flrex-end 末端对齐
center 居中对齐
stretch 拉伸
auto: 继承父元素(默认值)
- 2.设置项目的排列顺序 order
属性值: 数值 值越大,越往后排列,默认为0,支持负数
- 3.flex:1; 设置盒模型项目如何分配空间
复合属性: flex-grow 一个数字，规定项目将相对于其他灵活的项目进行扩展的量flex-shrink 一个数字，规定项目将相对于其他灵活的项目进行收缩的量flex-basis 项目的长度 flex-shrink:0 设置项目宽高不被拉伸
