felxbox规划是css3里新出的一个，它就是为了处理上述两种体式格局的不足涌现的，是比较圆满的一个。现在挪动端的规划也都是用flexbox。 这篇文章重要引见了挪动端优先的flex三栏规划的运用方法，感兴趣的小伙伴们能够参考一下

默许情况下先显现挪动端，经由过程 @media 属性适配屏幕变化

运用flexbox相干的CSS属性

1.  display: flex; (父元素)
2.  flex-wrap: nowrap | wrap | wrap-reverse; (父元素, 子元素超越该怎样显现)
3.  flex: flex-grow flex-shrink flex-basis; (子元素, 子元素该怎样分派空间)
4.  order: number; (子元素, 子元素的递次该怎样分列)

重点

1.  在父元素上设置 display: flex 和 flex-wrap: wrap
2.  经由过程 flex 来调解子元素上的空间分派(扩大、压缩比例和伸缩基准值)
3.  经由过程 order 来调解子元素的显现递次(把 .center 放在中心)

例子

CSS

`.box {`
`display``: flex;`
`flex-wrap: wrap;`
`text-align``:` `center``;`
`}`
}//迎接到场全栈开辟交换划水交换圈：582735936
]//面向划水1-3年前端职员
}   //协助打破划水瓶颈，提拔思维能力
`.``center` `{`
`background-color``:` `#f00``;`
`flex:` `100%` `1``;`
`}`
`.``left``, .``right` `{`
`flex:` `100%` `1``;`
`}`
`.``left` `{`
`background-color``:` `#0f0``;`
`}`
`.``right` `{`
`background-color``:` `#00f``;`
`}`
`@media` `all` `and (``min-width``:` `400px``) {`
`.``left``, .``right` `{`
`flex:` `50%` `1``;`
`}`
`}`
`@media` `all` `and (``min-width``:` `800px``) {`
`.box {`
`flex-wrap:` `nowrap``;`
`}`
`.``center` `{`
`order:` `2``;`
`flex:` `1``;`
`}`
`.``left``, .``right` `{`
`flex:` `0` `0` `300px``;`
`}`
}//迎接到场全栈开辟交换划水交换圈：582735936
]//面向划水1-3年前端职员
}   //协助打破划水瓶颈，提拔思维能力
`.``left` `{`
`order:` `1``;`
`}`
`.``right` `{`
`order:` `3``;`
`}`
`}`
 |

HTML

`<``div` `class``=``"box"``>`
`<``div` `class``=``"center"``>`

弹性盒子是 CSS3 的一种新的规划形式。

CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面须要顺应差别的屏幕大小以及装备范例时确保元素具有适当的行动的规划体式格局。

引入弹性盒规划模子的目标是供应一种越发有用的体式格局来对一个容器中的子元素举行分列、对齐和分派空缺空间。

`</``div``>`
`<``div` `class``=``"left"``>left</``div``>`
`<``div` `class``=``"right"``>right</``div``>`
`</``div``>`

以上就是本文的全部内容，愿望对人人的进修有所协助，