1. 首页
  2. 笔记

flex 伸缩布局

1、display: flex; 

给父元素加,作用在子元素身上
伸缩布局(弹性布局):
特点:子元素在主轴方向永远不会超过父盒子,如果会超过,将会自适应缩小子元素的大小,用在移动端好做适配

2、关于主轴方向

row:默认值,默认 x 为主轴
column:以 y 轴为主轴  “flex-direction: column;修改主轴为 y 轴”;
row-reverse:以 x 轴为主轴,起点是反过来的   不常用
column-reverse:以 y 轴为主轴,起点也是倒过来的    不常用

3、子元素在主轴方向上的排列方式

justify-content是给父元素添加的,作用在子元素身上
flex-start:默认值,默认在主轴起点对齐
flex-end:在主轴的终点对齐
center:在主轴居中  “justify-content: center;
space-around:元素和元素之间有间距,起点和终点两边也有间距,并且两边间距是元素间距的一半
space-between:元素和元素之间有间距,两边没有间距(间距平均的)

4、统一设置子元素在副轴方向上的排列方式

stretch:默认值,如果不设置副轴上的大小,那么会铺满副轴
flex-start:在副轴起点
flex-end:在副轴终点
center:在副轴居中

5、flex-wrap:wrap;“换行”:默认值(nowrap)不换行

在主轴不够放的情况下,有几行就平分副轴的大小,下图可运用于此
flex 伸缩布局

6、弹性布局特点 

特点1:子元素在主轴方向上永远不会超过父盒子
特点2:如果没设置子元素在副轴上的大小,默认用的是父元素的副轴大小
特点3:如果没设置子元素在主轴方向上的大小,就是用内容撑开的大小
特点4:如果父元素用伸缩布局,相对于把所有子元素变成行内块元素

7、flex属性   flex:1;

是给子元素添加的属性
flex 设置的是元素在主轴方向的占比
计算的是永远是主轴方向剩下的大小
让子元素平分父元素主轴大小时,给所有子元素设置同样大小的 flex

8、align-self:单独设置某个元素在副轴的排列

是给子元素添加的属性
stretch:默认值,不设置大小就会铺满副轴
flex-start:在副轴的起点
flex-end:在副轴终点
center:在副轴居中

9、flex-basis

设置主轴方向上的大小,当主轴为x轴设置的是宽度,当主轴为y轴设置的是高度【不常用的】
 
 


联系我们

咨    询:点击这里给我发消息

邮    箱:cyt_web@163.com

小程序:AI前端