display flex 布局方式

2019-12-13 0 By admin

2009年,W3C提出了一种新的方案–Flex布局,可以简便、完整、响应式地实现各种页面布局。目前已得到所有现在浏览器的支持

一、Flex布局是什么?

Flex是Flexible Box的缩写,翻译成中文就是“弹性盒子”,用来为盒装模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。
.box{
display: -webkit-flex; /*在webkit内核的浏览器上使用要加前缀*/
display: flex; //将对象作为弹性伸缩盒显示}

当然,行内元素也可以使用Flex布局。
.box {display: inline-flex; //将对象作为内联块级弹性伸缩盒显示}

兼容性写法
.box {display: flex || inline-flex;}

二、基本概念

采用Flex布局的元素,被称为Flex容器(flex container),简称“容器”。其所有子元素自动成为容器成员,成为Flex项目(Flex item),简称“项目”。

容器默认存在两根主轴:水平方向主轴(main axis)和垂直方向交叉轴(cross axis),默认项目按主轴排列。

水平方向主轴(main axis)和垂直方向交叉轴(cross axis)
  1. main start/main end:主轴开始位置/结束位置;
  2. cross start/cross end:交叉轴开始位置/结束位置;
  3. main size/cross size:单个项目占据主轴/交叉轴的空间;

三、容器属性说明

3.1、flex-direction :决定主轴的方向(即项目的排列方向)

  1. row(默认值):主轴为水平方向,起点在左端。
  2. row-reverse:主轴为水平方向,起点在右端。
  3. column:主轴为垂直方向,起点在上沿。
  4. column-reverse:主轴为垂直方向,起点在下沿。

3.2、flex-wrap :项目是否换行

  1. nowrap(默认):不换行。
  2. wrap:换行,第一行在上方。
  3. wrap-reverse:换行,第一行在下方。

3.3、flex-flow : 方向和换行的组合配置

flex-flow: <flex-direction> || <flex-wrap>;

3.4、justify-content : 项目在主轴上的对齐方式

  1. flex-start(默认值):左对齐
  2. flex-end:右对齐
  3. center: 居中
  4. space-between:两端对齐,项目之间的间隔都相等。
  5. space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。

3.5、align-items :项目在交叉轴上如何对齐

  1. flex-start:交叉轴的起点对齐。
  2. flex-end:交叉轴的终点对齐。
  3. center:交叉轴的中点对齐。
  4. baseline: 项目的第一行文字的基线对齐。
  5. stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度

3.6、align-content : 多根轴线的对齐方式

如果项目只有一根轴线,该属性不起作用。

  1. flex-start:与交叉轴的起点对齐。
  2. flex-end:与交叉轴的终点对齐。
  3. center:与交叉轴的中点对齐。
  4. space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
  5. space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
  6. stretch(默认值):轴线占满整个交叉轴。

四、项目的属性

4.1、order

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

4.2、flex-grow

项目的放大比例,默认为0,即如果存在剩余空间,也不放大。

4.3、flex-shrink

项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。

4.4、flex-basis

在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。

4.5、flex

flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

放大比例,缩小比例,项目大小。

4.6、align-self

允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。