作者:2cz2x | 来源:互联网 | 2023-05-18 03:25
本文主要介绍关于css,css3,前端的知识点,对【Flex布局】和【flex布局居中】有兴趣的朋友可以看下由【m0_49471668】投稿的技术文章,希望该技术和经验能帮到你解决你所遇的flex相关
本文主要介绍关于css,css3,前端的知识点,对【Flex布局】和【flex布局居中】有兴趣的朋友可以看下由【m0_49471668】投稿的技术文章,希望该技术和经验能帮到你解决你所遇的flex相关技术问题。
flex布局居中
网页传统布局基于盒模型,依赖display属性,position属性,float属性。对于特殊布局很不方便,比如:垂直布局。W3C提出新的解决方案-Flex布局,可简便,完整,响应式实现各种页面布局,目前已经得到所有浏览器的支持。Flex布局作为未来布局的首选。
Flex布局是什么?
Flex是Flexible Box的缩写,意为弹性布局,为盒装模型提供最大的灵活性。
任何一个容器都可以指定为Flex布局,dispaly:flex;
行内元素也可使用Flex布局,display:inline-flex;
Webkit内核的浏览器,必须加上-webkit前缀,display:-webkit-flex;display:flex.
设置Flex布局后,子元素float、clear和vertical-align属性将失效
基本概念,采用Flex布局的元素,称为Flex容器,所有子元素自动成为容器成员,称为Flex项目。
Flex默认存在两根轴:水平的主轴和垂直的交叉轴。主轴的开始位置叫main start ,结束位置较mian end;交叉轴的开始位置较cross start,结束位置较cross end。项目默认沿主轴排列。单个项目占据的主轴空间较mian size,占据的交叉轴空间叫cross size.
容器的属性:flex-direction flex-wrap flex-flow justify-content align-items align-content
flex-direction属性决定主轴的方向flex-direction:row|row-reverse|column|columen-reverse
row:主轴为水平,起点在左端
row-reverse:主轴为水平,起点在右端
column:主轴为垂直,起点在上沿
column-reverse:主轴为垂直,起点在下沿
flex-wrap属性定义,如果一条轴线排不下,如何换行,flex-wrap:nowrap|wrap|wrap-reverse.nowrap,不换行;warp:换行,第一行在上方.wrap-reverse:换行,第一行在下方
flex-flow属性是flex-direction和flex-wrap属性的简写,默认row nowarp.flex-flow:
||
.justify-content属性定义了项目在主轴上的对齐方式,justify-content: flex-start | flex-end | center | space-betewwn | space-around.flex-start左对齐,flex-end右对齐,center居中,space-between两端对齐,项目之间的间隔都相等,space-around每个项目两侧间隔相等,项目之间间隔比项目与边框的间隔大一倍
本文《Flex布局》版权归m0_49471668所有,引用Flex布局需遵循CC 4.0 BY-SA版权协议。