flex 布局

flex 布局

九月 7, 2017 阅读 391 字数 305 评论 0 喜欢 0

flex 布局

Flex 是 Flexible Box 的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。

基本概念

flex布局元素分为:容器(flex container) 与 项目(flex item)

容器属性

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

项目属性

order
flex-grow   // 默认 0
flex-shrink // 默认 1
flex-basis
flex
align-self

其中 flex 有三个属性

flex | |

flex布局

See the Pen grid layout by chris (@isevenfox) on CodePen.

发表评论

电子邮件地址不会被公开。 必填项已用*标注

This site uses Akismet to reduce spam. Learn how your comment data is processed.