如何使用flex实现自适应布局
前端开发小技巧当复元素使用 flex 布局时，子元素的高度会自动拉伸至百分之一百。在复元素上使用 align items baseline， 或者在子元素上使用 align self baseline 或者 hat fake content 就可以啦。竖向布局时同理，可以让宽度自适应内容。
粉丝5539获赞6.4万
相关视频
02:44查看AI文稿AI文稿给大家讲明白什么是 flex 布局、响应式布局、知识性布局，这也是面试当中常用的一个面试题，好多同学都搞不明白，今天让大家彻底的搞明白。那么首先说 flex 布局， flex 布局它也叫弹性布局， 这个是官方的一个定义，那么 flag 布局怎么样？定义非常简单，我们需要在我们的这个 div 元素上，我直接把他的 display 啊定义成 flat， 那么它里面的元素，他的子元素都是 flag 布局， 那么福来布局怎么用？这个非常简单，我们去看他的官网就可以了。一般呢我们现在主流的比如说做水平居中啊、垂直居中啊，自适应布局啊，基本上都是用福来布局去搞的，我用四布局和自适应布局， 那么咱们先看一看这张图啊，响应数据一般是一个网站，他能够兼容多个端，比如手机端、平板端，还有你的电脑外部端，那么最终他每一个端他呈现了一 页面的样式是不一样的，你可以看一下这个页面的样式是完全不一样的，那么自适应布局他就不一样了，他其实是什么？在不同的尺寸下，他的布局是一样的，你看到没有？也就是说我们可以能清晰的感觉到，就是响应式布局的实现要比自适应布局要麻烦， 代码要肯定写的多，反应是布局，我们应该，我们一般怎么做？我们一般都是用这个 media 这个媒体查询， 也就说根据这个不同的尺寸设置这个分解点，然后再设置分解点样式，从而达到这种响应式布局的效果。那么还有一个很重要的一点就是我们在 matter 里面需要设置 这句话，我可以给大家做一个演示，那么他运行之后的效果其实是这样的，对吧？上面是网站的导航，中间是内容，对吧？那么我这时候比如说我改变他的尺寸，你看我改变他尺寸 的时候，他其实他的布局是变化了的，然后我再进行改变的时候，对吧？他其实他的宽度也变了，你看他导航，导航 他也变变成这样了，一般都是移动端的布局了，移动端我可能就有这种效果，相当于他这一套带呢，能够在 pc 端也能访问，在 pad 端也能访问，在手机端也能访问，一般的哈，我们实现这个响应式布局 还是支持性布局。那么我们的 c i s 的元素的值一般都会主流的，现在是什么方案呢？主流的的单位基本上就这么几类，是吧？我相信我们最熟悉的就是 p s 单位， 那么其实现在有些网站他还是用 i m 的这种方式，那但现在主流的都是用 v w v a 制的这种方式就是四口宽度，那么我这个其实是用了什么 flag 布局和什么 i e m 去做的。所以说如果面试的时候他在为你比如 说这这三个的区别，那么他怎么样具体实现？也就是我们一般都用 flat 布局去实现响应式布局和知识性布局，那么这两个响应式和知识性比较难实现的就是响应式。大家有什么不同的意见可以评论区留言探讨。
1550大伟聊前端（AI全栈）
01:09查看AI文稿AI文稿用 flex 布局做图片列表，先做一个复容器，设置一下复容器的样式， 把负容器设置成弹性盒子，设置容器中子元素，允许折行设置容器中子元素，水平居中排列。在负容器中放一个 div 子元素，在 div 中插入一个图片， 给负容器的子元素设置一下样式，设置一下子元素的宽度，高度，还有 padding。 把子元素也设置成弹性盒子，这样是为了让子盒中的图片随容器尺寸自动缩放。设置一些图片为水平居中排列，保存查看一下， 像只有一个图片看不出设置的样式效果。再多插入一些包含图片的子元素，再来查看一下， 一个简单的图片列表就做好了。
65纯人代码
03:00
06:38
02:25查看AI文稿AI文稿一个优秀的网页排版，有时候需要调整每一个元素，当内容较多或需求变动，会增加山代马跑路的概率。 有一种布局方式，通过简单定义容器规则，尽可能不操作子元素，它就是 flex。 弹性布局 flex 需要指定一个容器，在这个容器中，所有的直接子元素会成为 flex 的项目。 容器有两个方向轴，默认主轴是水平方向，交叉轴为垂直方向，左上角是起点，可以快速定制丰富多样的布局。 容器属性有六个， flex direction 定义主轴方向。 justify content 定义了子元素在主轴方向的前后和居中的对齐方式，还有两端对齐。 space between， 项目间隔相等。 space around， 项目两侧间隔相等。 space evenly， 间隔相等。包含容器 align items， 定义子元素在交叉轴的前后和居中的对齐方式。 baseline， 项目首行文字对齐 stretch 拉伸， 如果没有确定子元素在交叉轴的长度，它将占满整个容器。 flex rap 超出容器轴线长度自动换行，默认不换行。 align content 定义了多行项目在交叉轴的对齐方式，包括以下几种， 项目属性有 order， 根据其数值定义元素的排序。 align self 允许项目自身有单独的交叉轴对齐方式，在这里可以设置自己的 alarm item。 默认值 auto， 继承容器属性 flex， 它是这三个属性的简写形式，默认值零一 auto flex grow， 按容器剩余空间的比例放大元素填充容器 flex drink， 按被挤压空间的比例缩小元素 flex basis， 元素初始大小默认 auto， 根据主轴长度分配简写和分开设置可能效果会不一致，建议使用简写，浏览器会自动计算相关数值。 flex 能灵活处理容器内的子元素布局， 尤其在容器尺寸和紫元素的数量和尺寸都不确定的情况下。以上就是 flex 布局的相关知识，感谢观看。
2770木折
![[网站开发入门指南62] 了解flex布局准备写个好看的页面 #html #css #javascript #前端开发 #网站开发](https://p9-pc-sign.douyinpic.com/image-cut-tos-priv/ddc4913173ed4c1df6624abcba58e8da~tplv-dy-resize-origshort-autoq-75:330.jpeg?lk3s=138a59ce&x-expires=2106651600&x-signature=yUk9w7GR0TsOkFeDQaAdxzPz1ZM%3D&from=327834062&s=PackSourceEnum_AWEME_DETAIL&se=false&sc=cover&biz_tag=pcweb_cover&l=20261006215202A515DB6878A702BB5FEF)
![[网站开发入门指南103] Flex布局小练习四 #html #css #javascript #前端开发 #网站开发](https://p3-pc-sign.douyinpic.com/image-cut-tos-priv/4592a1467bab1e7cd9e92ea2140b28d8~tplv-dy-resize-origshort-autoq-75:330.jpeg?lk3s=138a59ce&x-expires=2106651600&x-signature=YrRxeSDNWwfbUnMOIAjKdPr8s4Q%3D&from=327834062&s=PackSourceEnum_AWEME_DETAIL&se=false&sc=cover&biz_tag=pcweb_cover&l=20261006215202A515DB6878A702BB5FEF)
![[网站开发入门指南100] Flex布局小练习二 第一部分 #html #css #javascript #前端开发 #网站开发](https://p3-pc-sign.douyinpic.com/image-cut-tos-priv/46132f4132d1ac7dc2c97dce6eebf148~tplv-dy-resize-origshort-autoq-75:330.jpeg?lk3s=138a59ce&x-expires=2106651600&x-signature=ViTHvN2fk1Hi9u%2FRdxzmUPXXaNY%3D&from=327834062&s=PackSourceEnum_AWEME_DETAIL&se=false&sc=cover&biz_tag=pcweb_cover&l=20261006215202A515DB6878A702BB5FEF)
