首页 > 技术文章 > Flex布局

rockyjs 2020-11-24 20:18 原文

flex-direction :设置元素的排列方向

row:从左向右排列

row-reverse:从右向左排列(从右边开始,顺序也会发生变化)

column 从上到下

column-resverse 从下到上(虽然是从下到上,只不过是里面的顺序发生了变化而已,并不是沿着底部开始)

 


 

flex-wrap:设置容器内的元素是否换行

nowrap:元素永远不换行,超出一定界限后进行里面的元素同比例的缩放

wrap:元素超过界限后自动换行到第二列

wrap-reverse 元素超过界限后逆向的进行换行


 

 

justify-content:设置元素在主轴上的对齐方式

flex-start:从开始处对齐

flex-end:从末尾处对齐,但是顺序是不会发生变化的,这是针对主轴是水平方向的(如果是垂直方向的时候,就是从容器的底部开始对齐,顺序也是不会发生变化的)

center:居中对齐

space-between:从空格的两边对齐(元素之间的距离是一直的)

space-around:从空格的中间处对齐,元素连边的缝隙都相等,开始和结尾的两个元素都不置左右两边的

 

 


 

align-items:设置元素在垂直轴上的对其方式

flex-start:在垂直轴上对起点(向上或者向左)对其

flex-end:在垂直轴上对起点(向下或者向右)对其,顺序不变

center:在容器中的居中位置对其

baseline:当一行中,文字有大小变化,使用之后保证文字在一条线上

stretch:当元素不进行设置高度的时候,而容器设置高度,元素的高度会自动成为容器的高度,也就是说会自动拉伸成容器的高度


 

align-content:当轴线超过1条的时候,flex容器可以把多条轴线视为元素,进行对齐方式排列

cengter:将轴线在左右中间的位置进行排列,居中对其

flex-content:将轴线向左对其

flex-end:将轴线向右对其 

steetch:在垂直为主轴的时候,当元素不设置高度的时候,元素会被水平轴拉伸,

space-between:在垂直轴为主轴的时候,垂直于左右两边对齐,中间为空

space-around:在垂直轴为主轴的时候,竖列方向上元素之间的空白相同,元素竖列方向不置顶


 

flex-direction和flex-wrap和justify-content和align-items和align-content都是设置在容器中,而不是设置在单个的元素上的

 



1.order:控制元素顺序:(设置元素排列默认为0,但是当数字有1,2,3则表示1在最前,3在最后)

eg:order:1;  order:2; order:3;


 

2.flex-grow:设置元素放大的比例(默认为0)

flex-grow:1,当一行中的元素没有占满这个一行的时候(给这些元素设置了宽度或者不设置也可以),这一行有空余的时候,当在这一行的某一个元素设置了flex-frow:1的时候,这一行多余的空白处会自动放入此元素中,使得这一行的元素占满本行


 

3.flex-shrink:设置元素缩小的比例(默认为0)

使用情况:当一行中的元素超出了界限之后,可以给某一个元素设置不进行缩放或者进行缩放


 

4.flex-basis:设置元素固定或自动空间的占比

在没有占满或者不沾满的前提下,进行元素的设置,到多少(具体的数字)

flex-basis:100upx;   flex-basis:300upx;


 

5.align-self:重写父级的属性,写在某一个元素上,改变父级给的样式,自己重新设置样式的意思

stretch flex-start flex-end  auto(默认) center baseline


 

align-self ,order,flex-grow,flex-basis,flex-shrink是对元素进行设置的

 

推荐阅读