flex:
第一步使用display:flex; 或inline-flex 那么这个元素就成了容器,也叫弹性盒子
特点:他子元素会自动成为容器成员我们可以称他们为项目item
注意:定义成flex以后,容器里面,浮动会失效float clear vertical
优点:flex也叫弹性布局,可以简便完整响应式实现各种页面布局
属性:flex-wrap: 属性定义,如果一条轴线排不下,如何换行。
值: wrap 换行
nowrap 不换行
wrap-reverse 能换行,但是倒叙
flex-direction: 是用来设置容器的主轴方向的,子元素对齐是要参照主轴方向的
值: row 从左向右
row-reverse 从右向左
column 从上向下
column-reverse 从下向上
flex-flow: 可以同时设置主轴方向和换行属性
也是flex-wrap和flex-direction属性的简写形式(结合体)
值: column wrap 从上向下换行
column-reverse wrap 从下向上换行
column-reverse nowrap 从下向上不换行
justify-content: 设置在主轴上如何对齐
值:flex-start 向主轴起点对齐
flex-end 向主轴结束点对齐
center 向主轴中心点对齐(居中)
space-around 平均分配多余空间
space-between 两边先贴边,中间平均分配
align-items: 设置在侧轴如何对齐
值: flex-start 向侧轴起点对齐
flex-end 向侧轴结束点对齐
center 向侧轴中心点对齐
baseline 以文字的基线对齐
align-content:属性定义了多根轴线的对齐方式
如果项目只有一根轴线,该属性不起作用。
值:flex-start 向侧轴的起点对齐。
flex-end 向侧轴结束点对齐
center 向侧轴中心点对齐
space-between 两边先贴边,中间平均分配
space-around 平均分配多余空间
项目属性:
order: 默认值0 数值越小,越靠前,越大越向后
如果值相同,安装默认位置
flex-grow:默认值是0当父元素有多余空间的时候不会放大 数字越大所分配额度越多
flex-shrink:默认值 是1 父元素空间不够的时候会缩小,数组越大 缩小的程度越多
flex-basis: 用于设置项目在容器中所占的空间,类似于width
放大 缩小 尺寸
flex: 0 1 2
align-self: 默认值 为auto 单独设置自己在交叉轴如何对齐