Flex布局总结之flex的主要属性及参数⽤法
这篇笔记是系统学习flex时所记，适合复习使⽤，新⼿学习还是要配合图⽰和代码来学习更容易理解。
flex布局模型：弹性盒⼦（ Flexible Box 或 flexbox），是⼀种当页⾯需要适应不同的屏幕⼤⼩以及设备类型时确保元素拥有恰当的⾏为的布局⽅式。引⼊弹性盒布局模型的⽬的是提供⼀种更加有效的⽅式来对⼀个容器中的⼦元素进⾏排列、对齐和分配空⽩空间。
⾸先要弄清楚⼏个重要概念：
flex-container：弹性盒⼦容器
flex-items：flex-container⾥⾯的直接⼦元素叫做flex-items
主轴：main axis：main start & main end & main size
交叉轴：cross axis：cross start & cross end & cross size
⽤在flex container上的CSS属性：flex-flow、flex-direction、flex--wrap、justify-content、align-items、align-content
应⽤在flex items上的CSS属性：flex、flex-grow、flex-basis、flex-sshrink、order、align-self
开启flex布局：
.box { display:flex or inline-flex; } // 块级元素或⾏内元素
1. flex-direction ：决定了main axis主轴⽅向，默认沿着main axis主轴从main start开始从main start开始往main end⽅向排布。
row---默认从左⾄右, row-reverse----从右⾄左, column----从上⾄下, column-reverse----从下⾄上
2. justify-content：决定了flex items在主轴上的对齐⽅式
flex-start-----默认与main start对齐， flex-end------与main end对齐， center-------居中对齐
space-between-----两边对齐中间等分间距对齐， space-evenly-----等分间距对齐， space-around-----边距时中间距离⼀半
3. align-items：决定了flex items在cross axis上的对齐⽅式
normal------效果相当于stretch-----当flex items在cross axis⽅向的size为auto时，会⾃动拉伸⾄填充flex
container
flex-start----默认与cross start对齐， flex-end------与cross-end对齐， center------居中对齐， baseline------基线对齐，第⼀⾏⽂本底部为基线
4. flex-wrap：默认nowrap，不换⾏；wrap，换⾏。
默认情况下，所有的flex items都会在同⼀⾏显⽰， wrap-reverse-----对⽐wrap，cross start 与cross end 相反
5. flex-flow：是flex-direction || flex-wrap的简写，可以省略，顺序任意
6. align-content：决定了多⾏flex items 在cross axis上的对齐⽅式，⽤法与justify-content类似
stretch-----默认值，与align-items的stretch类似， flex-start-----默认与cross start对齐， flex-end------与cross end对齐， center-------居中对齐
space-between-----两边对齐中间等分间距对齐， space-evenly-----等分间距对齐， space-around-----边距时中间距离⼀半
7. order：决定flex items的排布顺序，默认为0，值可以设置为任意整数（正，负，0），值越⼩排在前⾯
8. align-self： flex items通过它覆盖flex container设置的align-items
auto（默认值）：遵从flex container的align-items设置，
stretch、flex-start、flex-end、center、baseline，效果跟align-items⼀致
9. flex-grow：决定了flex items如何扩展
可以设置任意⾮负数字（正⼩数、正整数、0），默认是0。
当flex container在main axis⽅向上有剩余size时，flex-grow属性才会⽣效
如果所有flex items的flex-grow总和sum超过1，每个flex item扩展的size为：flex container的剩余size*flex-grow/sum
如果所有flex items的flex-grow总和sum不超过1，每个flex item扩展的size为：flex container的剩余size*flex-grow
flex items扩展后的最终size不能超过max-width\max-height
10. flex-shrink：决定了flex items如何收缩
可以设置任意⾮负数字（正⼩数、正整数、0），默认值是1
当flex items在main axis⽅向上超过了flex container的size，flex-shrink属性才会有效
如果所有flex items的flex-shrink总和超过1，每个flex item收缩的size为：flex items超出flex container的size*收缩⽐例/所有flex items的收缩⽐例之和
如果所有flex items的flex-shrink总和sum不超过1，每个flex item收缩的size为：flex items超出flex container的size*sum*收缩⽐例/所有flex items的收缩⽐例之和
收缩⽐例=flex-shrink*flex item的base size
base size就是flex item放⼊flex container之前的size
flex items收缩后的最终size不能⼩于min-width\min-height
11. flex-basis：⽤来设置flex items在main axis⽅向上的base size
auto（默认值）、具体的宽度数值（100px）
flex布局对齐方式决定flex items最终base size的因素，从优先级⾼到低
max-width\max-height\min-width\min-height > flex-basis > width\height > 内容本⾝的size
12. flex：是flex-grow || flex-shrink || flex-basis的简写，flex属性可以指定1个，2个或3个值
单值语法：⽆单位数---grow，有效宽度值---basis，关键字none,auto或initial
双值语法：第⼀个必须为⽆单位数，第⼆位:⽆单位---shrink，有效宽度值---basis
三值语法：⽆单位，⽆单位，有效宽度值
13. 总结：
布局---->左侧------->item------->清除浮动（⽗元素设置固定⾼度 or clear-fix写在⽗元素）
语义化标签：nav，header，footer，section，article，aside
媒体标签：video、audio
input：placeholder、multiple、autofocus、type(date、time、tel、color、number、)

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。