CSS3弹性盒子

本文详细介绍了Flexbox布局模型,包括其定义、作用及关键属性如flex-direction、justify-content、align-items、flex-wrap、align-content和align-self。通过这些属性,开发者可以灵活控制元素在不同屏幕尺寸和设备上的排列、对齐和空白空间分布,实现响应式布局。此外,还讲解了order和flex属性,用于控制元素的顺序和弹性伸缩。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

目录

一、定义

二、作用

三、flex-direction

作用:

属性值:

row(默认):

row-reverse :

column :

 column-reverse:

四、justify-content

作用:

属性:

flex-start     

默认,顶端对齐,例,主轴为X轴时

 flex-end             

center                

space-between  

space-around    

五、align-items   

作用:

属性值:

flex-start       

flex-end        

center          

baseline        

stretch          

六、flex-wrap

作用:

属性值

nowrap             

wrapflex            

wrap-reverse    

七、align-content   

作用:

属性值:

flex-start           

flex-end            

center              

space-between  

space-around   

八、align-self

作用:

属性值:

auto          

stretch      

center       

flex-start    

flex-end     

九、order

作用:

十、flex   

属性值:

flex-grow       

flex-shrink     

flex-basis      

flex:1            

复合式写法   


一、定义

        弹性盒子是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间,我们在一个盒子样式中设置以下代码,就能让盒子变为弹性盒子,从而控制子元素

display:flex

二、作用

让子元素都按照【主轴排列】,也能让里面所有的子元素都能设置宽度并且在里面只有设置margin:auto就能使元素垂直水平居中等等

三、flex-direction

作用:

改变主轴

属性值:

row(默认):

默认x轴为主轴,横向排列,例

                             
row-reverse

反转横向排列,例

column :

y轴为主轴,纵向排列,例

 column-reverse:

 反转纵向排列,从下往上排,最后一项排在最上面 

 

四、justify-content

作用:

元素在主轴上的对齐方式

属性:


flex-start     

默认,顶端对齐,例,主轴为X轴时

 

 
flex-end             

末端对齐,例,主轴为X轴时


center                

居中对齐,例,主轴为X轴时

 


space-between  

两端对齐,中间自动分配,例,主轴为X轴时

 


space-around    

自动分配距离,例,主轴为X轴时

 

五、align-items   

作用:

元素在侧轴上的对齐方式

属性值:


flex-start       

弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴起始边界。顶部显示,例,主轴为X轴时


flex-end        

弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴结束边界。例,主轴为X轴时

 


center          

弹性盒子元素在该行的侧轴(纵轴)上居中放置。(如果该行的尺寸小于弹性盒子元素的尺寸,则会向两个方向溢出相同的长度)。例,主轴为X轴时

 


baseline        

如弹性盒子元素的行内轴与侧轴为同一条,则该值与'flex-start'等效。其它情况下,该值将参与基线对齐。 当子元素被padding撑开时,不与flex-start等效。例,主轴为X轴时


stretch          

默认值,拉伸,在没有设置子元素时,将高拉伸为父元素高。例,主轴为X轴时

 

六、flex-wrap

作用:

控制是否换行

属性值


nowrap             

默认值,flex容器为单行。该情况下flex子项可能会溢出容器


wrapflex            

容器为多行。该情况下flex子项溢出的部分会被放置到新行,子项内部会发生断行


wrap-reverse    

反转 wrap 排列。


tip:当父元素有高度时,换行自带行间距

七、align-content   

作用:

调整行与行之间的对齐方式,但是只针对在有多行的情况下

属性值:


flex-start           

没有行间距


flex-end            

底对齐没有行间距


center              

 居中没有行间距


space-between  

两端对齐,中间自动分配


space-around   

自动分配距离

八、align-self

作用:

写在子元素上面,控制某一个子元素在侧轴的对齐方式

属性值:


auto          

默认值。


stretch      

元素被拉伸以适应容器


center       

元素位于容器的中心


flex-start    

元素位于容器的开头


flex-end     

元素位于容器的结尾

九、order

作用:

排列顺序 ---  排序优先级,数字越大越往后排,默认为0,支持负数。

十、flex   

复合属性

属性值:


flex-grow       

拉伸,默认值为0,子元素宽高加起来小于父元素宽高,要有剩余空间,才会有效果,拉伸是宽是高跟主轴有关


flex-shrink     

元素宽高超出父元素宽高才有效。为0时,无变化


flex-basis      

项目长度


flex:1            

将弹性盒主轴上剩余的空间全部分配给当前元素


复合式写法   

 flex:0 1 auto; 参数分别代表flex-growflex-shrinkflex-basis

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

对卦卦上心

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值