关于flexbox:flex布局制作自适应网页

25次阅读

共计 1457 个字符,预计需要花费 4 分钟才能阅读完成。

网页布局是 css 的一个重点利用。传统的布局都是依赖 display、position、float 属性来实现的,然而非凡布局就不易实现,如垂直居中。

01 flex 布局是什么?‍

Flex 是 Flexible Box 的简写,意为“弹性布局”为盒模型提供最大灵活性。任何一个容器都能够指定为 flex 布局。

采纳 flex 布局的元素,称为 flex 容器。他的所有子元素主动成为容器成员,称为 flex 我的项目,简称我的项目。

容器默认存在两根轴:程度的主轴(main axis)和垂直的穿插轴(cross axis)。主轴的开始地位(与边框的交叉点)叫做 main start,完结地位叫做 main end;穿插轴的开始地位叫做 cross start,完结地位叫做 cross end。

我的项目默认沿主轴排列。单个我的项目占据的主轴空间叫做 main size,占据的穿插轴空间叫做 cross size。

02 容器的属性

flex-direction 设置排列方向 (向下、向上、向左、向右) 的

flex-wrap 内容搁置不下时换行形式

flex-flow 是 flex-direction 和 flex-wrap 属性简写默认值 row nowrap

justify-content 定义在主轴上的对齐形式。

align-items 定义我的项目在穿插轴上如何对齐。

align-content 定义多根轴线的对齐形式

flex-direction 属性值有四个:

row(默认值):程度方向,从左到右,终点在左。

row-reverse:程度方向,从右到左,终点在右。

column:垂直方向,从上到下。

column-reverse:垂直方向,从下到上。

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(默认值):如果我的项目未设置高度或设置为 auto,将占满整个容器的高度。

align-content 属性值六个:

flex-start:穿插轴的终点对齐。

flex-end:穿插轴起点对齐。

center:穿插轴中点对齐。

space-between:与穿插轴两端对齐,轴线之间距离均匀散布。

space-around:每根轴线两侧距离都相等。

stretch(默认值):轴线占满整个穿插轴。

03 我的项目属性

order:定义我的项目的排列程序,数值越小,排列越靠前,默认为 0。

flex-grow 属性:定义我的项目的放大比例,默认为 0

flex-shrink:定义我的项目的放大比例,默认为 1。

flex-basis:定义在调配多余空间之前,我的项目占据的主轴空间。默认值为 auto,即我的项目原本大小。

flex:是 flex-grow、flex-shrink、flex-basis 的缩写,默认值 0 1 auto。

align-self:属性容许单个我的项目有与其余我的项目不一样的对齐形式,可笼罩 align-items 属性。默认值为 auto,示意继承父元素的 align-items 属性,如果没有父元素,则等同于 stretch。

正文完
 0