程序员经验分享-hwhale

flex伸缩布局看着一篇就够啦

2023-11-17

flex伸缩布局

flex弹性概念：弹性盒子是一种按行或者按列布局元素的一种布局方式。
它是需要父子盒子嵌套使用的。

作用在父盒子（容器）上的属性有：

  • flex-direction 改变轴方向
  • flex-wrap 换行
  • flex-flow 前两项的简写方式
  • justify-content 主轴对齐方式
  • align-items 侧轴对齐方式
  • align-content

作用在子盒子（子项）上的属性有

  • order
  • flex-grow 扩展比例
  • flex-shrink 收缩比例
  • flex-basis 指定子项在主轴方向上的初始大小
  • flex
  • align-self

容器属性

接下来咱们一起看看第一个属性：作用在父容器上控制子项的排列方式flex-direction 主轴方向

flex-direction 改变轴方向

flex-direction常用的属性值有这几个

  • column 纵向
  • column-reverse 纵向翻转
  • row 横向
  • row-reverse 横向翻转

在这里插入图片描述
看个例子

<!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>
        .main {
            width: 500px;
            height: 500px;
            background: skyblue;
            display: flex;
        }

        .main div {
            width: 100px;
            height: 100px;
            background: pink;
            font-size: 20px;
        }
    </style>
</head>

<body>
    <div class="main">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>

</html>

在这里插入图片描述
可以看到，给父盒子设置display:flex默认是横向排列，也就是说默认的主轴方向是横向，交叉轴方向是竖向。
接下来为父容器设置属性flex-direction: column-reverse

<!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>
        .main {
            width: 500px;
            height: 500px;
            background: skyblue;
            display: flex;
            flex-direction: column-reverse;
        }

        .main div {
            width: 100px;
            height: 100px;
            background: pink;
            font-size: 20px;
        }
    </style>
</head>

<body>
    <div class="main">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>

</html>

在这里插入图片描述

可以看到它们竖向排列并且翻转了。也就是说主轴为纵向了，侧轴为横向。

flex-wrap 换行

常有属性有：

  • nowrap (默认) 不换行
  • wrap 换行
  • wrap-reverse 换行且翻转
<!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>
        .main {
            width: 500px;
            height: 500px;
            background: skyblue;
            display: flex;
            flex-wrap: wrap; 
        }

        .main div {
            width: 100px;
            height: 100px;
            background: pink;
            font-size: 20px;
        }
    </style>
</head>

<body>
    <div class="main">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
    </div>
</body>

</html>

在这里插入图片描述
默认是不换行的，如果去掉flex-wrap: wrap或者设置为nowrap则展示效果如图：
在这里插入图片描述

flex-flow

flex-flow是flex-direction和flex-wrap的缩写，具体这么使用的：

<!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>
        .main {
            width: 500px;
            height: 500px;
            background: skyblue;
            display: flex;
            /* flex-direction: column;*/
            /* flex-wrap: wrap;  */
            flex-flow: column wrap;
        }

        .main div {
            width: 100px;
            height: 100px;
            background: pink;
            font-size: 20px;
        }
    </style>
</head>

<body>
    <div class="main">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
    </div>
</body>

</html>

在这里插入图片描述
可以看到当设置了flex-flow: colum wrap之后，子项布局既纵向排列了又换行了。

justify-content 主轴对齐方式

常用属性有：

  • flex-start 左对齐
  • flex-end 右对齐
  • center 居中
  • space-around 两端对齐，两侧距离盒子距离是每个盒子间距的一半
  • space-between 两端对齐，两侧紧挨盒子
  • space-evenly 平均分配，子项距离盒子两侧和每个子项之间都是相等的距离
<!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>
        .main {
            width: 500px;
            height: 500px;
            background: skyblue;
            display: flex;
            justify-content: flex-start;
            /* justify-content: flex-end;
            justify-content: center;
            justify-content: space-around;
            justify-content: space-between;
            justify-content: space-evenly; */
        }

        .main div {
            width: 100px;
            height: 100px;
            background: pink;
            font-size: 20px;
        }
    </style>
</head>

<body>
    <div class="main">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <!-- <div>4</div>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div> -->
    </div>
</body>

</html>

flex-start
在这里插入图片描述

flex-end
在这里插入图片描述
center
在这里插入图片描述

space-around
在这里插入图片描述

