【CSS】css弹性布局、CSS hack_08

儒雅的烤地瓜

已于 2024-06-20 15:49:54 修改

阅读量451

点赞数 3

分类专栏： # ⭐ CSS入门基础文章标签： css 前端弹性 css hack css 弹性布局

于 2022-11-07 10:34:29 首次发布

本文链接：https://blog.csdn.net/sunyctf/article/details/127385454

版权

⭐ CSS入门基础专栏收录该内容

10 篇文章 1 订阅

订阅专栏

🆙【前文回顾】👉 css常用复杂选择器都有哪些？看这一篇就够了_07

❣️ 弹性布局（重点）

项目中能用弹性的都能用浮动写，但是能用弹性的都不建议用浮动，都用弹性来写。弹性布局是目前的主流布局，浮动是比较low的过时的布局，当前弹性蒸蒸日上，现在是弹性的天下，写项目时，没辙了根本就解决不了了，再用相对定位、绝对定位。

谈谈flex布局

我们知道当并列书写多个div标签，它们会纵向向下排位，如果我们想将多个div并列成一排，就得借助position，float，或display属性，这便是传统的盒模型做法。

而flex布局则是一种新的布局方案，通过为修改父div的display属性，让父元素成为一个flex容器，从而可以自由的操作容器中子元素(项目)的排列方式。

例如我们让多个div横向排列，传统做法是使用浮动，但浮空后因为脱离文档流的缘故，父元素会失去高度，这又涉及了清除浮动等一系列的问题。

而flex布局相对简单很多，修改父元素display:flex，你会发现div自动就排列成了一行，而且没有浮动之后的副作用，从回流角度考虑，flex的性能更优于float；随着浏览器不断兼容以及旧版本的淘汰，flex布局注定会成为更为流行的布局方案。

1.什么是弹性布局

主要解决某个元素中的子元素们的布局方式

在垂直和水平方向的对齐提供了极大的便捷

2.关于弹性布局的相关名称

(1) 弹性容器

设置了display:flex的那个元素。

这个元素本身不是弹性布局，他的儿子们按照弹性布局的方式来显示（不会作用到孙子身上）

(2) 弹性项目

设置了display:flex的那个元素的子元素。

是真正按照弹性布局方式来显示的元素

(3) 主轴

项目们的排列方向，称为主轴。4条主轴

(4) 交叉轴

永远与主轴垂直的一个方向

(5) 项目布局

注意，我们通过设置项目在主轴上的对齐方式，和在交叉轴上的对齐方式，来控制项目的布局

3.弹性语法

把父元素变成弹性容器，让儿子们按照弹性的方式显示

display: flex; 将块级元素设置为弹性容器

display: inline-flex；将行内元素设置为弹性容器

4.容器属性

写在容器中，同时设置所有项目

(1) 设置主轴的方向

flex-direction: row; (默认值row) →

row-reverse ←

column ↓

column-reverse ↑

(2) 设置项目在主轴方向是否换行

当主轴方向空间不够时，项目是否换行

flex-wrap: nowrap; 不换行，压缩 (默认值)

wrap 不压缩，换行

wrap-reverse 不压缩，换行，但效果与wrap相反

👉🏻 举个例子：比如容器宽度为300px，容器中有6个宽度为60px的项目，nowrap情况下，项目会强行等分容器宽度从而不换行，那么项目实际宽度也就只有50px了，而非我们自己设置的60px。

👉🏻 wrap表示换行，即项目不会等分容器宽度，而是根据自身宽度进行排列，如果超出父容器宽度则自然换行。

👉🏻 wrap-reverse同样表示换行，需要注意的是第一排会紧贴容器底部，而不是我们想象的项目6紧贴容器顶部，效果与wrap相反。

flex-wrap: wrap-reverse 也是自动换行，但不同的是，它是从底下开始排列的（之前我们都是从上面开始排的）。

注意：wrap-reverse 规定灵活的项目在必要的时候拆行或拆列，但是以相反的顺序。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>flex布局</title>
  <style>
    .flex-container {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap-reverse;
      background-color: DodgerBlue;
    }
    /* 选择父元素样式是 .flex-container 的所有 <div> 元素 */
    .flex-container>div {
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #f1f1f1;
      width: 100px;
      height: 80px;
      margin: 10px;
    }
    .flex-container>div>div {
      background-color: yellowgreen;
      width: 50px;
      height: 50px;
      line-height: 50px;
      text-align: center;
      font-size: 30px;
    }
  </style>
