前端flex、grid布局

原创于 2025-06-06 17:12:33 发布 · 1.2k 阅读

16 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #flex布局 #grid布局

前端专栏收录该内容

41 篇文章

订阅专栏

flex布局

弹性布局是指通过调整其内元素的宽高，从而在任何的显示设备上实现对可用显示空间最佳填充的能力。弹性容器扩展其内元素来填充可用空间，或将其收缩来避免溢出

简单来说，弹性盒子模型，是为了你的网页可以在不同分辨率设备上自适应展示而生的一种布局方式

以下面的例子来理解弹性布局：

<div id="main">
  <div style="background-color:coral;">A</div>
  <div style="background-color:lightblue;">B</div>
  <div style="background-color:khaki;">C</div>
  <div style="background-color:pink;">D</div>
  <div style="background-color:lightgrey;">E</div>
  <div style="background-color:lightgreen;">F</div>
</div>

弹性容器：包含着弹性项目的父元素，即上面的 #main

弹性项目：弹性容器的每个子元素，弹性容器直接包含的文本将被包覆成匿名弹性单元

每个弹性框布局都包含两个轴，弹性项目沿其依次排列的那根轴称为主轴，垂直于主轴的那根轴称为侧轴

在这里插入图片描述

flex-direction

flex-direction 可以确立主轴，这个属性一共有 6 个值

row：默认值，水平展开
row-reverse：与 row 相同，但是以相反的顺序
column：弹性项目将垂直展示
column-reverse：与 column 相同，但是以相反的顺序
initial：设置该属性为它的默认值
inherit：从父元素继承该属性

justify-content

justify-content: 定义了在当前行上，弹性项目沿主轴如何排布

flex-start：默认值，项目位于容器的开头
flex-end：项目位于容器的结尾
center：项目位于容器的中间
space-between：项目位于各行之间留有空白的容器内
space-around：项目位于各行之前、之间、之后都留有空白的容器内
initial：设置该属性为它的默认值
inherit：从父元素继承该属性

align-items

align-items: 定义了弹性项目在侧轴是如何排布

stretch：默认值，项目被拉伸以适应容器
center：项目位于容器的中心
flex-start：项目位于容器的开头
flex-end：项目位于容器的结尾
baseline：项目位于容器的基线上
initial：设置该属性为它的默认值
inherit：从父元素继承该属性

如果只想改变单个弹性项目的对齐方式，就用align-self，它定义了单个弹性项目在侧轴上应当如何对齐，这个定义会覆盖由 align-items 所确立的默认值

order: 属性将元素与序号关联起来，以此决定哪些元素先出现

flex-wrap

flex-wrap：规定 flex 容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向

nowrap：默认值，规定灵活的项目不拆行或不拆列
wrap：默认值，规定灵活的项目在必要时拆行或拆列
wrap-reverse：规定灵活的项目在必要的时候拆行或拆列，但是以相反的顺序
initial：设置该属性为它的默认值
inherit：从父元素继承该属性

flex-flow：是 flex-direction 和 flex-wrap 属性的简写，决定弹性项目如何排布

flex-grow、flex-shrink 和 flex-basis

flex 属性是 flex-grow、flex-shrink 和 flex-basis 的简写，描述弹性项目的整体伸缩性

1）flex-grow

flex-grow: 用于设置或检索弹性盒的扩展比率，默认等于 0，即使用本来的宽度，不拉伸；等于 1 时，就表示该项目宽度拉伸，占据当前行的所有剩余宽度

#main{
  width: 500px;
  height: 200px;
  border: 1px solid #c3c3c3;
  display:flex;
  background: red;
}
#main div{
  width: 40px;
}
.a{
  flex-grow: 2;
}
.b{
  flex-grow: 3;
}
.c{
  flex-grow: 1;
}
.d{
  flex-grow: 3;
}
.e{
  flex-grow: 2;
}
.f{
  flex-grow: 1;
}

在这里插入图片描述

2）flex-shrink

flex-shrink: 指定了 flex 元素的收缩规则，默认值为 1，当父元素的宽度小于所有子元素的宽度的和时，子元素的宽度会减小。值越大，减小越厉害；如果值为0，表示不减小

<p>div 总宽度为 500px, flex-basic 为 120px。</p>
<p>A, B, C 设置 flex-shrink:1。 D , E 设置为 flex-shrink:2</p>
<p>D , E 宽度与 A, B, C 不同</p>
<div id="content">
  <div class="box" style="background-color:red;">A</div>
  <div class="box" style="background-color:lightblue;">B</div>
  <div class="box" style="background-color:yellow;">C</div>
  <div class="box1" style="background-color:brown;">D</div>
  <div class="box1" style="background-color:lightgreen;">E</div>
</div>

在这里插入图片描述