CSS:弹性布局

554 阅读2分钟

一、Flex基本属性

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

//块级元素
.box{
  display: flex;
}

//行内元素
.box{
  display: inline-flex;
}

//Webkit 内核的浏览器,必须加上-webkit前缀
.box{
  display: -webkit-flex; /* Safari */
  display: flex;
}

设为 Flex 布局以后,子元素的以下属性将失效:

  1. float
  2. clear
  3. vertical-align


容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)

二、容器属性

容器上有以下6个属性:

  1. flex-direction(主轴方向):row | row-reverse | column | column-reverse
  2. flex-wrap(换行方式):nowrap(不换行) | wrap(第一行在上方) | wrap-reverse(第一行在下方)
  3. flex-flowflex-directionflex-wrap简写形式):row nowrap(默认值)
  4. justify-content(主轴上的对齐方式):flex-start | flex-end | center | space-between | space-around
  5. align-items(交叉轴上如何对齐):flex-start | flex-end | center | baseline | stretch
  6. align-content(多根轴线的对齐方式,只有一根轴线,该属性不起作用):flex-start | flex-end | center | space-between | space-around | stretch(核心是一定是盒子内部的元素超过了盒子项的宽度(默认)出现了换行,也就是有多行才可以)

三、项目属性

项目上有以下6个属性:

  1. order(项目的排列顺序。数值越小,排列越靠前,默认为0):<integer>
  2. flex-grow(项目的放大比例,默认为0):<number>
  3. flex-shrink(项目的缩小比例,默认为1,即如果空间不足,该项目将缩小):<number>
  4. flex-basis(在分配多余空间之前,项目占据的主轴空间):<length> | auto
  5. flexflex-grow, flex-shrinkflex-basis的简写,默认值为0 1 auto):
  6. align-self(允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto):auto | flex-start | flex-end | center | baseline | stretch

参考文章

  1. Flex 布局教程:语法篇
  2. CSS Guidebook-弹性布局(很不错,例子详细)
  3. Flex弹性布局
  4. 基础知识】Flex-弹性布局原来如此简单!!
  5. Flex 布局教程:实例篇
  6. CSS 常见布局方式(很全面)

待看

  1. 「一劳永逸」48张小图带你领略flex布局之美