Flexbox,终于可以承认自己明白了
Flexbox已经得到主流浏览器较新版本的广泛支持。对于某些需要兼容的旧版本浏览器,只要调整一下语法或提供商前缀,基本上也没问题。
两套属性
Flexbox有两套属性,一套针对可伸缩容器(flexible container),一套针对容器的直接子元素,或可伸缩项(flexible item)。
Flex容器,即应用display:flex;
或display: inline-flex
规则的元素,可以接受如下属性:
flex-direction
:指定主轴方向是水平还是垂直flex-wrap
:指定可伸缩项是否折行flex-flow
:以上两个属性的简写形式justify-content
:指定可伸缩项在主轴方向上的对齐方式align-items
:指定可伸缩项在辅轴方向上的对齐方式align-content
:指定多行可伸缩项在辅轴方向上的对齐方式
容器的直接子元素或者可伸缩项,可以接受如下属性:
flex-grow
:指定当前项如何扩展flex-shrink
:指定当前项如何收缩flex-basis
:指定分配剩余空间之前当前项的初始大小flex
:以上三个属性的简写形式order
:指定当前项在容器中出现的次序
针对容器的属性非常容易理解,而针对可伸缩项的属性则不好理解。更确切地说,是flex-grow
、flex-shrink
和flex-basis
属性不好理解。只有理解了这三个属性,你才能说自己真正理解了Flexbox。