Blogger Information
Blog 10
fans 0
comment 0
visits 5997
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
8-8Flex学习笔记
Brain
Original
556 people have browsed it

Flex 容器技术

1、背景知识

  • 传统布局:基础盒模型
  • 定位:将元素放在一个可以看到的位置
  • 浮动:最初的目标是为了图文混排
  • 页面中的元素:水平排列,垂直堆叠
  • 表格布局:最初的布局技术
  • DIV+CSS
  • Flex:弹性盒布局

2、Flex

  • 2009 年,随着移动端的出现,W3C 提出 Flex 弹性盒响应式布局
  • Flex: Flexible Box 弹性盒
  • Flex 容器:标记 display:flex;属性的 DIV 盒子
  • Flex 项目:Flex 的子元素
  • Flex 项目特征:项目自动转为行内块(水平排列,支持高宽);项目默认水平方向排列;当项目的宽度之和大于容器宽度之和时,会自动缩小宽度。
  • Flex 主轴和交叉轴,主轴:水平方向,交叉轴:垂直方向
  • Flex 排列:Flex 项目会优先沿主轴方向排列,当排列不下时,会沿交叉轴方向溢出排列
  • Flex 剩余空间:当 Flex 项目无法完全充满主轴方向时,会在主轴方向末端产生剩余空间
  • Flex 主轴方向:用 flex-direction 属性设置,默认:row 方向(水平从左向右)
  • Flex 主轴方向:row-reverse(水平从右向左),column(垂直从上向下),column-reverse(垂直从下向上)
  • Flex 项目换行:用 flex-wrap 属性设置,默认:nowrap(不换行,显示不下会收缩),wrap(不收缩,交叉轴方向换行),wrap-reverse(不收缩,交叉轴方向逆向换行)
  • Flex 项目换行简写:用 flex-flow 属性设置,格式 flex-flow:主轴方向 换行方式。
  • Flex 项目对齐:所有项目整体设置对齐,用 flex-content 属性设置,默认 flex-start(对齐主轴起始位置),flex-end(对齐到主轴终点),center(居中对齐),space-between(分布打散,两边项目贴边,中间均布),space-around(每个项目左右两侧空间相等,相邻不叠加),space-evenly(每个项目左右两侧空间完全相等,相邻叠加)
  • Flex 项目交叉轴方向对齐:
      • 单行容器用 align-items 属性设置,默认 flex-start(对齐到交叉轴起始位置),flex-end(对齐到交叉轴末端位置),center(居中对齐)
      • 多行容器用 align-content 属性设置,先设置 stretch 取消交叉轴方面拉伸,其他值同主轴方向对齐方式
  • Flex 项目排序:用 order 属性设置,数值越小越靠前,可以负数
  • Flex 单个项目对齐:用选择器先选中单个项目,然后用 align-self 设置交叉轴方面对齐,此项仅能对单行容器奏效

3、容器属性汇总

序号 属性 描述
1 flex-direction 主轴方向(项目的排列方向)row(水平,默认),column(垂直方向),后面加个 reserve 表示反向
2 flex-wrap 主轴方向上排列不下时,换行排列,默认 nowrap 不换行
3 flex-flow 前两项的简写
4 justify-content 主轴上的对齐方式
5 align-items 交叉轴上的对齐方式
6 align-content 在多根轴线上的对齐方式

4、Flex 项目属性

序号 属性 描述
1 order 项目的排序权值,值越小越靠前,可以是负数
2 flex-grow 项目放大因子,默认 0,不放大,必须有可以放大的剩余空间
3 flex-shrink 项目的缩小因子,默认 0,不缩小,空间不足时用
4 flex-basis 项目占主轴空间的大小,默认 auto,原始大小,优先级高于 min-width/height,低于 width/height
5 flex 2\3\4 项的简写,参数按顺序,空格分隔
6 align-self 单个项目在容器中的对齐方式,默认 auto
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post