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 3:34:5
7、表现手法? 8、怎么样与产品结合? 八个部曲 一、主0mmA2=594*420mmA3=297*420mmA4=297*210mm
回复、端午临注册会员
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)展开的最新研究显现,在大多数新式工作,女人份额普遍偏低。这种距离在云核算类工作中体现最为明显
回复