课堂随笔17

Flex弹性布局实现等宽排列知识点笔记

一、实现子元素等宽排布的核心属性

要让一行内多个盒子自动平分父容器宽度、宽度完全相等，主要依靠两个属性配合：

1. flex: 1; （写在子元素上，核心）
2. 父容器开启  display: flex;

二、flex属性详解

flex  是复合属性，完整语法：

css
  
flex: 拉伸系数 收缩系数 基础宽度;
flex: 1; 等价于 flex: 1 1 0%;

三个参数含义

1. flex-grow（放大比例）
默认值： 0 
作用：父容器有剩余空白空间时，子元素按照比例瓜分剩余宽度。
设置为  1  代表：所有子元素平分剩余空间。
2. flex-shrink（缩小比例）
默认值： 1 
作用：父容器宽度不足时，子元素等比例压缩缩小。
3. flex-basis（基础宽度）
默认值： auto 
作用：子元素原始宽度基准。
 flex-basis: 0%  代表：不参考自身内容宽度，直接按照比例分配空间，等宽最标准写法。

三、标准等宽布局代码模板

HTML结构

html

<div class="father">
  <div class="son">1</div>
  <div class="son">2</div>
  <div class="son">3</div>
  <div class="son">4</div>
</div>

CSS样式

css

.father {
  display: flex; /* 父容器开启弹性布局 */
}
.son {
  flex: 1; /* 所有子元素平分宽度，实现等宽 */
  text-align: center;
  padding: 10px;
}

四、两种等宽写法区别

写法1：flex: 1;（推荐）

• 原理：平分父容器剩余空间，不受文字内容多少影响
• 优点：严格等宽，项目最常用

写法2：flex-basis: 25%;

css

.son {
  flex-basis: 25%;
}

• 原理：直接给每个子元素设置基准宽度
• 缺点：增减盒子数量就要手动修改百分比，灵活性差

五、等宽布局常见搭配属性

1. gap（弹性间隙，CSS3新属性）
给父元素设置，控制子元素之间间距，不会挤压盒子宽度

css

.father {
  display: flex;
  gap: 10px; /* 子元素之间的间距 */
}

2. flex-wrap: wrap; 换行等宽布局
需要多行排列时，父容器添加换行，配合百分比实现多列等宽卡片：

css

.father {
  display: flex;
  flex-wrap: wrap;
}
.son {
  flex: 1 1 30%; /* 最小宽度30%，自动换行均分 */
}