1015 Flex 弹性布局

Flex 弹性布局

1015 Flex 布局样式

主要讲

1. 看 VueCli 官方文档版本的信息,在 npm 查看 stylus 的版本资料
2. 面试官问你：对一个数组你怎么处理呀。你一脸蒙 B 了。
3. 以后还要讲 webpack
4. 讲上节课遗留的 stylus 问题,命令行安装 npm i stylus@3 -D,还有代码补全设置。
5. stylus 语法高亮
6. 昨天讲了 Flex 的三大核心。
7. 在 Vue 中使用原生的插件 Swiper
8. FlexDemo1 测试小例子
9. Flex 实现响应式布局

应用 Flex 去做页面排版布局

1. flex 是一种弹性盒子布局方式
2. 抛弃原来的 float 布局方式
3. 设为 Flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。
4. flex 核心 学之前就要搞懂了
5. 容器：设置了 display:flex; 的元素就是容器
6. 容器的属性: felx-direction(换方向) flex-wrap(换行) flex-flow (前面两者的简写) justify-content(规定项目主轴的排列顺序) align-items(规定项目在副轴的对齐顺序 align-content(多轴线，规定在副轴线的对齐方式)
7. 容器的轴线:分横向和纵向，默认主轴线是横向
8. 项目: display:flex; 的子元素就是项目，项目并不会超出盒子，而且项目按照容器的主轴线排列，项目会自动转化为块元素，项目如果没有设置高度默认和容器的过渡一致，想竖排的话容器 修改轴线 flex-direction:column
9. order(排列顺序) flex-grow(是否占满剩余空间) flex-shrink(是否缩小空间) flex-basis flex(前面三个的简写) align-self(单个的排列顺序)
10. align-items属性 是控制项目在副轴的排列顺序。如果项目没有设置副轴方向上的大小原本是和容器副轴大小一致，设置了 align-items 项目的大小就是项目本身内容的大小。

四 项目的属性

1. order 属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

2. flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大，一个定义了之后，单单哪一个就全部占满了剩下的空间，如果是两个，那就是两个平分剩下的空间，三个也是平分剩下的空间，以此类推。

3. 如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

4. 剩下300px 一个设置为 1 一个设置为 2 那么就平分三份 100px 200px 总的来说就是设置了他们就占满剩余的空间

5. flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

6. 如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
   7.align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

7. 京东移动端

   • flex-direction:column
   • justify-content:space-between
   • justify-content:space-around
   • 垂直居中:align-items:center
   • 上中下占全屏居中。

8. 掘金左固定 200px 右侧随意放大缩小

   • 第一种掘金方案(建议使用)
   • 右侧 flex-grow:1 (放大)
   • 左侧 flex-shrink:0; (不缩小)
   • 第二种解决方案
   • 右侧的大小直接用 100%-200px

9. 网易云注册的字体对齐

can i use

Flex 布局教程：语法篇----阮一峰
flex学习笔记
响应式布局利器—我对flex布局的理解

<template>
  <div>
    <h3>学习使用 Flex 布局方式给页面排版布局</h3>
    <!-- flex 是一种弹性盒子布局方式 -->
    <!-- 抛弃原来的 float 布局方式 -->
    <!-- 设为 Flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。 -->
    <!-- flex 核心 学之前就要搞懂了-->
    <!-- 容器：设置了 display:flex; 的元素就是容器  -->
    <!-- 容器的轴线:分横向和纵向，默认主轴线是横向 -->
    <!-- 项目: display:flex; 的子元素就是项目，项目并不会超出盒子，而且项目按照容器的主轴线排列，项目会自动转化为块元素，项目如果没有设置高度默认和容器的过渡一致，想竖排的话就给容器修改轴线 flex-direction:column -->
    <!-- order flex-grow flex-shrink  flex-basis  flex  align-self -->
    <div class="wrap">
      <div class="a">1A</div>
      <div class="b">2B</div>
      <div class="c">3C</div>
      <div class="d">4D</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "FlexDemo",
};
</script>

<style>
/* 如果 .wrap  没有高的话是撑不起来的，如果加了 flex布局的话这些问题就迎刃而解，不会超出，还会等比的缩小放大*/
.wrap {
  width: 400px;
  height: 200px;
  border: 1px solid blue;
  display: flex; /* 定义容器 */
  /* 修改竖轴线 左右*/
  /* flex-direction: row; */
  /* 修改竖轴线 右左*/
  /* flex-direction: row-reverse;   */
  /* 修改竖轴线 上下 */
  /* flex-direction: column;   */
  /* 修改竖轴线 下上*/
  /* flex-direction: column-reverse;   */

  /* 默认不换行 */
  /* flex-wrap: nowrap; */
  /* 换行并且第一行在上方 23 */
  /* flex-wrap: wrap;  */
  /* 换行并且第一行在下方 */
  /* flex-wrap: wrap-reverse; */

  /* flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。 */
  /* flex-flow: row wrap; */

  /* 左对齐 */
  /* justify-content: flex-start; */
  /* 右对齐 */
  /* justify-content: flex-end; */
  /* 居中对齐 */
  /* justify-content: center; */
  /* 两端对齐。项目之间的间隔都相等 */
  /* justify-content:space-between; */
  /* 每个项目的两侧都相等，相当于有 padding-left padding-right */
  /* justify-content:space-around; */

  /* 默认是上下的 */
  /* 交叉轴的起点对齐 */
  /* align-items:flex-start; */
  /* 交叉轴的终点对齐 */
  /* align-items: flex-end; */
  /* 交叉轴的中点对齐 */
  /* align-items:center; */
  /* 项目的第一行文字对齐 */
  /* align-items:baseline; */
  /* 默认的占满整个高度 */
  /* align-items:stretch; */

  /* 交叉轴的起点对齐 */
  /* align-content: flex-start; */
  /* 交叉轴的终点对齐 */
  /* align-content:flex-end; */
  /* 交叉轴的终点对齐 */
  /* align-content:center; */

  /* 四 项目的属性 */
  /* order 属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。 */
  /* flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。 */
}
.a {
  width: 100px;
  height: 180px;
  background-color: #770fff;
  font-size: 30px;
  order: 2;
}
.b {
  width: 80px;
  height: 140px;
  background-color: #ffff00;
  font-size: 45px;
  /* order 属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。 */
  order: 0;
  align-self:flex-end;

}
.c {
  width: 60px;
  height: 100px;
  background-color: #17d30d;
  flex-shrink: 20px;
  order: 3;
  /* 两个的时候就按比例放大 */
  /* flex-grow: 1;  */
  flex-shrink:1;

}
.d {
  width: 40px;
  height: 60px;
  background-color: #9a1330;
  font-size: 26px;
  order: -1;
   /* 只有一个的时候放大到没有剩余空间 */
  /* flex-grow: 2;  */
}
</style>