CSS3 弹性布局

html-css012

CSS3 弹性布局,第1张

flex 是 flexible box 的缩写,意为“弹性布局”,用来为盒状模型提供最大的灵活性。能够高效方便的控制元素的对齐、排列,自动计算布局内元素的尺寸,无论元素的尺寸是固定的还是动态的,控制元素在页面的布局方向。

弹性盒子由弹性容器(flex container)和弹性子元素(flex item)组成。

弹性容器设置属性 display:flex

一、容器属性

flex-flow 复合属性,是 flex-direction 和 flex-wrap 的简写形式。 默认值:flex-flow: row nowrap

⑴ flex-direction 子元素排列方向

flex-direction: row从左到右

flex-direction: row-reverse从右到左

flex-direction: column从上到下

flex-direction: column-reverse从下到上

⑵ flex-wrap 子元素换行方式

flex-wrap: nowrap不换行

flex-wrap:wrap换行

flex-wrap: wrap-reverse反转 wrap 排列,行颠倒

2 justify-content 子元素沿主轴对齐方式

justify-content: flex-start

justify-content: space-between

3 align-items 子元素在交叉轴上对齐方式

align-items: center垂直方向居中

align-items:flex-start垂直方向的顶部/交叉轴的起点对齐

align-items: flex-end垂直方向的底部/交叉轴的终点对齐

align-items: baseline项目的第一行的文字的基线对齐

align-items: stretch默认值,如果项目未设置高度或设为auto,将占满整个容器的高度

二、子元素属性(写在子元素下)

align-self 用于设置弹性子元素自身在侧轴(纵轴)方向上的对齐方式。允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。

align-items: center

align-items: flex-start

align-items: flex-end

align-items: baseline

align-items: stretch

order 定义子元素的排列顺序。数值越小,排列越靠前,默认为order: 0,可以为负值。

flex-grow 定义子元素的扩展比率,主要作用:分配剩余空间。负值无效。

flex-grow: 0默认值,即如果存在剩余空间,也不放大。

flex-grow: 1如果存在剩余空间,放大 ,等分剩余空间。

flex-shrink 定义子元素的收缩比率,值越大,按比例缩的就越小。

flex-shrink: 1默认值,即如果空间不足,缩小。

flex-shrink: 0不缩小。

flex-basis 定义元素的默认基准值。

设置了flex-basis,width就不起作用;同时存在的时候,优先使用flex-basis。

如果容器的宽度太小,子元素排列不下,设置的flex-basis的宽度会自动缩小,直到占满容器。

链接:https://juejin.cn/post/7038088241437736991

用了一段时间的quasar了,它里面封装的 css 类确实很好用,但是在帮助文档中,描述得零零散散,不方便使用,遂总结一下。

text-[ h1~6, subtitle1, subtitle2, body1~2, caption, overline ]

text-weight-[ thin, light, regular, medium, bold, bolder ]

text-[ right, left, center, justify, bold, italic, no-wrap, stike, uppercase, lowercase, captitalize ]

text-[颜色名称]:text-teal

primary(淡蓝),secondary(淡绿),accent(淡紫),dark(黑色),positive(深绿),negative(红色),Info(亮蓝),warning(黄色)

每种颜色由浅到深分为 1-14 级

red, pink, purple, deep-purple, indigo(靛蓝), blue, light-blue, cyan, teal(青色), green, light-green, lime, yellow, amber, orange, deep-orange, brown, grey, blue-grey

在应用程序的 *.vue 文件中,可以使用 $primary , $red-1 等颜色。

|

|

|

|

|

|

子元素可以覆盖父元素上指定的对齐方式 。 这允许对单个Flex项进行对齐。

可用值有: self-start , self-center , self-baseline , self-end , self-stretch

与 flex 值使用类似

Quasar使用一个12分的列系统来分配子行的大小。 以下是可用的CSS辅助类的一些示例:

|

|

在上面的例子中,由于8/12 = 2/3 = 66%,col-8占据了行宽的三分之二(2/3),而col-2占据了六分之一(2/12 = 1 / 6〜16.67%)。

CSS辅助类 col-auto 使单元格只填充需要渲染的空间。 另一方面, col 试图填充所有可用的空间,同时如果需要也可以缩小。

CSS辅助类 col-grow 使单元格至少填充需要渲染的空间,并有可能在有更多空间可用时增长。

CSS辅助类 col-shrink 使单元格最多填充需要呈现的空间,并且当没有足够的可用空间时有可能收缩。

您可以使用 order-first 和 order-last CSS辅助类来设置子元素的顺序

默认情况下,Flex项按源(source)顺序排列。 但是,order属性控制它们在flex容器中的显示顺序。 如果您需要更多粒度,请使用 order CSS属性并分配所需的值。

例子:

|

|

以下是CSS order 属性的工作原理:

flex布局是一种无论对于块级元素还是行内元素都可以被采用的布局,且它使用起来也是十分的方便

首先是要指定flex布局

当我们指定flex布局方式的时候,其属性值 float、clear、vertical-align就失效了

无论是块级元素还是行内元素,当他们指定使用flex布局的时候,就被称为“ 容器 ”(flex container)

他们的子元素自动成为容器成员,被称为“ 项目 ”(flex item)。

flex布局是通过两根轴决定的,其实现方式其实和直角坐标系很像,都是通过轴来进行定位

每个容器都有两根轴,分别为水平的 主轴 (main axis)和垂直的 交叉轴 (cross axis)。主轴开始位置为main start,结束位置为main end。交叉轴的开始位置为cross start,结束位置为cross end

容器内的项目都是沿着主轴排列的,这点和块级元素有较大的不同,因为每个块级元素默认是占有一整行的,且排列方式为由上到下排列。

每个项目都占有一定的主轴空间和交叉轴空间,分别被称为main size和cross size

flex布局下,容器和项目都有其各自的属性

决定主轴的方向,即决定项目的排列方向,其属性值有

决定了当一行放不下所有的项目时,其换行与否以及换行方式

定义了项目在主轴上的对齐方式,假设主轴是从左向右的水平排列

定义了项目在交叉轴上的对齐方式,假设交叉轴是从上到下排列

在这里重点说一下上面这两个属性。

这样可以很方便的设置水平垂直居中

另外说一下align-items:baseline这个属性值。如描述,这个属性值是通过文字来进行对齐,而不是每个项目的边界或是中心

在容器内具有多根主轴线时,可以定义这些轴线的对齐方式

align-content属性和justify-content属性,这两者的属性值有较大的相似之处,这是因为,justify-content属性定义的是多个项目在主轴上的对齐方式,而align-content属性定义的是多根主轴在交叉轴上的对齐方式,这两者描述的对象就几乎一致

定义了多个项目的排列顺序,其使用方式和z-index属性值有异曲同工之处,都是指定属性值,属性值为整数。对于order属性,属性值越小,则排列越靠前;对于z-index属性,则属性值越小,就越在底层

设置了项目的放大比例,其默认值为1。

设置了项目的缩小比例,默认值为1。

在分配多余空间之前,为项目定义其占据的主轴空间

用来设置单个项目与其他项目不同的对齐方式,其属性值和align-items的属性的属性值基本一致,不过其默认值为auto,表示继承父元素的属性值。