当前位置: 首页 > Web前端 > HTML

CSS3-FlexibleBoxModelFlexibleBoxLayout

时间:2023-04-02 21:15:47 HTML

参考链接UsingCSS3FlexibleBoxeslayout菜鸟教程链接:http://www.runoob.com/css3/cs...什么是FlexibleBox?Flexible是可扩展的意思,Box是盒子的意思,可以理解为一种新型的盒子模型---伸缩盒子模型。由CSS3规范提出,这是在原来大家非常熟悉的block、inline-block、inline基础上扩展的新一代布局模式。浏览器支持伸缩框的基本概念。伸缩箱最大的特点或者说优势就是兼顾了当今高房价与人民群众日益增长的住房需求之间的矛盾。房屋面积有限,但我们的伸缩箱能做到最合理。最有效地将房子分配给每个人。面积太大,给大佬多加分;如果面积小,就让大家挤进去,少拿分。总之,不允许任何人露宿街头(溢出)!既然提到了房子和住户的关系,那么住户的布置自然要遵循一定的方向。对于块级元素,布局的延伸方向是自上而下的,也就是垂直的。对于行内元素,布局延伸方向是从左到右,即水平方向。至于伸缩箱,它的方向是可变的,可以垂直或水平延伸,这取决于您的设置。弹性盒模型的基本术语弹性盒模型的思想与普通的块级元素和内联元素的布局思想有很大的不同。它介绍了一些新的概念和术语。我们来看下图:flexcontainerflexBoxcontainer这个就是用来划分的房子。这是一座神奇的房子。为了神奇,声明display属性为flex或inline-flex~Flexitem房子里的住户都会有。您应得的住房面积。为了便于说明,我们用代码来说明。项目1

项目2
item3
CSS设置为:.container{display:flex;宽度:300px;高度:100px;...}这里显示:inline-flex;似乎工作。对于灵活的item元素,我们需要提前给它们安排好住房面积比例,我们就用最简单健康的1:1:1吧~我们在flex属性中声明比例:.item-1{flex:1;...}.item-2{flex:1;...}.item-3{flex:1;...}我们的大房子被完美地分成了三个隔间,三个家庭平摊房租!如果有人想住更大的房子,我们可以直接改变弹性比例:.item-1{flex:1;...}.item-2{flex:1;...}.item-3{弹性:2;...}AxesAxes我们可以看到图中有两个轴,标示了主轴和副轴(垂直于主轴)。但是,实际上哪一个是主轴并不确定,由我们来定义它。flex-direction这个属性指定哪个轴是主轴。justify-content这个属性设置了灵活项在主轴方向的排列方式,后面会解释。align-items这个属性和上面的justify-content相反,表示灵活的item在副轴上的排列。align-self此属性指定特定的弹性项目元素如何在辅助轴上布局。在元素上设置此属性会覆盖其align-items属性。也就是说这个属性会让一个元素更加个性化,不会走不寻常的路~flex-direction当我们不想沿着默认的方向划分房子的时候,我们可以将flex-direction属性的值改为改变主轴和方向。该属性的默认值为行;.container{flex:行反转;...}顾名思义,这会颠倒灵活项的排列方向:当该属性设置为column时,主轴和副轴会颠倒,元素的排列方向也会随之改变:.container{弹性方向:列;...}至于flex:column-reverse的含义,不用我多说了~justify-contents有时候,大家住的比邻而居。一点缝隙都没有,连过道都没有,私密性也得不到保障,那会很不舒服吧?这时候我们可以改变分配政策,不再是按比例分配,而是配额分配,每个人的面积是确定的。多余的房屋面积被改造成公共区域。.item{宽度:80px;...}...设置完width属性后,记得去掉flex属性的声明,否则flex属性的效果还是会覆盖width的~同时如果没有设置width属性的话如果指定,元素的宽度会显示为内容的宽度,即当flexitem内没有内容时不会渲染,其表现与display:none;相同。这时候可以通过在容器上声明justify-content属性来安排灵活项的位置:.content{justify-content:flex-start|弹性端|中心|间隔|space-around;}align-items这个item属性会改变元素在次轴上的排列方式。对于本例,元素在次轴方向的高度表示为height:100%;。设置align-items属性后,其高度表现会发生变化。.content{对齐项目:flex-start|弹性端|中心|基线|stretch;}说到这里,flexitem的具体表现其实是可以想象的,如果想象不到,自己试试吧~命令在flexitem上声明这个属性,可以沿着flex-direction排列在从小到大的顺序,与HTML结构的顺序无关。例如:.item-1{order:3;...}.item-2{订单:1;...}.item-3{顺序:2;...}flex-wrap的默认值是nowrap,意思是忽略灵活项的宽度,无论你想要多大的住房面积,都按照flex属性进行分配,不允许换行。.container{flex-wrap:nowrap|包装|wrap-reverse}.item{width:150px;}flex-grow,flex-shrink和flex-basis上面说的flex属性其实就是这三个属性form的简写。这三个属性是相似的,它们都表示项目之间空间分配的相对比例。不同之处在于:1.flex-grow属性:该属性值是flex项目相对于其他flex项目占用的空间(声明flex相关属性的项目的比例)。2.flex-shrink属性:这个flex项目相对于其他flex项目的收缩率,也就是说当flex-shrink:3;时,这个项目所占的空间是其他项目的1/3。3.flex-basis属性:该属性值是item占用的空间占容器空间的百分比。注意:对于flex-basis属性,当所有item的属性值之和<=100%时,会严格按照百分比值进行渲染。当属性值之和>100%时,元素不会溢出,但每对占用的空间遵循相互的百分比。也就是说,当有三个flex项目并且flex-basis值为50%时,行为与所有三个项目都是flex:1;时的行为相同。FlexibleBoxes布局模式在响应式开发中特别有用。对于不同的终端,设置元素之间的空间分配关系将成为一件非常简单的事情。灵活的盒子布局和响应式布局中流行的流体布局哪个更好,或者可以结合使用,这需要开发者根据项目需求来决定。

猜你喜欢