Flexbox 布局

前端 2018-01-19

Flexbox 最适合是沿单个轴分布元素,那么是水平方向的,那么是垂直方向的。
Grid 它是二维的,也就是说水平和垂直方向都可以排列元素。

  • 一维布局,布局根据内容元素自适应:Flexbox
  • 二维布局,复杂非线性页面布局:Grid

拥抱自适应性

与浮动和其他传统布局不同的是,Flexbox 和 Grid 布局的出现是为了解决多设备出现的问题。

父元素和子元素

定义一个父容器:

.container{
    display: flex; /* 或者 display: inline-flex; */
}

容器里的子元素:

.item{
    order: {Int}; /* 设置排列顺序的权值 */
}

父容器的属性

flex-direction
  • row(默认值): 行排列,从左到右。
  • row-reverse: 反向,从右到左。
  • column: 列排列,从上到下。
  • column-reverse: 从下到上。
flex-wrap

一行或列不够放,多出的那一行/列要怎么放,用它 flex-wrap

  • nowrap(默认值): 单行显示。
  • wrap: 多行显示。
  • wrap-reverse: 多行显示。
flex-flow: flex-direction, flex-wrap

flex-flow: flex-direction + flex-wrap 的简写版。

justify-content 主轴上的伸缩项目对齐方式
  • flex-start: 靠起始位置
  • flex-end: 靠结束位置
  • center: 居中
  • space-between: 两头的项目贴边,其余间距一样
  • space-around: 所有项目间距都一样
align-items 侧轴上的伸缩项目(包括隐式)对齐方式
  • flex-start: 靠起始位置
  • flex-end: 靠结束位置
  • center: 居中
  • stretch
  • baseline
align-content 侧轴上的伸缩项目对齐方式
  • flex-start: 靠起始位置
  • flex-end: 靠结束位置
  • center: 居中
  • space-between: 两头的项目贴边,其余间距一样
  • space-around: 所有项目间距都一样
  • stretch
order: 设置排列的权值

order: {Int} 权值越小,排越前,可为负数。

flex-grow: 设置比例的单位

flex-grow: {+Int} 为负数时失效。父容器大小减去确定大小的项目,在去按比例分给该元素。

假设:父容器宽度为 1000px,里面有四个子项目(A, B, C, D),A, B 宽度为 100px,C 宽度为 20%,在 D 中 flex-grow: 2; 那么 D 的宽度为:(1000 - 100 - 100 - 1000 * 20) / 2 * 2 = 600 px

代码示例

flex-shrink: 定义 Flex 项目缩小比例
flex-basis: 设置主轴方向的大小,可看成是宽度/高度,不过权值比它们高
flex: flex-grow, flex-shrink, flex-basis

flex: none; => flex-grow: 0;flex-shrink: 0;flex-basis: auto;

align-self: 设置单独的 Flex 项目样式
  • flex-start: 靠起始位置
  • flex-end: 靠结束位置
  • center: 居中
  • stretch
  • baseline

PS: 跟 Grid 布局一起食用更佳。因为它俩很多属性都类似。

参考资料


本文由 阿涛 创作,采用 知识共享署名 3.0,可自由转载、引用,但需署名作者且注明文章出处。

还不快抢沙发

添加新评论