时间:2021-05-08
为了做移动端的前端项目开始学flex啦~!用了flex,再也不用担心排版啦。一起来快速上手吧!
在css上使用flex的语法
display: flex;
flex-direction
(适用于父类容器元素)
flex-direction:row;
flex-direction:row-reverse;
flex-direction:column;
flex-direction:column-reverse;
flex-wrap
(适用于父类容器元素)
设置或检索伸缩盒对象的子元素超出父容器时是否换行。
flex-wrap: nowrap | wrap | wrap-reverse
flex-wrap:nowrap;
flex-wrap:wrap;
flex-wrap:wrap-reverse;
flex-flow
(适用于父类容器元素)
相当于direction和wrap的集合
flex-flow: row nowrap;
flex-flow:row-reverse wrap;
justify-content
(适用于父类容器元素)
设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式。
justifu-content: flex-start | flex-end | center | space-between | space-around
justify-content:flex-start;
justify-content:flex-end;
justify-content:center;
justify-content:space-between;
space-between:弹性盒子元素会平均地分布在行里。如果最左边的剩余空间是负数,或该行只有一个子元素,则该值等效于'flex-start'。在其它情况下,第一个元素的边界与行的主起始位置的边界对齐,同时最后一个元素的边界与行的主结束位置的边距对齐,而剩余的伸缩盒项目则平均分布,并确保两两之间的空白空间相等。
justify-content:space-around;
space-around:弹性盒子元素会平均地分布在行里,两端保留子元素与子元素之间间距大小的一半。如果最左边的剩余空间是负数,或该行只有一个伸缩盒项目,则该值等效于'center'。在其它情况下,伸缩盒项目则平均分布,并确保两两之间的空白空间相等,同时第一个元素前的空间以及最后一个元素后的空间为其他空白空间的一半。
align-items
(适用于父类容器元素)
设置或检索弹性盒子元素在侧轴(纵轴)方向上的对齐方式。
align-items: flex-start | flex-end | center | baseline | stretch
align-items:flex-start;
align-items:flex-end;
align-items:center;
align-items:baseline;
baseline:如弹性盒子元素的行内轴与侧轴为同一条,则该值与'flex-start'等效。其它情况下,该值将参与基线对齐。
align-items:strecth;
stretch:如果指定侧轴大小的属性值为'auto',则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸,但同时会遵照'min/max-width/height'属性的限制。
align-content
(适用于父类容器元素)
设置或检索弹性盒堆叠伸缩行的对齐方式。
align-content: flex-start | flex-end | center | space-between | space-around | stretch
align-content:flex-start;
align-content:flex-end;
align-content:center;
align-content:space-between;
align-content:space-around;
align-content:strecth;
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文为大家继续分享CSS3弹性盒模型开发笔记第二篇,之前一篇以及为大家引入了CSS3弹性盒模型的相关介绍,点击查看:CSS3弹性盒模型开发笔记(一)box-fl
本文介绍了CSS3弹性盒模型,供大家参考,大家亦可以结合CSS3弹性盒模型开发笔记(一)、CSS3弹性盒模型开发笔记(二)进行学习,具体内容如下box-pack
CSS3中的box-sizing(content-box与border-box)CSS3中的box-sizing属性允许以特定的方式来指定盒模型,有两种方式:c
display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构、css实现的布局方式。经典的一个布局应用就是布局的垂直
弹性盒模型布局网页。弹性盒布局模型是CSS3规范中提出的一种新的布局方式。使用该模型,可以很轻松地创建自适应浏览器窗口的布局,可以解决浮动定位等方法难以解决的问