弹性:元素可以拉大填充额外的空间
收缩,适应更小的空间------------------移动 相应式布局
间隙的平均分配。垂直居中,自动占据剩余位置排列分布
可以水平布局、可以垂直布局
两个组成部分:外层弹性容器(flex container) 内层子元素弹性元素(flex item---也可以作为容器进行下一层的嵌套)
flex container的属性有:
display:flex 让当前盒子成为弹性容器-里面的一些元素自动成为弹性容器
flex-direction 设置按照水平布局还是垂直布局 主轴辅轴
flex-warp 设置元素多的时候是否可以换行:默认不换行 压缩 wrap
flex-flow 设置所有元素的排布方式 包括(flex-direction flex-warp )
对齐的方式:
如果前面设置flex-direction为row水平,则主轴为左start 右end
justify-content :元素在主轴上的对齐方式为start 就是左对齐end center
space-between两端对齐 space-around拉手对齐(两边一个手臂的距离 中间两个手臂的距离)
如果前面设置flex-direction为row水平,则辅轴为上start 下end
align-items:元素在辅轴上的对齐方式
stretch 拉伸当前元素在辅轴上的高度 完整占据弹性容器的高度--如果设置弹性元素高度 此属性值不起作用
align-content:设置多行元素在容器中的整体对齐方式(当行不起左营)
flex item的属性
flex-grow:每个元素怎样拉大,拉大的比例1容器里面的几等分的几份
flex-shrink 每个元素怎样缩小,0 不压缩 1压缩比例是1
flex-basis 基础的宽度:元素在主轴上的默认的尺寸,优先级高于width
flex:组合flex-grow:flex-shrink flex-basis
order 每个元素设定先后的顺序:默认是按照在html中的顺序。值越小越靠前显示
align-self 每个元素单独的设置自己的对齐方式 单个元素在辅轴上的对齐方式