玩转flex布局

_l.L

已于 2024-07-15 11:33:18 修改

阅读量986

点赞数 21

分类专栏：玩转系列文章标签： javascript 开发语言 ecmascript

于 2024-07-05 14:03:27 首次发布

本文链接：https://blog.csdn.net/weixin_46529755/article/details/140202996

版权

玩转系列专栏收录该内容

14 篇文章 0 订阅

订阅专栏

1 首先我们先去创建一个`html`：

<!DOCTYPE html>
<head>
  <title>flex布局</title>
  <!-- 这里介绍四种引入css的方式 
      1.元素内部直接引用: （行内样式）
      2.在head标签中直接引入style标签
      3.在网页创建时嵌入样式表
      4.通过import导入样式
  -->
  <!-- 2.在head标签中直接引入: (链入外部样式表) -->
  <link rel="stylesheet" type="text/css" herf="index.css">
  <!-- 这里注意link标签的话不需要后标签 -->
  <!-- 3.方式三 -->
  <style>
    #element-three {
      height: 50px;
      width: 50px;
      background: pink;
    }
  </style>
</head>
<body>
  <div>
    <!-- 1.行内样式 -->
    <div style="height: 50px;width: 50px;background: green;">元素一</div>
    <div class="element-two">元素二</div>
    <div id="element-three">元素三</div>
    <!-- 方式四 -->
    <div class="element-four">元素四</div>
  </div>
</body>
<!-- 方式四 -->
<style>
  @import "index.css";
</style>
</html>

上面我补充了一下我们常用的hmtl导入style的四种方式：

元素内部直接引用
通过link引入
在html文件创建的时候引入css样式称为内部样式表
通过style的标签在最后通过import进行导入

这里样式也分优先级，简单的记忆就是离我们元素标签越近的优先级越高：
元素内部直接引用 > 内部样式表 > link > import

2 这里我们来说一下link和import的区别：

1.兼容问题，link对于任何版本都是兼容的，import在css2.1提出，低版本的浏览器不支持
2.引入时间：link引入是在页面加载之前，import是在页面加载之后
3.对js的支持不同：link支持js去操作dom去控制样式，import不支持
4.引入内容不同：link可以引入样式文件/图片等资源，import只能引入样式资源

你会发现下面本来四个块级元素占四行。
在这里插入图片描述

在给共同的父级元素加上弹性布局的时候，四个块级元素会排一个块级元素所在的一行
在这里插入图片描述
要玩flex布局的话，肯定要对他里面的属性要清楚比如说

flex-direction

这里面属性对应的值有好几种

我们默认的为row，row的话就是

在这里插入图片描述

它会在页面的最左边且排序方式从左往右为1234如果我们的这个属性的值为row-reverse

在这里插入图片描述

它会在页面的最右边且排序方式从左往右为4321它可以 row，那么肯定想到还有column

在这里插入图片描述

它会在页面的最左边且排序方式从上往下1234虽然这个我们看起来发现跟我们不使用弹性布局效果一样，但是他还是跟传统布局有所不同

在这里插入图片描述

对于传统布局我们发现如果上面的内容溢出，它会对下面元素造成影响

在这里插入图片描述

当我们使用了flex布局之后，元素和元素之间是没有影响的，它不会因为上面元素高度不够而对下面元素造成影响

如果我们的这个属性的值为column-reverse
在这里插入图片描述

这四个元素的值会发现它从上往下的顺序为4321

下面还有几个重要的属性我们娓娓道来

3 flex-wrap

这个是控制元素换不换行的
刚开始我不知道这个换不换行是什么意思，后面玩了一下才知道，换不换行的意思是当你子元素中某一个子元素占满了一行，其它的子元素要么就在原来的这一行，填满的那一行就自动换行，然后如果后面还有子元素，后面的子元素会自动换行；
要么就是它自动换行。当然默认他是不会换行的，就算你把你其中一个子元素width拉到爆炸，还是不会对其他子元素造成影响，而且页面也不会被玩烂。
这个属性对应的值有nowrap，wrap，wrap-reverse（这个的效果就是换行之后第一行会出现在下方）

4 justify-content

这个属性是控制这几个子元素出现在什么地方，
它对应的值有flex-start(默认)，flex-end(右对齐)，center（居中），space-between（两端对齐，中间相同间距），space-around（两端也会有间距，所有子元素间距都相同）

5 align-items

这个属性是控制交叉轴的对齐的
它对应的属性有很多种：flex-start（start就是他们的上边框对齐），flex-end（end就是他们的下边框对齐），center（就是中间有一个线对齐），baseline（项目的第一行文字对齐），stretch（如果项目未设置高度，会自动将高度设置为auto，将占满整个容器的高度）

6 align-items

是对一块内容的一个控制，但是我们可以通过align-content对整个内容进行控制，相当于align-items只有一根控制交叉轴对齐的线，但是content可以包含多条。
对于align-items的话也有很多属性值，flex-start（start就是上面对齐），flex-end（end就是下面对齐），center（中间对齐），space-between（两端对齐，中间间距相等），space-around（轴线的间距相等），stretch（就是让轴线的间距填满整个页面）

我们发现当我们的主轴为row或者column时他们的轴线是不一样的。
当是row时，轴线时垂直的；但是当flex-direction为column时，轴线是水平的。对于一个一个items来说，他也有很多属性去控制。