欢迎光临一流素材网,免积分免费素材下载!

flex 属性

所属栏目:css3基础教程更新时间:2021-08-02 来源:网络 原作者:不详 发布:deepdfhy浏览:0

免费开源可商用的PHP万能建站程序-DiYunCMS(帝云CMS)

css flex是W3C组织在2009年提出的一种新布局方案,可以方便的解决原来通过依赖display和浮动方案的缺陷,比如display float实现垂直居中就很麻烦。经过多年的发展css flex目前可以在所有主流浏览器在运行,但是IE浏览器则需要在IE10及以上版本才支持,在移动端的兼容情况,安卓4.4以下版本不支持,IOS 7.1以下版本不支持。

FLEX属性,父元素属性

属性名称说明可选值
flex-direction子元素在主轴的排列方向row | row-reverse | column | column-reverse
flex-wrap子元素的换行方式nowrap | wrap | wrap-reverse
flex-flowflex-direction属性和flex-wrap属性的简写形式默认值为row nowrap
justify-content子元素在主轴上的对齐方式,当flex-direction为row可以理解成水平对齐方式flex-start | flex-end | center | space-between | space-around
align-items子元素在交叉轴上对齐方式,当flex-direction为row可以理解成垂直对齐方式flex-start | flex-end | center | baseline | stretch
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用flex-start | flex-end | center | space-between | space-around | stretch

项目的属性, 子元素属性

属性名称说明
order子元素的排列顺序。数值越小越靠前,默认为0
flex-grow子元素的放大比例,即存在剩余空间充足子元素如何放大,默认为0空间充足也不放大
flex-shrink子元素的缩小比例,即如果空间不足时子元素如何缩小,默认为1空间不足时都将等比例缩小
flex-basis子元素占的空间,跟width或height属性一样的值(比如50px),默认值为auto
flexflex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。
align-self允许单个子元素有与其他元素不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch


标签: flex
收藏 0 有帮助 0 没帮助 0 打赏
给个评价吧