Flex布局介绍

时间:2018-12-15
本文章向大家介绍Flex布局介绍,主要包括Flex布局介绍相关应用实例、知识点总结和注意事项,具有一定的参考价值,需要的朋友可以参考一下。

传统的布局解决方案--盒状模型--diplay + position + float

缺陷:对于一些特殊布局(垂直居中)和网格式布局(几行几列)不易实现

09年W3C颁布的--flex布局--使用简单、API完整丰富、响应式动态地实现各种页面布局(一些常见的布局思想)

当然针对Gekco30+以下,最好的布局选择就是flex了,更新式的Grid布局它不支持。

本文来源地:https://css-tricks.com/snippets/css/a-guide-to-flexbox/ ,一个非常好的CSS内容及前端资讯的网站

Flex

Flexible Box弹性布局

任意容器都可以指定成flex布局:

.box {
  display: flex;
}
<!-- 行内元素 -->
.box {
  display: inline-flex;
}

设为flex布局后,子元素的float、clear、vertical-align将失效

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

flex container

  • 两根轴:
  • 水平主轴 main axis
    • 主轴与边框的左右交叉点 main start/main end
  • 垂直交叉轴 cross axis
    • 交叉轴与边框的上下交叉点 cross start/cross end
  • 项目(flex item)默认沿主轴排列,单项目占据的主轴空间/交叉轴空间 main size/cross size

flex容器属性

  1. flex-direction 决定主轴方向=项目排列方向
  2. flex-wrap 定义如何换行
  3. flex-flow 它是flex-direction和flex-wrap的简写形式,语法糖
  4. justify-content 定义项目在主轴上的对齐方式
  5. align-items 定义项目在交叉轴上的对齐方式
  6. align-content 定义多根轴线的对齐方式。若项目只有一根轴线则不生效。

1.flex-direction值:

  • row(默认值) 主轴为水平方向,起点在左端
  • row-reverse 主轴为水平方向,起点在右端
  • column 主轴为垂直方向,起点在左端
  • column-reverse 主轴为垂直方向,起点在右端

flex-direction

2.flex-wrap值:

  • nowrap(默认) 不换行

nowrap

  • wrap 换行,第一行在上方

wrap

  • wrap-reverse 换行,第一行在下方

wrap-reverse

默认情况,所有flex项目会排在一条线上,不会自动换行

3.flex-flow默认值:row nowrap

.box {
  flex-flow: <flex-direction> <flex-wrap>;
}

4.justify-content值:

  • flex-start(默认值) 左对齐

flex-start

  • flex-end 右对齐

flex-end

  • center 居中

center

  • space-between 两端对其,项目间间隔相等

space-between

  • space-around 单个项目两侧的间隔相等,故项目间间隔相比项目与边框间间隔多一倍

space-around

5.align-items值:

  • strech(默认值) 如果flex项目未设置高度或设置高度为auto,将占满整个容器的高度

strech

  • flex-start 交叉轴起点处对齐

flex-start

  • flex-end 交叉轴终点处对齐

flex-end

  • center 交叉轴中点处对齐

center

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

baseline

6.align-content值:

  • strech(默认值)

strech

  • flex-start

flex-start

  • flex-end

flex-end

  • center

center

  • space-between 与交叉轴两端对齐,轴线间间隔平均分布

space-between

  • space-around 单轴线两侧间隔相等。轴线间间隔比轴边间隔大一倍

space-around

flex项目属性

  • order 定义项目排列顺序。数值越小,排列越靠前,默认为0
.item {
  order: <integer>;
}

order


  • flex-grow 定义项目放大比例,默认为0

如果所有项目flex-grow属性为1,它们将等分剩余空间。以此类推

flex-grow


  • flex-shrink 定义项目缩小比例,默认为1

如果所有项目flex-shrink属性为1,当空间不足时等比例缩小。
如果有一个项目flex-shrink为0,其他项目都为1,空间不足时前者不缩小

flex-shink


  • flex-basis 定义在分配多余空间前,项目占据的主轴空间(main size)

浏览器据此计算主轴是否有多余空间,默认值为auto即项目本来的大小

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

  • flex 是flex-grow,flex-shink,flex-basis的简写,语法糖,默认值0,1,auto,后两者可选
.item {
  flex: none | [<flex-grow> <flex-shrink> ? || <flex-basis>]
}

有两个快捷值:

auto: 1 1 auto

none: 0 0 auto

建议优先使用此属性代替单独写3个分离的属性,因为浏览器会推算相关值。


  • align-self 允许单个项目与其他项目不一样的对齐方式,可覆盖align-items属性

默认值auto,表示继承父元素的align-items,如果没有父元素则等同于strech

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

align-self