flex-flow属性(CSS设置)
flex-flow属性(CSS设置)
Flex布局
display:flex;将目标作为弹性弹性盒展示，用于块级元素
display:inline-flex;将目标作为弹性弹性盒展示，用于行内元素
留意兼容问题：
webkit内核浏览器应运用前缀-webkit
IE浏览器，能够很好的兼容IE11+版本，对于IE10只要部分能够兼容，且运用时需增加-ms，IE10浏览器中容器界说成弹性弹性盒时，需运用display:-ms-flexbox
示例的dom结构：
class="box"><divclass="item">1div><divclass="item">2div><divclass="item">3div>div>
基础样式设计：
.box{width:200px;
height:200px;
background-color:#58a;
}
.item{width:50px;
height:50px;
margin:2px;
background-color:#fb3;
}
Flex作用于Box容器上的6个特点介绍
1、flex-direction
用于指定Flex主轴的方向，继而决定Flex子项在Flex容器中的方位
取值：row|row-reverse|column|column-reverse
row：默认值，表明水平方向从左到右摆放，此刻水平方向轴线为主轴
row-reverse：与row相反
column：表明笔直方向从上到下摆放，此刻笔直方向轴线为主轴
column-reverse：与column相反
flex-direction四种取值的作用图如下：
row.png
column.png
2、flex-wrap
用于指定Flex子项是否换行
取值：nowrap|wrap|wrap-reverse
nowrap：默认值，表明不换行，Flex子项可能会溢出
wrap：表明换行，溢出的Flex子项会被放到下一行
wrap-reverse：表明反方向换行
flex-wrap三种取值的作用图如下：
wrap.png
从示例图中不难发现，换行今后两行之间产生了很大的距离，这个问题，在后面介绍的align-content特点中能够得到很好的解决。
3、flex-flow
复合特点，是flex-direction和flex-wrap的简写特点，是用于指定Flex子项的摆放方法
4、justify-content
用于指定主轴(水平方向)上Flex子项的对齐方法
取值：flex-start|flex-end|center|space-between|space-around
flex-start：默认值，表明与行的开端方位对齐
flex-end：表明与行的完毕方位对齐
center：表明与行中心对其
space-between：表明两头对齐，中心距离持平。要留意特别情况，当剩下空间为负数或许只要一个项时，作用等同于flex-start
space-around：表明距离持平，中心距离是两头距离的2倍。要留意特别情况，当剩下空间为负数或许只要一个项时，作用等同于center
justify-content的前三种取值的作用图如下：
justify-content.png
justify-content取值为space-between的作用图如下(留意特别情况下作用等同于flex-start)：
space-between.png
justify-content取值为space-around的作用图如下(留意特别情况下作用等同于center)：
space-around.png
5、align-items
用于指定侧轴(笔直方向)上Flex子项的对齐方法
取值：stretch|flex-start|flex-end|center|baseline
stretch：默认值，当Flex子项未设置高度或许高度值为auto时，stretch起作用，将Flex子项高度设置为行高度。这儿需求留意，在只要一行的情况下，行的高度为容器的高度，即Flex子项高度为容器的高度
flex-start：表明与侧轴开端方位对齐
flex-end：表明与侧轴的完毕方位对齐
center：表明与侧轴中心对其
baseline：表明基线对齐，当行内轴与侧轴在同一线上，即一切Flex子项的基线在同一线上时，作用等同于flex-start
align-items取值为stretch的作用图如下：
stretch.png
align-items取值为flex-startflex-endcenter的作用图如下：
align-items.png
align-items取值为baseline的作用图如下：
baseline.png
6、align-content
该特点只作用于多行的情况下，用于多行的对齐方法
取值：stretch|flex-start|flex-end|center|space-between|space-around
stretch：默认值，当Flex子项未设置高度或许高度值为auto时，stretch起作用，将Flex子项高度设置为行高度。
flex-start：表明各行与侧轴开端方位对齐，榜首行紧靠侧轴开端鸿沟，之后的每一行都紧靠前面一行
flex-end：表明各行与侧轴的完毕方位对齐，最后一行紧靠侧轴完毕鸿沟，之后的每一行都紧靠前面一行
center：表明各行与侧轴中心对其
space-between：表明两头对齐，中心距离持平。要留意特别情况，当剩下空间为负数时，作用等同于flex-start
space-around：表明各行之距离离持平，中心距离是两头距离的2倍。要留意特别情况，当剩下空间为负数时，作用等同于center
再次着重：该特点只作用于多行的情况，在只要一行的Flex容器上无效，别的该特点能够很好的处理，换行今后相邻行之间产生的距离。
align-content各个取值的作用图如下：
align-content.png
Flex作用于子项上的6个特点介绍
1、order
该特点用来指定Flex子项的摆放次序，数值越小，越靠前，能够为负数
取值：数值，默认值为0
2、flex-grow
用来指定Flex子项的扩展份额，不能够为负数，Flex容器会根据Flex子项设置的扩展份额作为比率来分配剩下空间
取值：数值，默认值为0，表明即便存在剩下空间，Flex子项也不会扩展
如下图中，依照1:3分配剩下空间：
grow.png
3、flex-shrink
用来指定Flex子项的缩短份额，不能够为负数，Flex容器会根据Flex子项设置的缩短份额作为比率来缩短各个Flex子项
取值：数值，默认值为1，表明一切子项在剩下空间为负数时，等份额缩短
留意：flex-shrink只能在不换行的情况下运用
如下图中，依照1:3缩短：
shrink.png
4、flex-basis
用来指定Flex子项的占据的空间，不能够为负数
取值：auto|length|percentage|content
auto：默认值，核算规则：检索Flex子项是否设置了width值（或许height值，取决于flex-direction），假如设置了非auto的值，则运用width值（或许height值），若没有则运用content
length：用长度值界说宽度，不行为负数
percentage：运用百分比界说宽度，不行为负数
如下图中，为Item设置flex-basis:50%;,在依照1:3分配剩下空间：
grow.png
容器宽度为200px，Item1原始宽度为50px，设置flex-basis:50%;后宽度变成100px，扩展后宽度为110.5px；而Item2原始宽度为50px，扩展后为81.5px，份额正好是1:3
留意：
设置flex-grow进行分配剩下空间，或许运用flex-shrink进行缩短都是在flex-basis的基础上进行的；
当flex-basis的值以及width（或许height）的值均为非auto时，
1）若content长度一起大于flex-basis的值以及width（或许height）的值，此刻以flex-basis与width（或许height）中值大的为准，可是，假如子项设置了overflow:hidden;或许overflow:auto;，此刻以flex-basis值为准；
2）若content长度一起小于flex-basis的值以及width（或许height）的值，此刻以flex-basis值为准；
3）若content长度小于flex-basis的值，大于width（或许height）的值，此刻以flex-basis值为准；
4）若content长度大于flex-basis的值，小于width（或许height）的值，此刻以content本身长度值为准；
当width（或许height）的值为auto时，且内容的长度大于flex-basis设置的值，此刻以content本身长度值为准，且不能进行flex-shrink缩短。相反假如内容的长度小于flex-basis设置的值，则会运用flex-basis设置的值；
当存在最小值min-width（min-height）时，且flex-basis的值小于最小值时，宽度以最小值为准，当flex-basis的值大于最小值时，以flex-basis的值为准
5、flex
复合特点，是flex-grow、flex-shrink和flex-basis的简写特点，用来指定Flex子项如何分配空间
取值：none|各拆分项特点
none：00auto
auto：11auto
1：110%
0auto或initial：01auto即初始值
留意：
flex-grow：默认值为0，若省掉则被默以为1
flex-shrink：默认值为1，省掉时默以为1
flex-basis：默认值为auto，省掉时默以为0%
6、align-self
用来独自指定某Flex子项的对齐方法
取值：auto|flex-start|flex-end|center|baseline|stretch
auto：默认值，查找父元素的align-items值，假如没有则取值为stretch
其他值同align-items
作品标签：
优秀作品：
最新作品：
评论列表（共98人参与）参与讨论或分享设计作品获得视觉癖积分奖励
、端午临注册会员
2021-08-12 2:34:19
国际上有lo游客
2021-08-12 6:53:16
游客54944：flex-flow属性 最近追了下《甄嬛传》，感慨了一下甄嬛前期小家碧玉，后期花枝招展，那眼妆，绝！服装也超级精美。这便是戏曲影视美术规划里边的人物服装，人物爱的人或许陪着孩子，一起学习，是件十分幸福、浪漫的事。 2、客餐厅书房 假如户型比较小，又想
回复
英语封面注册会员
2021-08-12 3:38:39
浏览器，能够很好的兼容IE11+版本，对于IE10只要部分能够兼容，且运用时需增加-ms，IE10浏> 依据领英（LinkedIn）展开的最新研究显现，在大多数新式工作，女人份额普遍偏低。这种距离在云核算类工作中体现最为明显
回复