前端工程师实战19：详解flex弹性盒布局与实战案例（图文并茂，小白也能听懂）

大家好，全套HTML和CSS入门与实战课程正在我的专栏《HTML与CSS入门与进阶》更新中！按知识点循序渐进，按照顺序读下来绝对比搜索网上教程更加紧凑！内容通俗易懂，图文并茂，欢迎订阅！

flex弹性盒，伸缩盒 是一种新的布局手段，主要用来代替浮动来完成页面的布局

flex可以使元素具有弹性，让元素跟随页面的大小改变而改变

弹性容器：要使用弹性盒，必须先将一个元素设置为弹性容器

通过display:flex来设置块级弹性容器

通过display:inline-flex设置为行内弹性容器

弹性元素：弹性容器的子元素是弹性元素（弹性项）（弹性容器的直接子元素才是弹性元素）

一个元素可以同时是弹性容器和弹性元素

 

弹性容器的样式

弹性元素的排列方式flex-direction

当一个元素设置为弹性容器后，可以通过flex-direction来设置他的弹性元素的排列方式

flex-direction可选值：

1. row:默认值，弹性元素在容器中水平排列（主轴：左向右）

2. row-reverse:弹性元素在容器中反向水平排列(主轴：右向左)

3. column：弹性元素纵向排列（侧轴：上向下）

4. column-reverse:弹性元素反向纵向排列（侧轴：下向上）

主轴：弹性元素的排列方向为主轴

侧轴：与主轴垂直方向的称为侧轴

弹性元素的属性

flex-basic元素基础长度

flex-basic指定弹簧的初始长度，flex-grow指定弹簧的伸展程度flex-shrink指定弹簧的收缩程度

这个值会和宽高度重复，所以如果flex-basic不是auto，他就会覆盖宽度或者高度

指定的是元素在主轴上的基础长度

如果主轴是 横向的 则 该值指定的就是元素的宽度

如果主轴是 纵向的 则 该值指定的是就是元素的高度

- 默认值是 auto，表示参考元素自身的高度或宽度

- 如果传递了一个具体的数值，则以该值为准

flex-grow:指定弹性元素伸展的系数

flex-grow:指定弹性元素伸展的系数

当父元素有多余的空间时，子元素进行伸展

父元素的剩余空间，会按比例进行排列

所以1占伸展为宽度变成100，2伸展为宽度变成200，3伸展为宽度变成300

如果flex-grow是0，就不进行伸展

弹性元素收缩系数flex-shrink

当父元素中空间不足以容纳所有子元素，就会对子元素进行比例的收缩。

以后需要用到浮动的时候，都可以改成使用弹性布局

flex:简写属性

flex 增长 收缩 基础长度