flex布局


张登友,张登友的博客,张登友的网站——

CSS3属性:Flex布局

弹性盒子、子元素

  • 弹性盒子:指的是使用 display:flexdisplay:inline-flex 声明的父容器
  • 子元素/弹性元素:指的是父容器里面的子元素们(父容器被声明为 flex 盒子的情况下)。
主轴和侧轴
  • 主轴:flex容器的主轴,默认是水平方向,从左向右。
  • 侧轴:与主轴垂直的轴称作侧轴,默认是垂直方向,从上往下。

PS:主轴和侧轴并不是固定不变的,可以通过 flex-direction 更换方向,我们在后面会讲到。

flex-direction 属性

flex-direction:用于设置盒子中子元素的排列方向。属性值可以是:

属性值 描述
row 从左到右水平排列子元素(默认值)
column 从上到下垂直排列子元素
row-reverse 从右向左排列子元素
column-reverse 从下到上垂直排列子元素

备注:如果我们不给父容器写flex-direction这个属性,那么,子元素默认就是从左到右排列的。

flex-wrap 属性

flex-wrap:控制子元素溢出时的换行处理。

  • nowrap (默认值) : 所有的 flex 项都会在同一行上排布,也就是我们常说的单行,或不换行。
  • wrap: flex 项将从上到下根据实际情况排布再多行上,也就是我们常说的多行,或会换行。
  • wrap-reverse: flex 项将 从下到上 根据实际情况排布再多行上折行。

弹性元素

justify-content 属性

justify-content: flex-start; 设置子元素在主轴上的对齐方式。属性值可以是:

  • 属性值可以是:
    • flex-start 从主轴的起点对齐(默认值)
    • flex-end 从主轴的终点对齐
    • center 居中对齐
    • space-around 在父盒子里平分
    • space-between 两端对齐平分
align-items 属性

align-items:设置子元素在侧轴上的对齐方式

  • 属性值可以是:

    • flex-start 从侧轴开始的方向对齐

    • flex-end 从侧轴结束的方向对齐

    • baseline 基线 默认同flex-start

    • center 中间对齐

    • stretch 拉伸

flex属性:设置子盒子的权重

flex CSS简写属性设置了弹性项目如何增大或缩小以适应其弹性容器中可用的空间。

flex

/* 关键字值 */
flex: auto;
flex: initial;
flex: none;

/* 一个值, 无单位数字: flex-grow */
flex: 2;

/* 一个值, width/height: flex-basis */
flex: 10em;
flex: 30px;
flex: min-content;

/* 两个值: flex-grow | flex-basis */
flex: 1 30px;

/* 两个值: flex-grow | flex-shrink */
flex: 2 2;

/* 三个值: flex-grow | flex-shrink | flex-basis */
flex: 2 2 10%;

/*全局属性值 */
flex: inherit;
flex: initial;
flex: unset;

取值

  • initial

    元素会根据自身宽高设置尺寸。它会缩短自身以适应 flex 容器,但不会伸长并吸收 flex 容器中的额外自由空间来适应 flex 容器 。相当于将属性设置为”flex: 0 1 auto“。

  • auto

    元素会根据自身的宽度与高度来确定尺寸,但是会伸长并吸收 flex 容器中额外的自由空间,也会缩短自身来适应 flex 容器。这相当于将属性设置为 “flex: 1 1 auto“.

  • none

    元素会根据自身宽高来设置尺寸。它是完全非弹性的:既不会缩短,也不会伸长来适应 flex 容器。相当于将属性设置为”flex: 0 0 auto“。

成分属性

  • flex-grow

    定义了 flex 项在有可用剩余空间时拉伸比例。它接受的值作为比例,无单位。它规定了 flex 项应该占 flex 容器中可用空间的比例。

    .item {
      flex-grow: <number>; /* default 0 */
    }
  • flex-shrink

    定义了 flex 项的收缩的能力。(注:与 flex-grow 拉伸正好相反,flex-shrink 决定 flex 项允许收缩多少比例。)

    .item {
      flex-shrink: <number>; /* default 1 */
    }
  • flex-basis

    定义了在分配剩余空间之前 flex 项默认的大小。可以设置为某个长度值(e.g. 20%, 5rem,等)或者关键字。

    .item {
      flex-basis: <length> | auto; /* default auto */
    }

水平垂直居中案例

使用flexbox 布局
.parent {/* 父元素盒子 */
  display: flex;
  height: 300px; /* 随意设定大小 */
}
.child {/* 子元素 */
  width: 100px;  /* 随意设定大小,比父元素要小 */
  height: 100px; /* 同上 */
  margin: auto;  /* 设置 margin 为 auto 会自动吸收额外空间, 设置水平垂直的margin都为 auto 会使flex 项在水平垂直方向上都完美居中。 */
}

可参考此链接


文章作者: 张登友
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 张登友 !
  目录