CSS之flex弹性布局 (十二)：认识flex布局、flex布局的理解、flex-container属性、flex-item属性

限量版甜甜圈

已于 2023-06-10 15:06:03 修改

阅读量642

点赞数 1

分类专栏： CSS3 文章标签： css css3 前端 html

于 2023-05-25 08:44:17 首次发布

本文链接：https://blog.csdn.net/Sedrick_/article/details/130835261

版权

CSS3 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

跳转目录🚀

篇章	知识点
CSS之邂逅(一)	认识CSS、编写CSS样式、CSS注释、常见的CSS属性
CSS额外知识补充(二)	link元素、计算机进制、CSS表示颜色、Chorme调试工具、浏览器渲染流程
CSS属性与选择器(三)	CSS文本属性、CSS字体属性、CSS常见选择器
CSS属性的特性(四)	CSS属性的继承、CSS属性的层叠、CSS属性的类型、display属性、元素的隐藏、overflow属性、CSS不生效技巧
CSS盒子模型(五)	认识盒子模型、内容width/height、内边距padding、边框/圆角border、外边距margin、盒子和文字阴影、box-sizing
CSS设置背景(六)	background-(image、repeat、size、position、attachment)、background、background-image和img对比
CSS高级元素的使用(七)	列表元素、表格元素、表格合并、表单元素、表单常见属性
CSS之Emme语法t和结构伪类(八)	认识Emmet、常见Emmet语法、常见的结构伪类、否定伪类的使用
CSS额外知识补充(九)	border图形、Web网络字体、Web字体图标、CSS精灵图、cursor属性
CSS元素定位(十)	标准流布局、认识元素的定位、静态定位、相对定位、固定定位、绝对定位、粘性定位、z-index
CSS元素浮动(十一)	认识浮动、浮动的规则、浮动的案例、高度塌陷、清除浮动、布局方案对比
CSS flex布局(十二)	认识flex布局、flex布局的理解、flex-container属性、flex-item属性

1. 认识flex弹性布局

1.1 什么是flex弹性布局

Flex 弹性布局：我们把用Flex box弹性盒子来进行布局的方案称为flex布局(flex layout)
- 弹性盒子？ 是一种用于 是一种用于按行或按列布局元素的一维布局方法 ，元素可以膨胀以填充额外的空间, 收缩以适应更小的空间
介绍：目前特别在移动端可以说已经完全普及，在PC端也几乎已经完全普及和使用, 只有非常少数的网站依然在用浮动来布局。
为什么使用flex布局：长久以来，CSS 布局中唯一可靠且跨浏览器兼容的布局工具只有 floats 和 positioning。 但是这两种方法本身存在很大的局限性, 并且他们用于布局实在是无奈之举;
兼容性问题： 我们可以在caniuse上查询到具体的兼容性

1.2 原先布局存在的痛点

原来的布局存在哪些痛点呢? 举例说明:
1. 比如在父内容里面垂直居中一个块内容,我们前面就学了定位的垂直居中，但是只是作用于一个，如果有多个不同大小的盒子，那就是非常痛苦的。
2. 比如使容器的所有子项等分可用宽度/高度，而不管有多少宽度/高度可用。
3. 比如使多列布局中的所有列采用相同的高度，即使它们包含的内容量不同
所以长久以来, 大家非常期待一种真正可以用于对元素布局的方案: 于是flex布局出现了

2. flex弹性布局的理解

2.1 flex布局的重要概念

两个重要的概念
1. flex container: 开启了 flex 布局的元素叫flex container 弹性盒子
2. flex item: flex container 里面的直接子元素叫做 flex item 弹性元素
当 flex container 中的子元素 flex item 弹性元素具备的特点
1. flex item的布局将受flex container属性的设置来进行控制和布局。
2. flex item不再严格区分块级元素和行内级元素。
3. flex item默认情况下是包裹内容的, 但是可以设置宽度和高度。
如何转换成 flex container? => 设置 display 属性为 flex 或者 inline-flex
- flex：flex container 以 block-level 形式存在
- inline-flex： flex container 以 inline-level 形式存在

