flex布局学习笔记

发表于 | 更新于 | 分类于

flex

flex 是Flexible Box的缩写，意为“弹性布局”相对于一般布局更加灵活。
块级元素：

1
2
3
4
5
display: -webkit-box; /*chrome 4.0~43.0,safari 3.2~8.1*/
display: -moz-box;  /*Firfox 2.0~38.0*/
display: -ms-flexbox;  /*IE 10.0~11.0*/
display: -webkit-flex;  /*safari 7.0以上*/
display: flex;  /*兼容大部分浏览器*/

行内元素：

1
2
3
4
5
display: -webkit-inline-box; /*chrome 4.0~43.0,safari 3.2~8.1*/
display: -moz-inline-box;  /*Firfox 2.0~38.0*/
display: -ms-inline-flexbox;  /*IE 10.0~11.0*/
display: -webkit-inline-flex;  /*safari 7.0以上*/
display: inline-flex;  /*兼容大部分浏览器*/

flex常用属性

flex-direction

主轴方向上子元素排列方式。

1
flex-direction: row | row-reverse | column | column-reverse;

  • row：主轴为水平方向，从左到右（默认）。
  • row-reverse：主轴为水平方向，从右到左。
  • column：主轴为垂直方向，从上到下。
  • column-reverse：主轴为垂直方向，从下到上。

justify-content

子元素在水平方向上对齐方式。

1
justify-content: flex-start | flex-end | center | space-between | space-around;

  • flex-start：左对齐（默认）。
  • flex-end：右对齐。
  • center： 居中。
  • space-between：子元素与子元素间空格。
  • space-around：子元素两侧空格。

align-items

子元素在垂直方向上对齐方式。

1
align-items: flex-start | flex-end | center | baseline | stretch;

  • flex-start：垂直方向上对齐。
  • flex-end：垂直方向下对齐。
  • center：垂直方向居中。
  • baseline: 子元素第一行文字的基线对齐。
  • stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器。

flex-wrap

在换行的情况下，该属性有效，定义换行排列方式。

1
flex-wrap: nowrap | wrap | wrap-reverse;

  • nowrap：不换行。
  • wrap：换行，第一行在上。
  • wrap-reverse：换行，第一行在下。