Skip to content

布局.md

Latest commit

 

History

History
190 lines (149 loc) · 5.54 KB

布局.md

File metadata and controls

190 lines (149 loc) · 5.54 KB

布局

float：最初是用来实现文字围绕图片效果，被巧妙用作布局

清除浮动：

  • clear 属性 + div 隔墙（或者伪元素）
  • bfc

flex（弹性布局，创建弹性格式化上下文 FFC）：

容器属性：

  • flex-direction属性决定主轴的方向；
  • flex-wrap属性定义，如果一条轴线排不下，如何换行；
  • flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap；
  • justify-content属性定义了项目在主轴上的对齐方式。
  • align-items属性定义项目在交叉轴上如何对齐。
  • align-content属性定义了多根轴线（多行）的对齐方式。如果项目只有一根轴线，该属性不起作用。

子元素属性：

  • order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
  • flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
  • flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
  • flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。
  • flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
  • align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。默认值为 auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

Flex 布局原理与使用场景

六大使用场景

1. 水平/垂直居中（经典场景）
.container {
  display: flex;
  justify-content: center; /* 主轴居中 */
  align-items: center;     /* 交叉轴居中 */
}

适用：登录弹窗、引导页焦点内容。

2. 等高分栏布局
.container {
  display: flex;
}
.item {
  flex: 1; /* 等分剩余空间 */
}

适用：卡片内容区、仪表盘统计模块。

3. 导航栏布局
.nav {
  display: flex;
  justify-content: space-between; /* 两侧对齐 */
}

适用：顶部导航（左侧Logo + 右侧菜单）、页脚链接。

4. 流式换行布局
.container {
  display: flex;
  flex-wrap: wrap;  /* 允许换行 */
  gap: 10px;        /* 项目间距 */
}

适用：商品列表、图片画廊、标签云。

5. 动态排序与定位
.item:nth-child(1) {
  order: 2;    /* 调整显示顺序 */
  align-self: flex-end; /* 单独对齐 */
}

适用：移动端适配调整元素顺序、特殊元素定位。

6. 表单布局优化
.form-group {
  display: flex;
  gap: 8px;
  align-items: center;
}
label {
  flex: 0 0 100px; /* 固定标签宽度 */
}
input {
  flex: 1;         /* 输入框自适应 */
}

适用：标签-输入框对齐、表单工具条。

grid（网格布局，创建网格格式化上下文 GFC）：

作用于父元素:

  • display: grid \ inline-grid

  • 用来生成显式的列、行：grid-template-colums/rows: 数值/百分比/fr/repeat() 等

  • 规定区域(area)的分布：grid-tempate-areas:

      		"header header"
  		
  		"sidebar content"
  		
  		"footer footer";

  • 规定默认的排序方向：grid-auto-flow: row (dense) I column (dense)

作用于子元素：

  • 规定占用的列、行：grid-colum/row: <start-line>/<end-line>
  • 规定占用的area：grid-area: header

容器指定了网格布局以后，接着就要划分行和列。grid-template-columns属性定义每一列的列宽，grid-template-rows 属性定义每一行的行高。

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
}

.container {
  display: grid;
  grid-template-columns: 33.33% 33.33% 33.33%;
  grid-template-rows: 33.33% 33.33% 33.33%;
}

.container {
  display: grid;
  grid-template-columns: repeat(3, 33.33%);
  grid-template-rows: repeat(3, 33.33%);
}

repeat()接受两个参数，第一个参数是重复的次数（上例是3），第二个参数是所要重复的值。

如果希望每一行（或每一列）容纳尽可能多的单元格，这时可以使用auto-fill关键字表示自动填充。

除了auto-fill，还有一个关键字auto-fit，两者的行为基本是相同的。只有当容器足够宽，可以在一行容纳所有单元格，并且单元格宽度不固定的时候，才会有行为差异：auto-fill会用空格子填满剩余宽度，auto-fit则会尽量扩大单元格的宽度。

repeat(auto-fill, 100px)

为了方便表示比例关系，网格布局提供了fr关键字（fraction 的缩写，意为"片段"）。如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍。

.container {
   display: grid;
   grid-template-columns: 1fr 1fr;
}

表示两个相同宽度的列。

.container {
  display: grid;
  grid-template-columns: 150px 1fr 2fr;
}

第一列的宽度为150像素，第二列的宽度是第三列的一半 75。

minmax()函数产生一个长度范围，表示长度就在这个范围之中。它接受两个参数，分别为最小值和最大值。

grid-template-columns: 1fr 1fr minmax(100px, 1fr);

grid-row-gap属性设置行与行的间隔（行间距），grid-column-gap属性设置列与列的间隔（列间距）。

.container {
  grid-gap: 20px 20px;
}

顺序由grid-auto-flow属性决定，默认值是row，即"先行后列"。也可以将它设成column，变成"先列后行"。

grid-auto-flow: column dense;

dense 意思是尽量填满