关于基本布局之——Flex布局

Flex布局

1.Flex为"Flexible Box"的简称,即为弹性布局,可作用于任何容器上。给div这类块状元素元素设置display:flex或者给span这类内联元素设置display:inline-flex,flex布局即创建!

其中,直接设置display:flex或者display:inline-flex的元素称为flex容器,里面的子元素称为flex子项。

(flex和inline-flex区别在于,inline-flex容器为inline特性,因此可以和图片文字一行显示;flex容器保持块状特性,宽度默认100%,不和内联元素一行显示。)

2.Flex布局的属性分为两种,即作用域容器上和作用于flex子项上:

作用在flex容器上
作用在flex子项上
  • flex-direction
  • flex-wrap  
  • flex-flow
  • justify-content
  • align-items
  • align-content
  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self

无论作用在flex容器上,还是作用在flex子项,都是控制的flex子项的呈现,只是前者控制的是整体,后者控制的是个体。

子元素的floatclearvertical-align属性将失效。

作用在flex容器上的CSS属性

1. flex-direction :决定主轴的方向(即项目的排列方向)语法如下:

flex-direction: row | row-reverse | column | column-reverse;
  • row:默认值,显示为行。方向为当前文档水平流方向,默认情况下是从左往右。如果当前水平文档流方向是rtl(如设置direction:rtl),则从右往左。
  • row-reverse:显示为行。但方向和row属性值是反的。
  • column:显示为列。
  • column-reverse:显示为列。但方向和column属性值是反的。

2.flex-warp:用来控制子项整体单行显示还是换行显示,如果换行,则下面一行是否反方向显示。

flex-warp: nowarp | warp | warp-reserve;
  • nowarp:默认值,表示单行显示,不换行。
  • warp:宽度不足换行显示。
  • warp-reserve:宽度不足换行显示,但是是从下往上开始,也就是原本换行在下面的子项现在跑到上面。

3.flex-flow:属性是flex-directionflex-wrap的缩写,表示flex布局的flow流动特性,语法如下:

flex-flow: (flex-direction) || (flex-warp);

当多属性同时使用的时候,使用空格分隔。

4.justify-contet:属性决定了主轴方向的子项的对齐和分布方式。

justify-contet: flex-start | flex-end | center | space-between | space-around | space-evenly;
  • flex-start:默认值。与文档流方向相关。默认表现为左对齐。
  • flex-end:与文档流方向相反,默认表现为从右向左。
  • center:表现为居中对齐。
  • space-between:表现为两端对齐,多余的空白间距只在元素中间区域分配。
  • space-around:表现为每个flex子项两侧都环绕互不干扰的等宽的空白间距,最终视觉上边缘两侧的空白只有中间空白宽度一半。
  • space-evenly:表现为每个flex子项之间的两侧空白间距完全相等。

5.align-items:属性决定了交叉轴方向的子项的对齐和分布方式

align-items: stretch | flex-start | flex-end | center | baseline;
  • stretch:(默认值)flex子项拉伸。如果未设置高度或设为auto,将占满整个容器的高度。
  • flex-start:与文档流方向相关。默认表现为容器顶部对齐。
  • flex-end:与文档流方向相关,默认表现为容器底部对齐。
  • center:表现为与主轴垂直居中对齐。
  • baseline:表现为所有flex子项都相对于flex容器的第一行文字基线对齐。

6.align-content:属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。

align-content: stretch | flex-start | flex-end | center | space-between | space-around | space-evenly;

作用在flex子项上的CSS属性

1. order:可以通过设置order改变某一个flex子项的排序位置。(order越小顺序越靠前)

order:integer; (整数值,默认为 0)
 

2.flex-grow:属性定义项目的放大比例,默认为0;扩展的就是flex子项所占据的宽度,扩展所侵占的空间就是除去元素外的剩余的空白间隙。

flex-grow:number; (默认为 0

3.flex-shrink:属性定义了项目的缩小比例,默认为1;shrink是“收缩”的意思,flex-shrink主要处理当flex容器空间不足时候,单个元素的收缩比例。

flex-shrink:number; (数值,默认为 1)

例子:现在只给第2个flex子项b元素设置flex:shrink

  • 默认为1;则3个子项1:1:1收缩
     
  • 如果为0,则该子项不收缩,按原定大小显示;则b不收缩,剩下2个flex子项等比例收缩;
  • 如果为2,则完全收缩尺寸比例分配为1:2:1,b子项收缩的宽度b最大,是其他元素的2倍。

4.flex-basis:定义了在分配剩余空间之前元素的默认大小。(它可以设为跟widthheight属性一样的值(比如100px),则项目将占据固定空间。)

flex-basisi:<length> | auto; (数值,默认为auto)
 
  • 默认值是auto,就是自动。有设置width则占据空间就是width,没有设置就按内容宽度来。
  • 如果同时设置widthflex-basis,就渲染表现来看,会忽略width。以下例子设置width:100px, flex-basis:150px;最终显示为150px;
  • 选择最后一个flex-basis:240px会发现flex子项的宽度并不是240px,因为此时剩余空间不足,3个子项1:1:1收缩的缘故。

5.flex:属性是flex-growflex-shrinkflex-basis的缩写。(默认值为 0 1 auto)

flex: none | auto | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] 
其中第2和第3个参数(flex-shrink和flex-basis)是可选的。默认值为0 1 auto。

该属性有两个快捷值:auto (1 1 auto) 和 none (0 0 auto)。

6.align-self:指控制单独某一个flex子项的垂直对齐方式,写在flex容器上的这个align-items属性,后面是items,有个s,表示子项们,是全体;这里是self,单独一个个体。其他区别不大,语法几乎一样。

align-self: auto | flex-start | flex-end | center | baseline | stretch;

唯一区别就是align-self多了个auto(默认值),表示继承自flex容器的align-items属性值。其他属性值含义一模一样。

参考来自:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

       https://www.zhangxinxu.com/wordpress/2018/10/display-flex-css3/

猜你喜欢

转载自www.cnblogs.com/JessieXie/p/12121352.html
今日推荐