</head>
<body>
  <div class="flex-container">
    <div>
      <div>1</div>
    </div>
    <div>
      <div>2</div>
    </div>
    <div>
      <div>3</div>
    </div>
    <div>
      <div>4</div>
    </div>
  </div>
</body>
</html>

运行结果：

(3) 上面两个属性简写

flex-flow: direction wrap;

简写：flex-flow:row nowrap;(默认值) ——默认主轴方向为row、主轴方向不换行，nowrap

说明：flex-flow属性是flex-deriction与flex-wrap属性的简写集合，默认属性为row nowrap，即横向排列，且不换行，如果需要控制项目排列与换行，推荐使用此属性，而非单独写两个。

(4) 设置项目们在主轴上的排列方式

justify-content: flex-start; 主轴起点对齐 (默认值)

flex-end 主轴终点对齐

center 主轴的中间

space-around 每个项目周围的空间平均分配

space-between 两端对齐

justify-content 用于控制项目在横轴的对齐方式，默认flex-start，即左对齐，center 为居中，对应的flex-end为右对齐。

space-between为左右两端对齐，即左右两侧项目都紧贴容器，且项目之间间距相等。

space-around为项目之间间距为左右两侧项目到容器间距的2倍，比较特别的布局，日常使用不太多。

space-evenly为项目之间间距与项目与容器间距相等，相当于除去项目宽度，平均分配了剩余宽度作为项目左右margin。

(5) 项目在交叉轴上的对齐方式（交叉轴只有两个方向 ↓ →）

交叉轴：主轴垂直方向，默认垂直起点上面

align-items: flex-start; 交叉轴起点对齐(默认值)

flex-end 交叉轴终点对齐

center 交叉轴中间对齐

baseline 以项目内部的文本基线对齐

stretch 项目在交叉轴方向的尺寸不写(比如高度没写)，项目会充满整个交叉轴

align-items 用于控制项目在纵轴排列方式，默认stretch即如果项目没设置高度，或高度为auto，则占满整个容器，下面第一张图的项目没设置高度，其余图片中均为60px。

flex-start会让项目在纵轴紧贴容器顶部，flex-end与之相反：

center使用最多，自然不会陌生，在纵轴中心位置排列：

baseline比较特殊，它让项目以第一行文字的基线为参照进行排列：

注意，常理来说justify-content与align-items默认分别处理项目横轴，纵轴的对齐方式，但如果我们修改了flex-direction为column，它们处理的轴向会交换，也就是justify-content处理纵轴，align-items处理横轴。

(6) 多行项目在交叉轴上的对齐方式（交叉轴只有两个方向 ↓ →）

用于控制多行项目的对齐方式，如果项目只有一行则不会起作用；默认stretch，即在项目没设置高度，或高度为auto情况下让项目填满整个容器，与align-items类似。注意，如下演示的12个项目我均没有设置高度。

flex-start ，center，flex-end 与align-items属性表现一致：

space-around与justify-content保持一致，即项目之间间距为上下两端项目与容器间距两倍。

space-evenly同理，项目之间间距与项目到容器之间间距相等，space-between为上下两侧项目紧贴容器。

align-content其实也有baseline等其它可用值，表现与上面介绍过的属性一致，只是单行项目或多行项目的区别。

👋🏻 CSS align-content 属性

定义和用法
align-content 属性在弹性容器内的各项没有占用交叉轴上所有可用的空间时对齐容器内的各项（垂直）。

提示：使用 justify-content 属性对齐主轴上的各项（水平）。

注意：容器内必须有多行的项目，该属性才能渲染出效果。

参考资料：CSS align-content 属性 | 菜鸟教程

👋🏻 align-content和align-item的区别

align-content 适用于多行，align-item 则是适用于单行。

align-content（单行无效）可以设置上对齐、下对齐、居中、拉伸、平分剩余空间；align-item上对齐、下对齐、居中、拉伸。
<!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>
      .demo {
        display: flex;
        flex-wrap: wrap;
        width: 500px;
        height: 500px;
        background-color: aqua;
        justify-content: space-around;
        align-content: space-between;
      }
      .demo span {
        width: 200px;
        height: 100px;
        background-color: brown;
        margin: 15px;
      }
    </style>
  </head>
  <body>
    <div class="demo">
      <span>1</span><span>2</span><span>3</span> <span>4</span><span>5</span><span>6</span>
    </div>
  </body>
</html>
结果：

5.项目属性

写在某一个项目中，只设置当前这个项目

(1) 设置交叉轴对齐方式

align-self: flex-start; 默认值，交叉轴起点

