关于弹性布局的一些知识点

首先,弹性布局分为两部分。

1.给父元素添加的语法:

(1) display : flex;,让他的子元素变成弹性布局。

(2)flex-direction: row; 布局的排列方向 (主轴排列方向),取值有:

row 默认值,显示为行。方向为当前文档水平流方向,默认情况下是从左往右。
row-reverse 显示为行。但方向和row属性值是反的。
column 显示为列。
column-reverse 显示为列。但方向和column属性值是反的。

(3)flex-wrap : nowrap; 是否进行换行处理。取值有:

nowrap; 默认值,不换行处理
wrap; 换行处理
wrap-reverse; 反向换行

(4) justify-content ; 属性决定了主轴方向上子项的对齐和分布方式,取值有:

flex-start : 子项都去起始位置对齐。
flex-end : 子项都去结束位置对齐。
center : 子项都去中心位置对齐。
space-between : 表现为两端对齐。between是中间的意思,意思是多余的空白间距只在元素中间区域分配。
space-around : around是环绕的意思,意思是每个flex子项两侧都环绕互不干扰的等宽的空白间距,最终视觉上边缘两侧的空白只有中间空白宽度一半。
space-evenly : evenly是匀称、平等的意思。也就是视觉上,每个flex子项两侧空白间距完全相等。

(5)align-items : 每一行中的子元素上下对齐方式,取值有:

flex-start;
center;
flex-end;
(6)align-content : 跟justify-content相反的操作。侧轴的对齐方式。(最少需要两行才能看出效果,因为他是多行的一个上下对齐方式)
默认:多行下,有几行就会把容器划分为几部分,默认就是stretch拉伸的。
值跟justify-content取值是相同的。

2.给子元素添加的语法:

(1)order : 排序。

(2)flex-grow : 扩展 ( 想看到扩展的效果,必须有空隙 ),取值有:

0 : 默认值 , 不去扩展
1 : 去扩展 , 会把空白区域全部沾满
子元素会按照设置的比例值来分配空隙,如果比例值总和小于1,那么会有空隙,如果比例值总和大于等于1,那么就没有空隙。

(3)flex-shrink : 收缩有:

正常默认值是1
0表示不收缩,.5收缩小一些,2收缩大一些。(大小是跟正常缩放1进行比较的)

(4)flex-basis : 跟flex-shrink/flex-grow很像。

flex-shrink/flex-grow是设置一个比例值,flex-basis是设置一个具体值。

(5) algin-self: 跟align-items操作很像,区别就是只是针对某一个子项。

下面写一些常用的:

display : flex;
flex-direction;
justify-content;
align-items;
flex;

声明:该文章系转载,转载该文章的目的在于更广泛的传递信息,并不代表本网站赞同其观点,文章内容仅供参考。

本站是一个个人学习和交流平台,网站上部分文章为网站管理员和网友从相关媒体转载而来,并不用于任何商业目的,内容为作者个人观点, 并不代表本网站赞同其观点和对其真实性负责。

我们已经尽可能的对作者和来源进行了通告,但是可能由于能力有限或疏忽,导致作者和来源有误,亦可能您并不期望您的作品在我们的网站上发布。我们为这些问题向您致歉,如果您在我站上发现此类问题,请及时联系我们,我们将根据您的要求,立即更正或者删除有关内容。本站拥有对此声明的最终解释权。