space-between

在这里插入图片描述
space-evenly
在这里插入图片描述

align-items 单行侧轴对齐方式

常用属性有：

  • stretch (默认) 拉伸
  • flex-start
  • flex-end
  • center

stretch 拉伸

<!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>
       .main {
           width: 500px;
           height: 500px;
           background: skyblue;
           display: flex;
           align-items: stretch;
       /* align-items:flex-start;
         align-items: flex-end;
         align-items: center;
         align-items: baseline; */
       }

       .main div {
           width: 100px;
           /* height: 100px; */
           background: pink;
           font-size: 20px;
       }
   </style>
</head>

<body>
   <div class="main">
       <div>1</div>
       <div>2</div>
       <div>3</div>
      
   </div>
</body>

</html>

在这里插入图片描述
flex-start
在这里插入图片描述
flex-end
在这里插入图片描述
center

在这里插入图片描述

align-content 多行侧轴对齐方式

该属性需要配合flex-wrap: wrap 一起使用，没有这个属性，align-content是不生效的
常用属性有：

  • stretch （默认）拉伸
  • flex-start
  • flex-end
  • center
  • space-around
  • space-between
  • space-evenly
<!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>
        .main {
            width: 500px;
            height: 500px;
            background: skyblue;
            display: flex;
            flex-wrap: wrap;
            /* 当不折行的情况下，align-content是不生效的 */
            align-content:space-evenly;
        }

        .main div {
            width: 100px;
            height: 100px;
            background: pink;
            font-size: 20px;
        }
    </style>
</head>

<body>
    <div class="main">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
</body>

</html>

space-evenly
在这里插入图片描述
center
在这里插入图片描述
其他属性值效果大家可以自己试试，这里就不再赘述。

子项相关属性

flex-grow

默认值是0，也是最小值，不能为负数。
表示不占用剩余的空白间隙扩展自己的宽度

flex-grow的值大于等于1时表示占满剩余宽度。

<!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>
        .main {
            width: 500px;
            height: 300px;
            background: skyblue;
            display: flex;
        }

        .main div {
            width: 100px;
            height: 100px;
            background: pink;
            /* flex-grow: 0;   默认的 */
            /* 如果比例值为1，就占满剩余的所有空间 */
            /* 400 * 0.5 -> 200 + 100 -> 300 */
            /* flex-grow: 0.5; */
            /* 当比例值大于等于1的时候，都会占满整个空间 */
            flex-grow : 2;
        }
    </style>
</head>

<body>
    <div class="main">
        <div>1</div>
    </div>
</body>

</html>

在这里插入图片描述
当flex-grow: 0.5时 扩展的宽度就是剩余宽度的一半

flex-shrink

默认值是1，表示flex容器空间不足时元素的收缩比例

<!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>
        .main{
            width:500px;
            height:200px;
            background:skyblue;
            display: flex;
        }
        .main div{
            width:600px;
            height:100px;
            background:pink;
            /* flex-shrink : 1; 自动收缩，跟容器大小相同 */

           /*  flex-shrink: 0; */
           flex-shrink: 0.5;
        }

    </style>
</head>
<body>
    <div class="main">
        <div>1</div>
    </div>
</body>
</html>

在这里插入图片描述

flex-basis

默认值是auto, 指定了flex元素在主轴方向上的初始大小

<!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>
        .main{
            width:500px;
            height:500px;
            background:skyblue;
            display: flex;
        }
        .main div{
            width:100px;
            height:100px;
            background:pink;
            flex-basis: 200px;
        }
    </style>
</head>
<body>
    <div class="main">
        <div></div>
    </div>
</body>
</html>

在这里插入图片描述

flex

flex 是flex-grow flex-shrink flex-basis的缩写

<!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>
        .main{
            width:500px;
            height:500px;
            background:skyblue;
            display: flex;
            align-items: flex-start;
        }
        .main div{
            background:pink;
            /* flex-grow: 1;
            flex-shrink: 1;
            flex-basis: 0%; */
            flex:1;

           /*  flex-grow: 0;
            flex-shrink: 1;
            flex-basis: 0%; */
           /*  flex:0; */

           /* flex-grow: 1;
            flex-shrink: 1;
            flex-basis: auto; */
           /* flex:auto; */

           /* flex-grow: 1;
           flex-shrink: 0;
           flex-basis: 50%; */
           /* flex:1 0 50%; */

        }
    </style>
