移动web布局----flex布局详解

justify-content: center;

在主轴居中对齐（如果主轴是x轴则 水平居中）

justify-content:space-around;

平分剩余空间

justify-content:space-between;

先两边贴边 再平分剩余空间

主轴在Y轴方向：和上边x轴一样把主轴换为column

justify-content: flex-start;

justify-content: flex-end;

justify-content: center;

justify-content: space-around;

justify-content: space-between;

2.13 设置是否换行flex-wrap

flex-wrap: nowrap：不换行效果：如果装不开，会缩小子元素的宽度，放到父元素里面

子盒子总宽度大于父盒子，不换行的话，子盒子宽度被压缩变小，强制一行显示

flex-wrap: wrap：设置换行：

子盒子总宽度大于父盒子，换行效果

2.14 设置侧轴上子元素的排列方式align-content(多行)

设置子项在侧轴上的排列方式 并且只能用于子项出现 换行 的情况（多行），在单行下是没有效果的。多行情况下必须添加换行属性（flex-wrap:wrap）

flex-wrap: wrap; align-content: flex-start;

默认值在侧轴的头部开始

flex-wrap: wrap; align-content: flex-end;

在侧轴的底部开始排序

flex-wrap: wrap; align-content: center;

在侧轴中间排序

flex-wrap: wrap; align-content: space-around;

子元素平分剩余空间

flex-wrap: wrap; align-content: space-between;

子元素先在上下两头分布，在平分剩余空间

flex-wrap: wrap; align-content: stretch;

拉伸，子元素平分父元素高度，侧轴的话必须把高度去掉，不设置高度，如果高度不去掉，该属性不起作用；如果剩余的空间是负数，该值等效于’flex-start’。在其它情况下，剩余空间被所有行平分，以扩大它们的侧轴尺寸

2.15设置侧轴上子元素的列方式align-items(单行)

定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式，子项为单行时使用。

x为主轴时 子盒子从左向右排列记得添加 flex-direction:row;

侧轴就是y轴

align-items:flex-start;

当前行从顶部对齐

align-items:flex-end;

当前行底部对齐

align-items: center;

居中显示

align-items:beseline;

如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。

align-items:stretch;

把盒子高度去掉,否则不会拉伸

x轴垂直水平居中:justify-content: center; align-items: center;

y为主轴时 子盒子从上向下排列记得添加 flex-direction:column;

侧轴就是x轴

align-items:flex-start;

align-items:flex-end;

align-items: center;

align-items:baseline;

如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。

align-items:stretch;

把宽度去掉，否则该属性无效

flex-direction: column;justify-content: center; align-items: center;

y轴上垂直水平居中

2.16 flex-flow属性时flex-direction和flex-wrap属性的复合写法

flex-flow:row wrap; x轴为主轴 换行

2.2 子元素属性

2.21、flex属性

常用综合写法flex:integer; 定义子项目分配剩余空间，用flex来表示占多少份

小例子：一个大盒子被划分为三块不均等

div {

display: flex;

width: 300px;

height: 200px;

background-color: skyblue;

}

span:nth-child(1){

flex: 2

}

span:nth-child(2){

flex: 1;

background-color: green;

}

span:nth-child(3) {

flex: 1;

background-color: red;

}

}

2.22 、align-self 控制子项自己在侧轴上排列的方式

align-self：auto | flex-start | flex-end | center | baseline | stretch

align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。

默认值为 auto，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch。

• auto：

如果’align-self’的值为’auto’，则其计算值为元素的父元素的’align-items’值，如果其没有父元素，则计算值为’stretch’。

• flex-start：

弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。

• flex-end：

弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。

• center：

弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。

• baseline：

如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。

• stretch：

如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。

小例子：把第一个子项目贴靠下边用flex-end，其他属性类似

计算机网络

• HTTP 缓存

• 你知道 302 状态码是什么嘛？你平时浏览网页的过程中遇到过哪些 302 的场景？

• HTTP 常用的请求方式，区别和用途？

• HTTPS 是什么？具体流程

• 三次握手和四次挥手

• 你对 TCP 滑动窗口有了解嘛？

• WebSocket与Ajax的区别

• 了解 WebSocket 嘛？

• HTTP 如何实现长连接？在什么时候会超时？

• TCP 如何保证有效传输及拥塞控制原理。

• TCP 协议怎么保证可靠的，UDP 为什么不可靠？

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

算法

• 链表

• 字符串

• 数组问题

• 二叉树

• 排序算法

• 二分查找

• 动态规划

• BFS

• 栈

• DFS

• 回溯算法