Flex布局入门学习版-前端开发-阁主学习小站

摘要：

本文记录PHP中文网23期前端部分的flex基础入门的学习笔记。

## 何为Flex布局
Flex是Flexible Box的缩写，意为”弹性盒布局”，每次只能在水平或垂直一个方向布局,用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为Flex布局：
```css
.box{
  display: flex;
}
```

行内元素也可以使用Flex布局。
```css
.box{
  display: inline-flex;
}
```

## 术语
- 容器: `display: flex / inline-flex`
- 项目: 容器子元素
- 主轴: 项目排列参考线
- 交叉轴: 与主轴垂直的参考线
![](https://www.mainblog.cn/zb_users/upload/2023/07/202307241659356436192.png)

## 基本概念

采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。
![](https://www.mainblog.cn/zb_users/upload/2023/07/202307241700104045885.png)

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

## 容器属性
常用的三个容器属性：
- `flex-flow`: 主轴方向,是否换行
-  `place-content`: 项目在主轴上的对齐方式
-  `place-items`: 项目在交叉轴上的对齐方式

## 项目属性
常用的三个项目属性：
-  `flex`: 项目在主轴上的缩放比例与宽度
-   `place-self`: 某个项目在交叉轴上的对齐方式
-   `order`: 某个项目在主轴上的排列顺序
更多属性可以去MDN查阅：[MDN-CSS 弹性盒子布局](https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout "MDN-CSS 弹性盒子布局")

## 示例代码
```html
<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>flex弹性盒</title>
</head>

<body>
  <div class="container">
    <div class="item">item1</div>
    <div class="item">item2</div>
    <div class="item">item3</div>
  </div>
  <style>
    /* 将live server 的默认浏览器改为火狐 */
    .container {
      width: 450px;
      /* height: 150px; */

/* flex容器 */
      display: flex;

/* (一) 容器属性 */
      /* 1. 主轴方向,是否换行 */
      flex-flow: row nowrap;
      /* flex-flow: row wrap; */
      /* flex-flow: row-reverse nowrap; */
      /* flex-flow: column wrap; */

/* 2. 项目在主轴上的对齐方式 */
      /* 默认:起始边(左) */
      place-content: start;
      place-content: end;
      place-content: center;
      /* 二端对齐 */
      place-content: space-between;
      /* 分散对齐 */
      place-content: space-around;
      /* 平均对齐 */
      place-content: space-evenly;

/* 3. 项目在交叉轴上的对齐方式 */
      place-items: stretch;
      place-items: start;
      place-items: end;
      place-items: center;
    }

.container>.item {
      /* 项目 */
      width: 100px;
      height: 100px;

/* (二) 项目属性 */

/* 1. 项目缩放比例与宽度 */
      /* flex: 放大因子 收缩因子 宽度 */
      /* 默认值 */
      flex: 0 1 auto;

/* 完整语法: 三值 */
      flex: 0 1 200px;
      flex: 1 1 80px;
      flex: 0 0 80px;

/* 双值,第三个值是 auto */
      flex: 0 1;
      flex: 1 1;
      flex: 0 0;

/* 单值 */
      flex: 1;
      /* flex: 1 1 auto; */
      flex: 0;

/* 关键字,属性的语义化 */
      /* 默认值 */
      /* flex: 0 1 auto; */
      flex: initial;
      /* flex: 1 1 auto; */
      flex: auto;
      /* flex: 0 0 auto; */
      flex: none;

/* 2.某个特定项目在交叉轴上的对齐*/

/* 3. 可以改变项目在主轴上排列顺序 */
    }

.item:first-child {
      flex: 2;
      order: 0;
      order: 6;
    }

.item:first-child+* {
      flex: 8;
      order: 0;
    }

.item:last-child {
      flex: 2;
      /* 2.某个特定项目在交叉轴上的对齐*/
      /* place-self: end; */

/* order: 越大越靠后 */
      order: -1;
    }

/* 三个项目 1:2:3 */
  </style>
</body>

</html>
```

本文地址：https://www.mainblog.cn/321.html
版权声明：本文为原创文章，版权归阁主所有，欢迎分享本文，转载请保留出处！
免责申明：有些内容源于网络，没能联系到作者。如侵犯到你的权益请告知，我们会尽快删除相关内容。