flex布局笔记

TMaize 于 2016-04-18 发布

Flex 是 Flexible Box 的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。传统的布局,基于盒状模型,依赖 display 属性 + position 属性 + float 属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。于是乎 2009 年,W3C 提出了 Flex 布局,可以简便、完整、响应式地实现各种页面布局。

概念

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

容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做 main start,结束位置叫做 main end;交叉轴的开始位置叫做 cross start,结束位置叫做 cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做 main size,占据的交叉轴空间叫做 cross size。

p1

语法

声明为 flex 布局。注意,设为 Flex 布局以后,子元素的 float、clear 和 vertical-align 属性将失效。

.box {
  display: flex;
  /*Webkit 内核的浏览器,必须加上-webkit前缀*/
  display: -webkit-flex;
}
/*也可以设置为行内的flex属性*/
.box {
  display: inline-flex;
}

p2

flex 容器的属性

上面的属性只是针对一个主轴时,即只有一行,一行的所有元素在交叉轴上的排列时的范围是父元素的高度,当有多行即多个主轴时,按照行分派高度,每行的项目的活动范围是所在行分配到的高度

flex 项目的属性

实例

左侧固定宽度,右侧宽度随浏览器宽度自动改变,右侧内部方格大固定,会自动换行

p6

#main {
  border: 1px dashed red;
  width: 100%;
  height: 400px;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: stretch;
}

#left {
  flex-basis: 100px;
  flex-shrink: 0;
  background: pink;
}

#right {
  flex-grow: 1;
  flex-shrink: 1;
  background-color: #00aa9a;
  display: inline-flex;
  flex-flow: row wrap;
  align-content: flex-start;
}
#right div {
  background-color: #5e6e5e;
  margin: 10px;
  flex-basis: 50px;
  flex-shrink: 0;
  height: 50px;
}

一点 bug

有时候text-overflow: ellipsis会失效,尤其是一个元素宽度固定flex-shrink: 0,另一个flex-grow: 1使用剩余空间的时候。 在宽度非固定的元素上设置overflow: hidden;white-space: nowrap;text-overflow: ellipsis;会失效。加上width:0即可。因为flex-grow: 1时候宽度会无效,同时针对text-overflow: ellipsis又有了一个固定值。

参考

Flex 布局教程:语法篇

Flex 布局教程:实例篇

一劳永逸的搞定 flex 布局