2.2 flex布局的模型

在这里插入图片描述

理解主轴和交叉轴 flex item 默认沿着主轴进行排布，当主轴元素过多并且有flex-wrap: wrap;属性时，会沿着交叉轴另起一行或列，再沿着主轴排布。

2.3 flex的相关属性

在这里插入图片描述

3. flex-container属性

3.1 flex-direction 主轴方向

作用：用于决定 main axis主轴的方向,flex items默认都是沿着 main axis主轴从 main start 开始往 main end 方向排布
常见的取值：
1. row(默认值)：行变成主轴的方向
2. row-reverse：行主轴进行反转
3. column：列作为主轴方向
4. column-reverse：列主轴进行反转

在这里插入图片描述

3.2 flex-wrap 换行

作用：用于决定 flex container 是单行还是多行。
常见的取值
1. nowrap（默认）：单行
2. wrap：多行
3. wrap-reverse：多行,令交叉轴的 cross start和cross end互换（对比 wrap，cross start 与 cross end 相反）

3.3 flex-flow 主轴和换行的简写属性

作用： flex-flow 属性是 flex-direction 和 flex-wrap 的简写。
书写规范：顺序任何, 并且都可以省略;
flex-flow的使用：这两个属性可以让我们在flex container中任意方向进行排布

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
  <style>
    .container {
      width: 500px;
      height: 500px;
      background-color: orange;

      display: flex;

      /* flex-direction: row-reverse;
      flex-wrap: wrap-reverse; */
      flex-flow: row-reverse wrap-reverse;
    }

    .item {
      width: 120px;
      height: 120px;

      background-color: #f00;
    }
  </style>
</head>
<body>
  
  <div class="container">
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
  </div>

  <script src="./js/itemRandomColor.js"></script>
</body>
</html>

3.4 justify-content 主轴对齐方式

作用： justify-content 决定了 flex items 在 main axis 上的对齐方式。
justify-content常用的值:
- flex-start（默认值）：与 main start 对齐
- flex-end：与 main end 对齐
- center：居中对齐
- space-between：flex items 之间的距离相等，与 main start、main end两端对齐
- space-around：flex items 之间的距离相等，flex items 与 main start、main end 之间的距离是 flex items 之间距离的一半
- space-evenly：flex items 之间的距离相等，flex items 与 main start、main end 之间的距离等于 flex items 之间的距离

案例练习

<!DOCTYPE html>
<html lang="en">

<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>Document</title>
  <style>
    .container {
      width: 500px;
      height: 500px;
      background-color: orange;
      /* padding: 0 10px; */
      box-sizing: border-box;

      display: flex;

      flex-wrap: wrap;

      /* 切换justify-content */
      /* flex-end: 让元素和main end对齐 */
      /* center: 居中对齐 */
      /* space-between: 两端个放一个元素, 其他多余的元素一定要空间等分 */
      /* space-evenly: 两端也有间距, 并且所有的空间进行等分 */
      /* space-around: 两端也有间距, 两端的间距是items之间的间距一半 */
      justify-content: space-evenly;
    }

    .item {
      width: 120px;
      height: 120px;

      background-color: #f00;

      /* margin-left: 20px; */
      /* margin: 0 20px; */
    }
  </style>
</head>

<body>

  <div class="container">
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
    <div class="item item4">4</div>
  </div>

  <script src="./js/itemRandomColor.js"></script>
</body>

</html>

3.6 align-items 交叉轴一行对齐方式

作用： align-items 决定了 flex items 在一行 cross axis 上的对齐方式。
justify-content常用的值:
- normal：默认值，在弹性布局中的效果和stretch一致，如果在flex container中flex item未设置高度那么就会有拉伸的效果。
- stretch：当 flex items 在 cross axis 方向的 size 为 auto 时，会自动拉伸至填充 flex container
- flex-start：与 cross start 对齐
- flex-end ：与 cross end 对齐
- center：居中对齐
- baseline：与基准线对齐，即x的最底部

