rem 是 CSS3 新增的一个相对单位，相对于根节点(html)字体大小的值，r 就是 root html{font-size:10px} ，则 2rem=20px，通过它就可以做到只修改根元素的大小，就能成比例地调整所有的字体大小，只依赖 html字体的大小。
2024年08月31日
rem 是 CSS3 新增的一个相对单位，相对于根节点(html)字体大小的值，r 就是 root html{font-size:10px} ，则 2rem=20px，通过它就可以做到只修改根元素的大小，就能成比例地调整所有的字体大小，只依赖 html字体的大小。
2024年08月31日
Flex布局
常见父项的属性：
●flex-direction :设置主轴的方向
Row 默认值从左到右
row-reverse 从右到左
2024年08月31日
要在Angular CLI项目中使用@angular/flex-layout相当简单，只需要两个步骤：
2024年08月31日
51、如何创建基本的 Flexbox 布局？
要创建基本的 Flexbox 布局，您需要定义一个 Flex 容器并指定其子元素（Flex 项）的行为方式。通过将容器的display属性设置为flex并使用各种Flexbox属性（如flex-direction、justify-content和align-items），您可以实现不同的布局。这是一个例子：
2024年08月31日
在面试的时候，当面试官问我们为什么要使用flex布局的时候，首先我们得先明白一点，问这个问题面试官到底想要了解什么？简单的回答”好用“肯定是不行的，任何方案和技术的出现都是为了弥补之前的缺陷，所以相比传统的布局方案存在的痛点，flex布局肯定有存在的优势和价值。所以接下来我们得说传统的布局是怎样的形式，然后使用了flex布局又是什么样的形式。
2024年08月31日
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue动态切换样式</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<style>
.flex{
width: 350px;
height: 500px;
background: rgba(0,0,0,0.3);
display: flex;
/* 容器的属性 */
/* flex-direction:row,row-reverse,column,column-reverse */
flex-direction: row;
/* flex-wrap:wrap,no-wrap,wrap-reverse */
flex-wrap: wrap;
/* flex-flow属性是flex-deriction与flex-wrap属性的简写集合，默认属性为row nowrap， */
/* justify-content:flex-start,flex-end,center.space-between,space-around,space-evenly*/
justify-content: space-between;
/* align-item:flex-start,flex-end,center,baseline,stretch,其中flex-start和strtch效果一样；flex-end和baseline效果一样 */
align-items: center;
/* align-content:flex-start | flex-end | center | space-between | space-around | space-evenly | */
/* align-content:center; */
}
.flex1{
width: 100px;
height: 100px;
background: blue;
/* 项目item的属性： */
/* order取值：默认0，用于决定项目排列顺序，数值越小，项目排列越靠前。 */
/* order:1; */
/*
flex-grow:默认0，用于决定项目在有剩余空间的情况下是否放大，默认不放大
假如项目1的值a，项目2的值为b，其他的项目为0，那么项目1所占据的空间为剩余所有空间的a/(a+b)
*/
/* flex-grow:1; */
/* flex-shrink:
取值：默认1，用于决定项目在空间不足时是否缩小，默认项目都是1，即空间不足时大家一起等比缩小；注意，即便设置了固定宽度，也会缩小。
但如果某个项目flex-shrink设置为0，则即便空间不够，自身也不缩小。
*/
/* flex-basis
取值：默认auto，用于设置项目宽度，默认auto时，项目会保持默认宽度，或者以width为自身的宽度，但如果设置了flex-basis，权重会width属性高，因此会覆盖widtn属性。
先设置了flex-basis属性，后设置了width属性，但宽度依旧以flex-basis属性为准
*/
/*
flex
取值：默认0 1 auto，flex属性是flex-grow，flex-shrink与flex-basis三个属性的简写，用于定义项目放大，缩小与宽度。
该属性有三个快捷键值，分别是
auto(1 1 auto) 等分放大缩小；
none(0 0 auto)不放大，但等分缩小
1 (1 1 0) 等分
*/
/*
align-self
取值：auto(默认) | flex-start | flex-end | center | baseline | stretch，表示继承父容器的align-items属性。如果没父元素，则默认stretch。
*/
}
.flex2{
width: 80px;
height: 120px;
background: green;
}
.flex3{
width: 120px;
height: 80px;
background: red;
}
.flex4{
width: 90px;
height: 80px;
background: yellow;
}
.flex5{
width: 90px;
height: 80px;
background: black;
}
</style>
</head>
<body>
<div id="app">
<div class="flex">
<div class="flex1"></div>
<div class="flex2"></div>
<div class="flex3"></div>
<div class="flex4"></div>
<div class="flex5"></div>
</div>
<div class="demo" style="display: flex;">
<div class="demo1" style="flex:1;background:red">第一</div>
<div class="demo2" style="flex:1;background:green">第二</div>
<div class="demo3" style="flex:1;background:yellow">第三</div>
</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
},
methods: {
}
});
</script>
</body>
</html>
2024年08月31日
在使用Flex 布局的时候会用到flex属性，比较常见的设置有flex:1、flex:auto (1 1 auto) 和 flex:none (0 0 auto)三种，他们都是什么意思？有什么不同呢？今天小刘就给大家介绍下它们的用途及其区别。
首先flex属性是flex-grow, flex-shrink 和 flex-basis的简写，所以其取值可以参考以下几种情况：
2024年08月31日
因为是面试题, 所以就不去敲代码去一一实现了, 因为面试官不会让你现场去敲代码; 如果有遇到现场让你敲代码的面试, 那就直接 Pass 好了; 懂得都懂 。