摘要：轴主轴决定容器水平方向的排列主轴的起始端由表示，末尾段由表示交叉轴决定容器垂直方向的排列交叉轴的起始端和末尾段也由和表示主轴沿逆时针旋转得到交叉轴布局共有个属性一个声明个主容器个子容器如下图
最近难得有空，总结一下flex布局相关知识点，如有错漏，请大神指点纠正，谢谢~flex布局总结: 快速记忆
主轴方向记住justify
交叉轴方向记住align
关系就是：
justify-content
align-items
align-self
设置主轴方向flex-direction
设置换行：flex-wrap
设置主轴和换行的复合属性：flex-flow
设置伸缩基准：felx-basis
设置拉伸：flex-grow
设置缩放：flex-strink
设置子元素顺序：order
兼容性写法：display: -webkit-box; display:-moz-box; display:-ms-flexbox; display:-webkit-flex; display:flex;四种布局方式：
1.标准文档流 2.浮动布局 3.定位布局 4.flex布局flex布局核心：
flex核心主要在轴和容器上做文章，下面主要以轴（主轴和交叉轴）和容器（父容器和子容器）来阐述。容器:父容器
父容器属性可以设置子容器统一排列方式
主轴方向： 1.justify-content：父容器设置子容器在主轴的排列：
对应属性值排列方式： *位置排列： flex-start flex-end center *分布排列： space-around space-between交叉轴方向： 2.align-items：
父容器设置子容器在交叉轴的排列：
对应属性值排列方式： *位置排列： flex-start flex-end center *基线排列： baseline *拉伸排列： stretch进阶属性： 3.flex-wrap：设置换行方式
换行：wrap 不换行：nowrap 逆序换行：wrap-reverse
逆序换行是指沿着交叉轴的反方向换行4.flex-flow:轴向和换行，是flex-direction和flex-wrap的组合属性
flow 即流向，也就是子容器沿着哪个方向流动，流动到终点是否允许换行，比如 flex-flow: row wrap，flex-flow 是一个复合属性，相当于 flex-direction 与 flex-wrap 的组合，可选的取值如下：
row nowrap、column wrap 等，也可两者同时设置
5.align-content:多行沿交叉轴对齐：
当子容器多行排列时，设置行与行之间的对齐方式。
对应属性值排列方式： *位置排列： flex-start flex-end center *分布排列： space-around space-between *拉伸排列： stretch
#### 6.flex-direction：
不同主轴方向位置不同
主轴位置方向对应属性值：
向右：row 向左：row-reverse 向下：coloumn 向上：coloumn-reverse容器:子容器
子容器属性可以设置自身排列方式
1.flex：
子容器设置自身容器的伸缩比例：
对应属性值单位方式：
无单位数字：1,2,3
有单位数字：15px,50px,100px
none关键字：不伸缩
2.align-self：
子容器设置自身的交叉轴排列
对应属性值排列方式：
*位置排列：
flex-start
flex-end
center
*基线排列：
baseline
*拉伸排列：
stretch
子容器进阶属性
3.flex-basis:设置基准大小
flex-basis 表示在不伸缩的情况下子容器的原始尺寸。
主轴为横向时代表宽度
主轴为纵向时代表高度：
4.flex-grow：设置扩展比例子容器弹性伸展的比例,剩余空间按比例 扩展拉伸 分配
5.flex-shrink：设置收缩比例，剩余空间按比例 扩展收缩 分配子容器弹性收缩的比例。
6.order:设置主轴排列顺序改变子容器的排列顺序，覆盖 HTML 代码中的顺序，默认值为 0，可以为负值，数值越小排列越靠前。
轴 主轴:决定容器水平方向的排列
主轴的起始端由 flex-start 表示，末尾段由 flex-end 表示
交叉轴决定容器垂直方向的排列
交叉轴的起始端和末尾段也由 flex-start 和 flex-end 表示
主轴沿逆时针旋转90°得到交叉轴
flex布局共有13个属性一个声明：display：flex
6个主容器
6个子容器
如下图：
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/112566.html
摘要：负值对该属性无效。我们通常用到的就是这个属性，在布局的时候会很有用。对于这个属性，最好是手动敲一下，尝试一下各种值出现的效果。三圣杯布局布局一直是很重要的知识点，在面试中也会经常遇到，这里就用做一个圣杯布局。 一，为什么写这篇文章 在很早之前就接触display：flex布局，尤其是不考虑低版本浏览器兼容之后，就开始肆无忌惮的使用了。之前做pc端的时候，要求兼容到ie8，也不会注意到它...
摘要：可以试试去掉的会发生很奇妙的事呢附加关于子元素设置为而引发的问题。附加关于开启硬件加速提升网站动画渲染性能问题。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。 1. 水平垂直居中问题 这可以说是最经典的问题了，水平垂直居中，这个问题从入门前端一直到面试，甚至到工作之后都会时不时遇到，最近的面试也被问过这之类的问题，这里还是好好总结一番，以作备忘。公用 HTML 部分： ...
阅读 796·2021-11-24 10:27
阅读 3151·2021-11-18 10:02
阅读 2252·2021-11-16 11:45
阅读 2970·2021-11-15 18:10
阅读 605·2021-09-22 15:23
阅读 1380·2019-08-30 15:53
阅读 2850·2019-08-30 13:20
阅读 1540·2019-08-30 12:53
