flex布局

白摆
114 阅读5分钟

flex 布局是什么

网页的传统布局都是依赖与display，定位与浮动来进行布局，但是这样的布局方式并不方便，直到2009年，W3C提出了一种新的方案—-flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能,其中在webkit内核的浏览器中使用时，必须加上-webkit-前缀

flex布局就是弹性布局，页面中任何一个元素只要设置了display:flex属性，那么当前盒子都称为弹性盒子。弹性盒子默认有两条轴:默认水平显示的主轴 和 始终要垂直于主轴的侧轴(也叫交叉轴),在弹性盒子中所有的子元素都是沿着主轴的方向显示。

任何一个容器都可以设置为flex布局 例如:

    .tx{
            display: flex;
        }

行内元素也可以使用flex布局 例如

    .tx{
           display: inline-flex;
        }

Webkit内核的浏览器,必须加上 -webkit 前缀 例如:

    .tx{
            display: -webkit-flex;
            display: flex;
        }

注:设置为flex布局之后,子元素的float、clear 和 vertical-anign 属性将失去效果

容器和项目的基本概念 如下:

即父级元素采用flex布局,则父元素为容器,全部子元素自动称为项目

容器的属性

什么叫容器呢，采用了flex布局的元素都被称为容器 容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end

flex-direction 属性

  • row（默认值）：主轴为水平方向，起点在左端，表示沿水平方向，由左到右。

image.png

  • row-reverse（默认值）：主轴为水平方向，起点在右端，表示沿水平方向，由右到左。

image.png

  • colum（默认值）：主轴为垂直方向，起点在上沿，表示垂直方向，由上到下。

image.png

  • column-reverse：主轴为垂直方向，起点在下沿,表示垂直方向，由下到上。

image.png

flex-warp属性

flex-wrap属性用于设置当项目在容器中一行无法显示的时候如何处理。
默认情况下，项目都排在一条线（又称”轴线”）上。
flex-wrap属性定义，如果一条轴线排不下，如何换行。

  • nowrap(默认) ：表示不换行

image.png

说明：设置的项目的宽度就失效了，强行在一行显示

  • wrap：正常换行,第一行在上方

image.png

  • wrap-reverse：向上换行，第一行位于下方

image.png

flex-flow属性

flex-flow属性是flex-deriction和flex-wrap属性的简写，默认值为[row nowrap]

第一个属性值为flex-direction的属性值

第二个属性值为flex-wrap的属性值

justify-content属性

  • flex-start（默认值）：左对齐

image.png

  • flex-end：右对齐

image.png

  • center： 居中

image.png

  • space-between：两端对齐，项目之间的间隔都相等。

image.png

  • space-around：每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。

image.png

align-items

align-items定义了项目在交叉轴上是如何对齐显示的

  • flex-start：交叉轴的起点对齐。

image.png

  • flex-end：交叉轴的终点对齐。

image.png

  • center：交叉轴的中点对齐。

image.png

  • baseline: 项目的第一行文字的基线对齐。

image.png

  • stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

image.png

align-content属性

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

  • flex-start：与交叉轴的起点对齐。

image.png

  • flex-end：与交叉轴的终点对齐。

image.png

  • center：与交叉轴的中点对齐。

image.png

  • space-around：每根轴线两侧的间隔都相等.所以,轴线之间的间隔比轴线与边框的间隔大一倍。

image.png

  • space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。

image.png

  • stretch（默认值）：轴线占满整个交叉轴。

image.png

项目的属性

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。 什么叫项目 : 在flex布局中的子元素被称作项目。

  • order 属性设置项目排序的位置，默认值为0，数值越小越靠前

image.png

flex-grow 属性

属性如果所有项目的flex-grow属性都为1，则它们将等分剩余空间。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项目多一倍

image.png

flex-shrink

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小，但flex-shrink属性为0的不缩小，注意：负值对该属性无效

image.png

flex-basis

flex-basis属性表示表示项目占据主轴空间的值。默认为auto，表示项目当前默认的大小。如果设置为一个固定的值，则该项目在容器中占据固定的大小。

image.png

flex

flex属性是 flex-grow属性、flex-shrink属性、flex-basis属性的简写。默认值为：0 1 auto。数值越大得到的空间越大，负值对该属性无效

image.png

align-self

align-self属性表示当前项目可以和其他项目拥有不一样的对齐方式。它有六个可能的值。默认值为auto

  • auto（默认）：继承父元素align-self的值

image.png

  • flex-start：顶端对齐

image.png

  • flex-end：底部对齐

image.png

  • center：竖直方向上居中对齐

image.png

  • baseline：第一行文字的底部对齐

image.png

  • stretch：与容器等高对齐

image.png

avatar
文章
阅读
粉丝