今天打开我的csdn，竟然涨了7个粉丝，哈哈。为了我新涨的粉丝们，决定今晚加更一篇文章~
目录
一、flex弹性布局与传统布局的区别：
| flex弹性布局 | 传统布局 | |
|---|---|---|
| 兼容 | IE11+ | 较好 |
| 布局效果 | 简单方便 | 繁琐 |
| 使用场景 | 移动端 | PC端 |
二、flex布局介绍
原理：通过给父盒子添加display:flex属性，来控制子盒子的位置和排列方式。
特点（待补充）：
1、flex布局相较于传统布局（浮动、定位）更简便，但兼容性较差；
2、父元素设为flex布局后，子元素的float、clear、vertical-align属性失效；
3、应用于任何元素：块元素、行元素、行内块元素；
4、display:声明flex属性值 flex，对应块元素，即容器转化为块元素 inline-flex，对应行内元素，即容器转化为行内元素；
5、子项目中行元素可直接设置宽高，块元素宽度不继承，行内块元素没有间隔；
6、没有外边距合并问题；
7、能让页面宽度自适应，高度与字体大小自适应需要配合rem+媒体查询。
三、父元素常见属性
1、flex-direction 决定主轴 x轴 y轴
| row | 默认值，从左到右 x |
| row-reverse | 从右到左 -x |
| column |
从上到下 y |
| column-reverse |
从下到上 -y |
2、justify-content 设置主轴上的子元素排列方式
| flex-start |
默认值，从头开始 |
|
flex-end |
从尾开始(与row-reverse区别在于不会颠倒元素顺序) |
|
center |
居中对齐 |
|
space-around |
平分剩余空间（将剩余空间作为margin值平分给每个子元素） |
|
space-between |
先两边贴边，再平分剩余空间(重要) |
3、align-items 设置侧轴上的子元素排列方式 （单行）
|
stretch |
默认值，拉伸 不给子元素高度 任何子元素不给高度继承父元素高度的原因 |
|
flex-start |
从头开始 |
|
flex-end |
从尾开始(与row-reverse区别在于不会颠倒元素顺序) |
|
center |
居中对齐 |
注意：只在子元素单行排列时起作用，与flex-wrap: nowrap;共同使用。
4、align-content 设置侧轴上的子元素排列方式 （多行）
|
stretch |
默认值，拉伸 |
| flex-start |
默认值，从头开始 |
|
flex-end |
从尾开始(与row-reverse区别在于不会颠倒元素顺序) |
|
center |
居中对齐 |
|
space-around |
平分剩余空间（将剩余空间作为margin值平分给每个子元素） |
|
space-between |
先两边贴边，再平分剩余空间(重要) |
注意：只在子元素多行排列时起作用，与flex-wrap: wrap;共同使用。
5、flex-wrap 设置子元素是否换行
|
nowrap |
默认值，不换行 |
| wrap | 换行 |
注意： 默认不换行，如果子元素宽度和超过父元素宽度，子元素的宽度会被缩小，width属性失效
6、flex-flow 是flex-direction和flex-wrap属性的复合属性
语法：flex-flow: flex-direction属性值 flex-wrap属性值
四、子元素常见属性
1、flex 定义子项目分配剩余空间，属性值表示占有的份数
语法：flex:
; number值可为数字或者百分比
注意：剩余空间指除指定宽高的元素所占有的其他所有空间，被分配的子元素宽高将自动撑满剩余空间。
2、align-self 控制子项本身在侧轴上的排列方式
3、order 定义项目的排列顺序
语法：order:
; 默认值为0，数值越小，排列越靠前
五、flex圣杯布局
html:
css:
/* 子元素属性 */ section { display: flex; width: 60%; height: 100px; background-color: blue; margin: 50px auto; } p:first-child { width: 100px; height: 100px; background-color: green; } p:nth-child(2) { /* 宽度与高度不用设置，元素大小为剩余空间大小 */ flex: 1; background-color: pink; } p:last-child { width: 100px; height: 100px; background-color: rgb(143, 25, 31); }六、flex布局应用
引言：这是我在做页面仿写时发现的关于flex布局的一个应用，在这里记录一下。
问题：在多行下子元素平均分配父元素空间，并子元素存在间隙的情况，如下：
首先了解：flex容器每一行的宽度 = 每个子容器的宽度 + 子元素对应轴的margin值
解决方法：
1、将多行子元素用一层盒子包裹起来，形成父容器单行排列子盒子，即单行变多行。flex值为数字，margin不会让盒子挤走 ；
2、间隙用一个元素边框代替 高度为0 或者宽度为0，定位到需要的位置；
3、width:百分比 不会发生挤走的情况 单行或者多行都能使用 中间间距用自身padding值取代。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/209771.html原文链接：https://javaforall.net
