乐趣区

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

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

flex 布局是什么?‍

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

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

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

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

容器的属性

  1. flex-direction 设置排列方向 (向下、向上、向左、向右) 的
  2. flex-wrap 内容搁置不下时换行形式
  3. flex-flow 是 flex-direction 和 flex-wrap 属性简写默认值 row nowrap
  4. justify-content 定义在主轴上的对齐形式。
  5. align-items 定义我的项目在穿插轴上如何对齐。
  6. 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(默认值):轴线占满整个穿插轴。

    我的项目属性

  • 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。
退出移动版