</head>
<body>
    <div class="main">
        <div>测试文字</div>
    </div>
</body>
</html>

在这里插入图片描述

order

默认值是0 改变某一个flex子项的排序位置

<!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>
        .main{
            width:500px;
            height:500px;
            background:skyblue;
            display: flex;
        }
        .main div{
            width:100px;
            height:100px;
            background:pink;
        }
        .main div:nth-of-type(1){
            order:1;
        }
        .main div:nth-of-type(4){
            order:-1;
        }
    </style>
</head>
<body>
    <div class="main">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
</body>
</html>

在这里插入图片描述

align-self

默认值0 控制某一个flex子项的垂直对齐方向

<!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>
        .main{
            width:500px;
            height:500px;
            background:skyblue;
            display: flex;
            align-items: center;
        }
        .main div{
            width:100px;
            height:100px;
            background:pink;
        }
        .main div:nth-of-type(1){
        }
        .main div:nth-of-type(4){
           height:50px;
           /* align-self: auto; */  /* auto会跟父盒子的align-items属性保持一致*/
           align-self: flex-end;
        }
    </style>
</head>
<body>
    <div class="main">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
</body>
</html>

在这里插入图片描述
以上就是flex伸缩布局的全部基本内容啦

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

前端常用布局和注意事项

css

CSS3

前端

flex伸缩布局看着一篇就够啦 的相关文章

  • 位置：固定在 iPad 和 iPhone 上不起作用

    I have been struggling with fixed positioning in iPad for a while I know iScroll http cubiq org iscroll and it does not

  • 如何将“重要”添加到 zIndex

    我网站上的某些附加组件之间存在冲突 使用 Firebug 我注意到如果我将 important 添加到 z 索引 我可以避免冲突 但 z index 值是使用 JavaScript 设置的 而不是 CSS 那么如何在以下 JS 代码中添加

  • 有没有一种巧妙的方法来获取表示层中背景图像的归属？

    我有一张由 CSS 引入的 CC BY 图像 用作背景 这张图片纯粹是为了它的外观 绝对不是内容 我需要在某个地方对此图像进行归属 显然最好将此归属链接到提供该图像的好心人 但是 我真的不想将链接文本放入 HTML 中 因为这会破坏实际内容

  • 使用 CSS 创建钟形

    我正在玩CSS中的形状 想要制作一个传统的钟形 想想圣诞钟声 这是我想要的一般形状 尽管我真的不关心顶部和底部的球 这是我到目前为止所拥有的 http jsfiddle net bhlaird NeBtU http jsfiddle net

  • 具有水平和垂直冻结窗格的 Gridview

    在你说之前 是的 这个问题可能是重复的 https stackoverflow com questions 2912890 gridview freeze pane solutions https stackoverflow com que

  • 使浮动div高度相同

    我有 2 个并排的 div 我预先不知道它们的高度 它根据内容而变化 有没有一种方法可以确保它们始终具有相同的高度 即使其中一个拉伸 仅使用 CSS 我做了一个小提琴来展示 我希望红色和蓝色的 div 高度相同 http jsfiddle

  • 不透明div内的透明文本

    我有一个背景图像 上面有一个白色的 div 我希望该 div 内的文本是透明的 以便您可以 透过 背景图像 这有可能吗 应该看起来像这样 您需要将其用于您的文本CSS webkit text fill color transparent

  • 如何在 JavaScript 中将样式属性重置为其 CSS 默认值？

    在 php 生成的页面上有几个这样的元素 td class defaultTDStyle style color userDefinedCustomColor td 因此有一个默认样式 我应用了几个额外的样式来覆盖 CSS 中定义的样式 有

  • 如何创建包含左对齐元素的宽度不确定的居中 div？

    我有几个统一的蓝色元素 div style display inline block 位于紫色 div 内的红色 div 内 Mockup https i stack imgur com ylTm9 png 图 我希望蓝色元素左对齐 一行中

  • Bootstrap 轮播中的 Href

    我一直在Interwebz上搜索 但似乎找不到答案 如何在轮播链接中添加 href 我尝试将 a 标签放在 h1 标签之外 但它破坏了滑块本身的功能 这是我的代码 div class col sm 12 div class carousel

  • 删除整个表格行

    有没有办法删除整个表格行 穿过整个单元格 而不仅仅是文本 我尝试过申请 text decoration line through 在列和行级别 但这只会删除文本 而不是整个单元格 有没有办法打整排 如果所有行的高度相同 最简单的方法可能是应

  • 使轮子在IE中旋转

    我有以下使用 JS 和 CSS 旋转轮子的代码 var prefix function if document body style MozTransform undefined return MozTransform else if do

  • 是否可以从外部样式表而不是计算值获取 dom 元素的特定 css 属性的值？ [复制]

    这个问题在这里已经有答案了 jquery css 方法对此不起作用 是否有另一种方法可以获取 css 表中的实际值 例如百分比等 这是一个示例 表明 css 不适用于此 外部CSS margin left 10 Js Code var Ma

  • 将文本置于圆形按钮上居中

    我想创建一个按钮圆形链接 其中包含文本 但我在将文本置于圆形按钮内居中时遇到问题 行高太大 对这个问题有什么建议吗 这是代码 https jsfiddle net hma443rL https jsfiddle net hma443rL b

  • 标签转换问题

    我是 html css 新手 当用户在输入框中输入无效输入时出现错误 然后特定输入字段的标签会下降 但是当用户输入时 输入正确则工作正常

  • CSS 停止表格行内的分页符

    我试图避免在可能超过一页的 HTML 表的行内出现分页符 我正在使用 Internet Explorer 打印预览以及 BCL EasyPDFSDK 转换为 PDF 来测试这一点 我将以下 CSS 样式以各种组合应用到 td 元素 但对于每

  • 为什么 margin-top: auto 和 margin-bottom:auto 的工作方式与左侧和右侧的对应项不同？

    如果我像这样设置 div 的 CSS margin 属性 div margin left auto margin right auto 我得到一个在页面中水平居中的 div like so http jsfiddle net T8Hnb 但

  • 将变换值添加到元素上已有的当前变换中？

    假设我有一个div那有translateX and translateY动态添加的值 div class object child0 style width 50px height 50px 我想添加rotateY 20deg 到当前的变换

  • IE 9 的子元素不透明，我无法使用 captify 阻止它

    好的 我正在使用一段名为 Captify 的 javascript 它为您的图像添加了一个带有文本的小弹出窗口 适用于所有接受 IE9 的浏览器 IE9 会淡化弹出 div 中的所有内容 我已阅读其子元素问题 但无法修复它 由于在网上任何地

  • 显示带有 jQ​​uery-ui 自动完成功能的微调器

    我一直在到处搜索 但没有看到有人这样做 是否有可能拥有某种带有 jQ uery UI 自动完成功能的旋转器 加载器 1 8 获取数据时 我的解决方案是使用 ui autocomplete loading CSS 类 该类在 ajax GET

