flex布局

郭浪 Lv3
  2023-01-05 14:29:38 2023-01-05 14:29:38 创建   2023-08-05 15:52 2023-08-05 15:52 更新    

flex布局是我们在工作中使用较多的一种布局方式，他的全称是 Flexible Box Layout，即弹性盒子布局，他为我们提供了一种更加简单方便的布局方式动态的来计算盒子之间的间隙

在使用的时候我们要先在外部容器中声明，即在父盒子中使用display:flex或者display:inline-flex来申明为弹性容器

flex基本概念

  1. 容器与项目声明使用display:flex布局的区域就称为容器，容器内部的元素就称为项目(item)

  2. 主轴与交叉轴在容器中项目主要按照主轴和交叉轴的设置来排列默认是从左往右，从上到下

  3. 换行flex-wrap我们通过设置还能改变项目的换行样式

项目群对齐

justify-content 决定子元素在主轴方向上的对齐方式，认是 flex-start(从左往右)其他还有flex-end (从右往左)center (两边自适应居中)space-between(左右靠边中间居中)space-around(左右两边间隙1中间间隙2)space-evenly(每个项目之间的间隙都是一样)

align-items 决定子元素在交叉轴方向上的对齐方式，默认是 stretch(把上下的距离给填充满)flex-start(从上到下)flex-end(从下到上)center(居中)

  • 标题: flex布局
  • 作者: 郭浪
  • 创建于: 2023-01-05 14:29:38
  • 更新于: 2023-08-05 15:52:00
  • 链接: https://redefine.ohevan.com/2023/01/05/flex布局/
  • 版权声明: 本文章采用 CC BY-NC-SA 4.0 进行许可。
此页目录
flex布局
  1. flex基本概念
  2. 项目群对齐