flex 使用及弹性布局

flex 快速实现水平和垂直居中
css 代码

.box {
    display: flex;
    justify-content: center;
    align-items: center;
  }

效果演示

flex 实现三列布局
代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>flex实现三列布局</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      /* 页面元素的基本属性设置 */
      header,
      footer {
        height: 8vh;
        background-color: violet;
      }
      .box {
        height: 84vh;
        margin: 0.5em 0;
      }
      .box aside {
        background-color: skyblue;
        min-width: 15em;
      }
      .box main {
        background-color: springgreen;
        min-width: calc(100% - 30em);
        margin: 0 0.5em;
      }
      /* 中间主体用felx弹性盒布局实现 */
      .box {
        display: flex;
      }
    </style>
  </head>
  <body>
    <header>页眉</header>
    <div class="box">
      <aside>左侧边栏</aside>
      <main>内容主体</main>
      <aside>右侧边了</aside>
    </div>
    <footer>页脚</footer>
  </body>
</html>

效果演示

grid 实现 demo0 中的三列布局
代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>grid实现demo0中的三列布局</title>
  </head>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body > * {
      background-color: springgreen;
    }
    /* grid布局 */
    body {
      height: 100vh;
      display: grid;
      /* 页面布局可以看做三行三列的网格布局，其中页眉和页脚是夸3列 */
      grid-template-rows: 8vh 1fr 8vh;
      grid-template-columns: 15em 1fr 15em;
      gap: 0.5em;
    }
    header,
    footer {
      grid-column: span 3;
    }
  </style>
  <body>
    <header>页眉</header>
    <aside>左侧边栏</aside>
    <main>内容主体</main>
    <aside>右侧边了</aside>
    <footer>页脚</footer>
  </body>
</html>
效果演示

弹性容器与弹性项目

任何元素都可以通过添加 display: flex 属性,转为弹性盒元素
转为 flex 元素后,它的内部的”子元素”就支持 flex 布局了
使用了 display: flex 属性的元素称为: flex 容器
flex 容器中的”子元素”称之为: flex 项目
容器中的项目自动转为”行内块元素”(不管之前是什么类型)

flex 容器允许嵌套，在实际工作中会大量使用到
代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>弹性容器与弹性项目</title>
<style>
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.box {
  display: flex;
  height: 15em;
  border: 1px solid black;
  padding: 1em;
  margin: 1em;
}
.item {
  width: 5em;
  height: 6em;
  border: 1px solid black;
  background-color: skyblue;
}
.box > .item:nth-of-type(4) {
  display: flex;
}
.box > .item:nth-of-type(4) > div {
  border: 1px solid black;
  background-color: yellow;
}
</style>
</head>
<body>
<div class="box">
<div class="item">item1</div>
<div class="item">item2</div>
<div class="item">item3</div>
<div class="item">
  item4
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
</div>
</body>
</html>

效果演示

弹性容器、项目、主轴、交叉轴
- 弹性容器：
  弹性容器是具有display:flex属性元素
  弹性容器有单行容器和多行容器，其中多行容器在一行显示不下时允许换行
- 项目：
  项目就是弹性容器里的元素
- 主轴：
  主轴就是项目的排列方式的那条轴线
- 交叉轴：
  交叉轴是与主轴垂直的那条轴线

容器属性

序号	属性	描述
1	`flex-flow`	主轴方向与换行方式
2	`justify-content`	项目在主轴上的对齐方式
3	`align-items`	项目在交叉轴上的对齐方式
4	`align-content`	项目在多行容器中的对齐方式

flex-flow属性的属性值

序号	属性值	描述
1	`flex-flow: row nowrap;`	单行容器，单行放不下不允许换行
2	`flex-flow: row wrap;`	多行容器，单行放不下允许换行
3	`flex-flow: column nowrap;`	主轴默认方向由水平方向改为垂直方向，单行放不下不允许换行
4	`flex-flow: column wrap;`	主轴默认方向由水平方向改为垂直方向，单行放不下允许换行

justify-content属性的属性值（项目在主轴上的对齐方式；单行容器）

序号	属性值	描述
1	`justify-content: flex-start;`	将所有项目是为一个整体，整个项目组靠容器左边排列
2	`justify-content: flex-end;`	将所有项目是为一个整体，整个项目组靠容器右边排列
3	`justify-content: center;`	将所有项目是为一个整体，整个项目组在容器中居中排列
4	`justify-content: space-between`	所有项目都是为独立的个体，两端对齐
5	`justify-content: space-around`	所有项目都是为独立的个体，分散对齐
6	`justify-content: space-evenly`	所有项目都是为独立的个体，平均对齐

align-items属性的属性值（项目在交叉轴上的对齐方式，单行容器）

序号	属性值	描述
1	`align-items: stretch;`	在交叉轴上，项目所占空间大小默认拉伸
2	`align-items: flex-start;`	在交叉轴上，项目紧靠顶部，大小由内容撑开
3	`align-items: flex-end;`	在交叉轴上，紧靠底部，大小由内容撑开
4	`align-items: center;`	在交叉轴上，居中排列，大小由内容撑开

align-content属性的属性值（项目在多行容器中的对齐方式）

序号	属性值	描述
1	`align-content: stretch;`	项目在多行容器中默认排列
2	`align-content: flex-start;`	所有项目紧靠顶部，挤在一起，大小由内容撑开
3	`align-content: flex-end;`	所有项目紧靠底部，挤在一起，大小由内容撑开
4	`align-content: center;`	所有项目居中排列，挤在一起，大小由内容撑开
5	`align-content: space-between;`	元素挤在一起，大小由内容撑开，排列在容器的顶部和底部
6	`align-content: space-around;`	元素挤在一起，大小由内容撑开，居中排列在容器的中间
7	`align-content: space-evenly;`	元素挤在一起，大小由内容撑开，平均排列在容器的中间

项目属性

序号	属性	描述
1	`flex`	项目的缩放比例与基准宽度
2	`align-self`	单个项目在交叉轴上的对齐方式
3	`order`	项目在主轴上排列顺序

flex属性的属性值
flex: flex-grow flex-shrink flex-basis
flex: 放大因子收缩因子项目在主轴上的基准宽度

序号	属性值	简写	描述
1	`flex: 0 1 auto;`	`flex: initial;`	默认不放大或收缩
2	`flex: 1 1 auto;`	`flex: auto;`	允许放大和收缩
3	`flex: 0 0 auto;`	`flex: none;`	禁止放大和收缩

如果只有一个数字,省掉后面二个参数,表示的放大因子flex: 2;

align-self 属性的属性值(单个项目在交叉轴上的对齐方式)

序号	属性值	描述
1	`align-self: stretch;`	默认方式对齐
2	`align-self: flex-start;`	单个项目紧靠容器顶部排列，大小由内容撑开
3	`align-self: flex-end;`	单个项目紧靠容器底部排列，大小由内容撑开
4	`align-self: center;;`	单个项目紧靠容器居中排列，大小由内容撑开

单个项目在交叉轴上还支持绝对定位

order属性的属性值（项目在主轴上排列顺序）
默认情况下，项目按照书写顺序，沿着主轴排列
通过修改 order 属性order: 5;;order: -1;来改变项目在主轴上的排序。

flex 使用及弹性布局

flex 使用及弹性布局

相关文章