注意:父盒子(容器)设置flex布局之后,子元素(项目)的float,clear和vertical-align属性将失效
flex布局原理:通过给父盒子添加flex属性, 来控制子盒子的位置和排列方式
display: flex inline-flex
传统布局:兼容性好,布局繁琐,局限性,不能在移动端很好的布局
flex弹性布局:操作方便,布局极为简单,移动端应用广泛,PC端浏览器支持情况较差,IE 11或更低版本,不支持或部分支持
建议:PC端页面布局----传统布局
移动端或者不考虑兼容性问题的PC端页面布局----flex弹性布局
父项属性:
父项属性:
元素跟着主轴排列(row 默认水平x轴 侧轴为y轴)
调整主轴
flex-direction: column(垂直 y轴 侧轴变为x轴)
默认情况下,项目都排在一条线(轴线)上,
flex布局中默认子元素是不换行的,
如果装不下,会缩小子元素的宽度,放到父元素里
主轴上(子项)的换行 flex-wrap
以上两个属性的复合写法
主轴上对齐方式(确定好主轴是哪一个) justify-content
侧轴(当前轴的反向)
更多的是单行 align-items
多行侧轴 align-content
只能用于子项出现换行的情况(多行)单行没有效果
子项常见属性:
flex:number 定义子项目分配剩余空间,用flex表示占多少份数
如果子项没有宽度,父项宽度为剩余空间
如果有宽度,父项宽度 - 子项宽度所剩下的为剩余空间
子项上的优先级高于父元素上的设置(可覆盖align-items)
align-self: flex-start/end;控制子项自己在侧轴的排列方式
(允许单个项目与其他项目不一样的对齐方式,
默认值为auto,表示继承父元素的align-items属性,
如果没有父元素,等同于stretch)
order:-1/0/1定义子项排列顺序(前后顺序)
数值越小排列越靠前 默认为0