flex-end 交叉轴终点

center 交叉轴中间

baseline 以项目内部的文本基线对齐

stretch 项目在交叉轴方向的尺寸不写，项目会充满整个交叉轴

auto 使用父元素设置的align-items的值

取值：auto(默认) | flex-start | flex-end | center | baseline | stretch ，auto表示继承父容器的align-items属性。如果没父元素(父容器)，则默认stretch。

用于让个别项目拥有与其它项目不同的对齐方式，各值的表现与父容器的align-items属性完全一致。

(2) 设置项目的排列顺序

order: 取值为不带单位的数字，默认值为0

数字越小，越靠近主轴起点

(3) flex-grow

如果主轴方向的空间有剩余，会让项目们变大，去填充剩余空间

flex-grow：默认值为0，不填充

设置的值，是把剩余空间分成n分，我要增加n分

取值：默认0，用于决定项目在有剩余空间的情况下是否放大，默认不放大；

假设默认三个项目中前两个个项目都是0，最后一个是1，最后的项目占满剩余所有空间。

假设只有第一个项目默认为0，后面两个项目flex-grow均为1，那么后两个项目平分剩余空间。

假设第一个项目默认为0，第二个项目为flex-grow:2，最后一个项目为1，则第二个项目在放大时所占空间是最后项目的两倍。

(4) flex-shrink

如果主轴方向的空间不足，项目们如何压缩

flex-shrink:1; 默认值，压缩

把不足的部分按照比例分割，当前项目尺寸减去对应比例

取值：默认1，用于决定项目在空间不足时是否缩小，默认项目都是1，即空间不足时大家一起等比缩小；注意，即便设置了固定宽度，也会缩小。

但如果某个项目flex-shrink设置为0，则即便空间不够，自身也不缩小。

上图中第二个项目flex-shrink为0，所以自身不会缩小。

(5) flex-basis

设置项目在主轴方向上的基本尺寸

优先级大于width/height

取值：默认auto，用于设置项目宽度，默认auto时，项目会保持默认宽度，或者以width为自身的宽度，但如果设置了flex-basis，权重会比width属性高，因此会覆盖widtn属性。即项目本身之前设置了宽，之后又设置了flex-basis，以flex-basis设置的宽度为准。

上图中先设置了flex-basis属性，后设置了width属性，但宽度依旧以flex-basis属性为准。

问题：一般img不使用这个属性，有可能会出bug

图片设置尺寸尽量不要使用basis ，如flex:0 0 50% 如果图片尺寸不合适，可能会被拉伸或是挤压，比如图片本身宽度是100px，而其父元素的宽度是500px，因为图片设置的basis是50%，即父元素的50%，由于此时图片宽度以basis设置为准为250px，就会造成图片宽度过大被拉伸。因此，图片可以直接使用width，如width:100%

flex-basis:px为单位的数字

% ——父元素的百分比宽度

(6) 简写方式

flex:grow shrink basis;

例如：flex:0 0 25%;

取值：默认0 1 auto，flex属性是flex-grow，flex-shrink与flex-basis三个属性的简写，用于定义项目放大，缩小与宽度。

该属性有两个快捷键值，分别是auto(1 1 auto)等分放大缩小，与none(0 0 auto)不放大不缩小。

❣️ CSS hack

由于低版本浏览器不兼容一些样式的功能

为了让css能够兼容低版本浏览器，我们需要写css hack

-webkit- chrome/safari

-moz- firefox

-o- opera

-ms- IE

💦 扩展：CSS hack

👉 什么是CSS hack

由于不同厂商的浏览器或某浏览器的不同版本（如IE6-IE11,Firefox/Safari/Opera/Chrome等），对CSS的支持、解析不一样，导致在不同浏览器的环境中呈现出不一致的页面展现效果。这时，我们为了获得统一的页面效果，就需要针对不同的浏览器或不同版本写特定的CSS样式，我们把这个针对不同的浏览器/不同版本写相应的CSS code的过程，叫做CSS hack!

👉 CSS hack的原理

由于不同的浏览器和浏览器各版本对CSS的支持及解析结果不一样，以及CSS优先级对浏览器展现效果的影响，我们可以据此针对不同的浏览器情景来应用不同的CSS。

👉 CSS hack分类

CSS Hack大致有3种表现形式，CSS属性前缀法、选择器前缀法以及IE条件注释法（即HTML头部引用if IE）Hack，实际项目中CSS Hack大部分是针对IE浏览器不同版本之间的表现差异而引入的。