传统的布局 基于盒模型 依赖于display属性 + position属性 + float属性 ，但是特殊布局就有些捉襟见肘了，垂直居中 就不容易实现了
一、Flex布局是什么？
flex是Flexible Box的缩写，意为弹性布局，用来为盒模型提供最大的灵活性
//任何一个容器都可以指定为Flex布局 .box{ display:flex; } //行内元素也可以使用Flex布局 .box{ display:inlone-flex; } //Webkit内核的浏览器，必须加上-webkit前缀 .box{ dispaly:-webkit-flex;/* Safari*/ display:flex; }二、基本概念
容器默认存在两根轴: 水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start，结束的位置佳作main end；价差周的开始位置又叫做cross start，结束为止叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴控件佳作main size，占据的交叉轴控件叫做cross size。
三、容器的属性
3.1 flex-direction属性 决定主轴的方向，即项目的排列方向
3.2 flex-wrap属性 决定一条轴线排不下该如何换行
wrap：换行，第一行在上方
wrap-reverse：换行，第一行在下方
3.3 flex-flow属性 是flex-direction属性和flex-wrap属性的简写形式
默认值为 row nowrap
.box{ flex-flow:row
|| nowrap
; }
3.4 justify-content属性 定义了项目在主轴上的对齐方式
3.5 align-items属性 定义项目在交叉轴上如何对齐
3.6 align-content属性 定义了多跟轴线的对齐方式，如果项目只有一根轴线，该属性不起作用
四、项目的属性
4.1 order属性 定义了项目的排列顺序，数值越小，排列于考前，默认为0
.item{ order:
; }
4.2 flex-grow属性 定义了项目的放大比例，默认为0，如果存在剩余控件，也不放大
.item{ flex-grow:
;/*default 0*/ }
如果项目所有的flex-grow属性都为1，它们将等分剩余空间(如果有的话)。如果一个项目的flex-grow属性为2，其他项目的都为1，为2的项目占据的剩余空间将比其他的项目多一倍
4.3 flex-shrink属性 定义了项目的缩小比列，默认为1，如果空间不足，该项目将缩小
.item{ flex-shrink:
;/*default 1*/ }
如果所有项目的flex-shrink属性都为1，当空间不足时，豆浆等比例缩小。如果一个项目的flex-shrink属性为0，其他项目的都为1，当空间不足时，为1的项目不缩小。负值对该属性不小
4.4 flex-basis属性 定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间，它的默认值为auto，即项目的本来大小
.item{ flex-basis:
|auto;/* default auto*/ }
它可以设为跟width或height属性一样的值（比如200px），项目将占据固定空间
4.5 flex属性 是flex-grow属性flex-shrink属性和flex-basis属性的简写，默认值为 0 1 auto ，后两个属性可选
.item{ flex:none| [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] }4.6 align-self属性 允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性，默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch
.item { align-self: auto | flex-start | flex-end | center | baseline | stretch; }
它可能取6个值 除了auto，其它斗鱼align-items属性完全一致
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/201290.html原文链接：https://javaforall.net
