CSS-布局-flex

CSS3 新增了弹性盒子模型( Flexible Box 或 FlexBox ),是一种新的用于在 HTML 页面实现布局的方式。使得 HTML 页面适应不同尺寸的屏幕和不同的设备时,元素是可预测地运行。

基本概念

  • 容器:使用 display:flexdisplay:inline-flex 声明的元素,称为 Flex 容器(flex container),简称 容器
  • 项目:容器中所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称 项目
  • 主轴:项目沿其一次排列的轴被称为 主轴
  • 侧轴:垂直于主轴的轴被称为 侧轴

容器的属性

  • flex-direction
    • 定义了 主轴 的方向
      • row:主轴为水平方向,起点在左端(默认
      • row-reverse:主轴为水平方向,起点在右端
      • column:主轴为垂直方向,起点在上沿
      • column-reverse:主轴为垂直方向,起点在下沿
  • flex-wrap
    • 默认情况,所有项目会在一行显示,如需换行,使用 flex-wrap
      • nowrap:不换行(默认
      • wrap:换行,第一行在上方
      • wrap-reverse:换行,第一行在下方
  • flex-flow
    • 该属性是 flex-directionflex-wrap 的简写,默认值row nowrap,水平排列,不换行。
  • justify-content
    • 定义了项目沿着 主轴线 的对齐方式
      • flex-start: 项目左对齐(默认
      • flex-end: 项目右对齐
      • center: 项目居中对齐
      • space-between: 项目两端对齐,容器首尾不留距离,项目之间的间隔都相等
      • space-around: 项目两端对齐,容器首尾留有距离
  • align-items适用于不换行的情况
    • 定义了项目所在 侧轴线 的对齐方式
      • flex-start: 侧轴 起点对齐,如果 flex-direction:row,则项目顶部对齐
      • flex-end: 侧轴 终点对齐,如果 flex-direction:row,则项目尾部对齐
      • center: 项目居中对齐
      • baseline: 项目的 第一行文字的基线 对齐
      • stretch: 如果项目 未设置高度 或者 设为auto ,拉伸与容器同高(默认
  • align-content多行情况时适用
    • 定义了项目所在侧轴线的对齐方式
      • flex-start: 侧轴 起点对齐
      • flex-end: 侧轴 终点对齐
      • center: 侧轴 居中对齐
      • space-between: 两端对齐,容器首尾不留距离
      • space-around: 两端对齐,容器首尾留有距离
      • stretch: 如果项目 未设置高度 或者 设为auto ,拉伸与容器同高(默认

项目属性

  • order:项目的排列顺序
    • 数值越小,排列越靠前,可以为负值
      • order:0,保持项目原来的位置(默认)
  • flex-grow(扩大):定义项目的放大比例
    • 默认为0:如果容器存在剩余空间,保持原大小,不放大
    • 项目flex-grow属性都为1:项目平均分配剩余空间
    • 某个项目flex-grow属性为2,其他项目都为1,那么为2的项目宽度为1的2倍
  • flex-shrink(缩小):定义项目的缩小比例
    • 默认为1:如果容器空间不足,项目缩小
    • 项目flex-shrink属性都为1,当容器空间不足时,所有项目等比缩小
    • 某个项目flex-shrink属性为0,其他项目都为1,当容器空间不足时,为0的项目不缩小
  • flex-basis:分配多余空间之前,项目占据主轴空间的大小,相当于为项目设置宽度
    • 默认值:auto,保持项目的本来大小,不作任何宽度改变
    • 可以定义项目的宽度(如200px)
    • 也可以设置 flex-basis:10%,将占据空间的10%
  • flex:flex-grow flex-shrink flex-basis的缩写
    • 默认值:0 1 auto,不放大,但缩小;
    • auto(1 1 auto):等分放大缩小
    • none(0 0 auto):不放大,不缩小
    • flex:1 相当于只设置了flex-grow
  • align-self:定义项目在侧轴的对齐方式。该属性可覆盖 align-items 属性。
    • 默认值为 auto,表示继承父元素的 align-items 属性
    • center: 伸缩项目向侧轴的中间位置对齐。
    • flex-start: 伸缩项目向侧轴的起点位置对齐。
    • flex-end: 伸缩项目向侧轴的终点位置对齐。
    • baseline: 伸缩项目根据伸缩项目的基线对齐。
    • stretch: 默认值,伸缩项目拉伸填充整个伸缩容器。
相关推荐
风尚云网1 小时前
风尚云网前端学习:一个简易前端新手友好的HTML5页面布局与样式设计
前端·css·学习·html·html5·风尚云网
酷酷的威朗普3 小时前
医院绩效考核系统
javascript·css·vue.js·typescript·node.js·echarts·html5
渊兮兮3 小时前
Vue3 + TypeScript +动画,实现动态登陆页面
前端·javascript·css·typescript·动画
土豆湿4 小时前
拥抱极简主义前端开发:NoCss.js 引领无 CSS 编程潮流
开发语言·javascript·css
鸽鸽程序猿7 小时前
【前端】CSS
前端·css
爱上语文17 小时前
HTML和CSS 表单、表格练习
前端·css·html
小肚肚肚肚肚哦18 小时前
盘点浏览器盒模型中各种 width、height 、边距和位置属性
css·html
NightCyberpunk18 小时前
HTML、CSS
前端·css·html
南城FE18 小时前
12个更现代化的CSS单行优化技巧
前端·css
啵咿傲21 小时前
重绘&重排、CSS树&DOM树&渲染树、动画加速 ✅
前端·css