随机推荐

  • 初学者的卡尔曼滤波——扩展卡尔曼滤波

    简介 转自 http www cnblogs com ymxiansen p 5368547 html 已经历经了半个世纪的卡尔曼滤波至今仍然是研究的热点 相关的文章不断被发表 其中许多文章是关于卡尔曼滤波器的新应用 但也不乏改善和扩展滤波

  • vue中监听元素尺寸变化

    data中 widthPlay 0 元素宽 heightPlay 0 元素高 observer null mounted中监听 let ResizeObserver window ResizeObserver window WebKitRe

  • 极光笔记

    PART 01 前 言 随着网络技术的发展 从粗犷型到精细化运营型 再到现在的数字化运营 数据变得越来越细分和重要 不仅可以进行策略调整 还可以实现自动化的精细化运营 而数据价值的起点就是埋点 只有合理地埋点 规范地上报 数据才会产生价值

  • SpringBoot 使用 log4j2

    一 新建工程 选择一些基础依赖 填写工程名称和项目路径 二 工程配置 修改文件编码格式 设置Java Compiler 修改maven配置文件路径 三 pom xml的web依赖中排除掉logging依赖 并且引入log4j2依赖

  • Apikit 自学日记：API 异常监控-监控报告

    在 api 管理中 查看 api 异常监控的监控报告 在 apikit 中也是常用的功能 通常你可以在流程综合报告页中看到当前流程在选定时间段内的整体监控情况 在 APIkit 中监控报告有这几种类别 单接口监控报告 流程监控报告 项目监控

  • 【C#学习笔记】读文件

    using System using System IO namespace ConsoleApplication class Program static void Main string args FileStream file new

  • 解决Win11休眠一段时间后自动关机的问题

    1 Win11系统有以下工作状态 S0 工作状态 系统完全可用 S0 睡眠 现代待机 低功耗空闲 网络可用 S1 睡眠 CPU停止工作 S2 睡眠 CPU关闭 S3 睡眠 仅保留内存工作 S1 S3 S4 混合睡眠 睡眠和休眠状态的组合 S

  • 最小生成树和最短路径算法

    图的概念 图表明了一种多对多的关系 图由两个元素组成 节点 vertex 和边 edge 有向图 如果给每条边规定一个方向 那么就是一个有向图 入度出度 对于有向图而言 指向一个顶点的边数称为一个点的入度 从一个顶点指出的边的个数就是出度

  • 【深度探索STL】空间配置器(二) 第一级配置器

    了解内存配置后的对象构造行为和内存释放前的对象析构行为后 参见博文 http blog csdn net wenqian1991 article details 19545049 空间配置器 构造与析构 我们再来学习内存的配置与释放 定义在

  • Keil5/MDK结构体无法自动指示成员变量

    方法总结 1 点击魔术棒法 1条消息 MDK5的结构体变量成员不提示问题的解决办法 weixin 45722312的博客 CSDN博客 keil5结构体加点后没有提示成员https blog csdn net weixin 45722312

  • elasticsearch基础5——文档处理解析、数据入盘流程、文档分片存储

    文章目录 一 同步和异步 阻塞和非阻塞 1 1 四种组合 二 客户端 2 1 高级客户端文档解析 2 2 文档索引 2 3 构建JSON文档 2 4 文档处理过程解析 2 5 数据入盘流程 2 6 与MongoDB比较 三 文档分片存储 3

  • java 生成uuid 16位_java生成16位随机UUID数

    public void testUid for int i 0 i UUID uuid UUID randomUUID System out println uuid toString 9e0db051 5ca9 46f4 958f ebd

  • STM32CubeMX学习六 之ADC配置

    文章目录 前言 一 本地环境 二 开始 1 定时器配置 2 引脚配置 在这里插入图片描述 https img blog csdnimg cn e5b6f155a1b8468cb15046a0a9d031cd png 3 内部时钟配置 4 A

  • redis必杀命令：列表(List)

    题记 Redis列表是简单的字符串列表 按照插入顺序排序 你可以添加一个元素导列表的头部 左边 或者尾部 右边 一个列表最多可以包含 232 1 个元素 4294967295 每个列表超过40亿个元素 例如 wd wd usr local

  • idea+springboot启动报错 ERROR org.apache.catalina.core.ContainerBase

    用idea导入了一个spring boot的项目 结果启动报错 ERROR org apache catalina core ContainerBase A child container failed during start tomca

  • 【JavaScript高级】Proxy和Reflect

    文章目录 存储属性描述符监听对象 Proxy 基本使用 set和get捕获器 Proxy的其他捕获器 construct和apply捕获器 Reflect 作用 方法 举个例子 Reflect的construct Receiver 参考 存

  • React 开发一个移动端项目（1）

    技术栈 项目搭建 React 官方脚手架 create react app react hooks 状态管理 redux redux thunk UI 组件库 antd mobile ajax请求库 axios 路由 react route

  • 1）数据库系统概述

    文章目录 一 数据库概念 二 常见的数据模型 三 关系型数据库 1 关系术语 2 关系的特点 3 常见存在的关系问题 4 关系运算 四 数据库设计 1 设计步骤 2 设计实例 一 数据库概念 长期存放在计算机上有组织的可共享的数据集合 二

  • secure boot 是什么

    一 secure boot 是什么 secure boot 中文叫安全启动 是电脑行业成员共同开发的一种安全机制 用于确保电脑只能启动原装系统 如果电脑重装了其他系统 那么这个系统是启动不了的 说白了 就是垄断 所以安装完其他系统 必须关闭

  • flex伸缩布局看着一篇就够啦

    flex伸缩布局 flex弹性概念 弹性盒子是一种按行或者按列布局元素的一种布局方式 它是需要父子盒子嵌套使用的 作用在父盒子 容器 上的属性有 flex direction 改变轴方向 flex wrap 换行 flex flow 前两项

热门标签