flex布局
-
设置flex布局后float|claer|vertical-align属性将失效
-
父级对齐方式:justify-content|align-items
-
flex属性会将剩余的空间分配出去
父级属性
flex-direction:row;默认是从左往右排版
flex-direction:row-reverse;从右至左
flex-direction:column;从上至下排版 属性设置后:主轴会变为侧轴
flex-direction:column-reverse;从下至上排版 属性设置后:主轴会变为侧轴
水平对齐
注:justify-content是设置主轴上的对齐方式,默认是(row)
justify-content:flex-start;默认
justify-content:flex-end;伸缩项对齐尾部
justify-content:center;水平居中对齐
justify-content:space-between;贴边分配剩余空间
justify-content:space-around;均分剩余空间
垂直对齐
align-items:flex-start;默认
align-items:flex-end;对齐尾部
align-items:center;垂直居中对齐
align-items:baseline;基线对齐
align-items:stretch;(拉伸对齐,等高对齐) 注:不能设高度,否则无效
注:align-items会控制所有伸缩项垂直对齐方式
换行
注:默认不换行
flex-wrap:nowrap;默认不换行
flex-wrap:wrap;超出后换行
flex-wrap:wrap-reverse;超出换行后反转
换行后对齐
注:书写在伸缩容器中
align-content:flex-start;换行后往上边挤
align-content:flex-end;对齐底部
align-content:center;垂直居中对齐
align-content:space- round;伸缩项对齐两端
align-content:space-between;每个伸缩项左右会留一定的空间
子元素属性
垂直对齐
如果想要控制侧轴上单个列表项,则需要在为伸缩项单独设align-self属性,设置align-content后失效
align-self:flex-start;默认
align-self:flex-end;对齐尾部
align-self:center;垂直居中对齐
align-self:baseline;基线对齐
align-self:stretch;(拉伸对齐,等高对齐)
排序
每个伸缩项中都有一个order属性,默认为0;
order越大,伸缩项排在越后边
例:order:3;
div span:nth-child(1) {
order: 1;
}
伸缩项扩充
(扩充剩余)
每个伸缩项中都有一个flex-grow属性;默认为0;
flex-grow决定了当前伸缩项扩充的大小,
扩充公式:扩充值=伸缩项的份数*剩余空间的平均值
例:flex-gorw:4;(当前伸缩项扩充4份)
注:只有所有伸缩项总和小于容器时候才能生效
伸缩项缩小
每个伸缩项中都有一个flex-shrink属性;默认为1;
flex-shrink决定了当前伸缩项收缩的大小,
收缩公式:收缩宽度=溢出的宽度 * 当前项宽度 * 当前项份数/权重值(每一项份数*每一项宽度之和)
flex-shrink:0(不进行收缩)
注:只有所有伸缩项总和大于容器时候才能生效
伸缩项宽度
flex-basis:auto;默认值,被内容撑大
flex-basis:200px;设置当前伸缩项的宽度值为200px
具体值:flex-basis优先级高于width,低于max-width;
非是具体值:看谁设定的值更为具体
连写格式
flex:0 1 auto; 默认值(扩充 缩小 宽度)