3.7 align-content 交叉轴多行对齐方式

作用： align-content 决定了多行 flex items 在 cross axis 上的对齐方式，用法与 justify-content 类似。
justify-content常用的值:
- stretch（默认值）：与 align-items 的 stretch 类似，当 cross items的尺寸为auto会拉伸占满整行，若有多行就多行平均拉伸。如果有固定尺寸，那么多余的部分就会成为行距。
flex-start：与 cross start 对齐
flex-end：与 cross end 对齐
center：居中对齐
space-between：flex items 之间的距离相等；与 cross start、cross end两端对齐
space-around：flex items 之间的距离相等；flex items 与 cross start、cross end 之间的距离是 flex items 之间距离的一半
space-evenly：flex items 之间的距离相等，flex items 与 cross start、cross end 之间的距离等于 flex items 之间的距离

4. flex-item属性

4.1 order 排布顺序

作用： order 决定了 flex items 的排布顺序。
order的取值：
- 可以设置任意整数（正整数、负整数、0），值越小就越排在前面
- 默认值是 0

4.2 align-self 交叉轴一行单独设置对齐方式

作用：flex items 可以通过设置align-self 覆盖 flex container 设置的 align-items
align-self的取值：stretch、flex-start、flex-end、center、baseline，效果跟 align-items 一致

4.3 flex-grow 扩展

作用：flex-grow 决定了 flex items 如何扩展(拉伸/成长)
flex-grow的取值：
- 可以设置任意非负数字（正小数、正整数、0），默认值是 0
flex-grow的注意点
- 当 flex container 在 main axis 方向上有剩余 size 时，flex-grow 属性才会有效
- flex items 扩展后的最终 size 不能超过 max-width\max-height
计算公式：所有 flex items 的 flex-grow 总和 sum 超过 1
- flex container 的剩余 size * flex-grow / sum

4.4 flex-shrink 收缩

作用：flex-shrink 决定了 flex items 如何收缩(缩小)
flex-shrink的取值：
- 可以设置任意非负数字（正小数、正整数、0），默认值是 1
flex-shrink的注意点
- 当 flex items 在 main axis 方向上超过了 flex container 的 size，flex-shrink 属性才会有效
- flex items 收缩后的最终 size 不能小于 min-width\min-height
计算公式：所有 flex items 的 flex-shrink 总和超过 1，每个 flex item 收缩的 size为
- flex items 超出 flex container 的 size * 收缩比例 / 所有 flex items 的收缩比例之和

4.5 flex-basis 基础尺寸

作用：flex-basis 用来设置 flex items 在 main axis 方向上的 base size
flex-basic的取值：auto（默认值）、具体的宽度数值（100px）
决定 flex items 最终 base size 的因素，从优先级高到低
1. max-width\max-height\min-width\min-height
2. flex-basis
3. width\height
4. 内容本身的 size

4.6 flex 简写属性

flex 简写属性 是 flex-grow || flex-shrink || flex-basis 的简写,flex 属性可以指定1个，2个或3个值。
flex的语法形式
- 单值语法：值必须为以下其中之一
  - 一个无单位数(<number>):：它会被当作 <flex-grow> 的值。
  - 一个有效的宽度(width)值：它会被当作 <flex-basis> 的值。
  - 关键字 none：表示三值语法中 0 0 auto
  - 关键字 auto：表示三值语法中 1 1 auto
  - 关键字 initial：表示三值语法中 0 1 auto
- 双值语法：第一个值必须是一个无单位数，并且会被当作是 flex grow的值
  - 一个无单位数(<number>):：它会被当作 <flex-shrink> 的值。
  - 一个有效的宽度(width)值：它会被当作 <flex-basis> 的值。
- 三值语法：顺序为 flex grow、flex shrink、flex basis
  1. 一个无单位数(<number>)
  2. 一个无单位数(<number>)
  3. 一个有效的宽度(width)值