2024年移动web布局----flex布局详解(2)，大厂面试官要求

最后

在面试前我花了三个月时间刷了很多大厂面试题，最近做了一个整理并分类，主要内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。

包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。

• HTML5新特性，语义化

• 浏览器的标准模式和怪异模式

• xhtml和html的区别

• 使用data-的好处

• meta标签

• canvas

• HTML废弃的标签

• IE6 bug，和一些定位写法

• css js放置位置和原因

• 什么是渐进式渲染

• html模板语言

• meta viewport原理

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

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，其他属性类似

你

我

他

2.23 order属性定义项目排列顺序

order: ;默认值0 ;用整数值来定义排列顺序，数值小的排在前面。可以为负值。

小例子： 下面三个盒子顺序是你我他，第三个盒子加上order:-1;和 align-self: flex-end;

顺序变为他你我