flex布局

补充

  1. 设置flex布局后float|claer|vertical-align属性将失效

  2. 父级对齐方式:justify-content|align-items

  3. 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; 默认值(扩充 缩小 宽度)

flex:1; === flex: 1 1 0%;(奇淫技巧)

posted @ 2020-11-04 15:05  良荣十贰  阅读(103)  评论(0)    收藏  举报
努力加载评论中...
点击右上角即可分享
微信分享提示