首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Flexbox布局 | CSS Flexible Box Layout

CSS柔性盒布局是CSS的一个模块,它定义了为用户界面设计优化的CSS框模型。在FLEX布局模型中,FLEX容器的子容器可以向任意方向布局,并且可以“弯曲”它们的大小,要么增长来填充未使用的空间,要么缩小以避免溢出父容器。儿童的水平和垂直排列都可以很容易地被操纵。这些框水平垂直内嵌套,或水平内垂直嵌套可用于构建二维布局。

参照

CSS属性

  • align-content
  • align-items
  • align-self
  • flex
  • flex-basis
  • flex-direction
  • flex-flow
  • flex-grow
  • flex-shrink
  • flex-wrap
  • justify-content
  • order

指南

使用CSS flexible boxes关于如何使用此功能构建布局的详细教程。使用flexbox展示Web应用程序教程,解释如何在Web应用程序的特定上下文中使用Flexbox。

规范

Specification

Status

Comment

CSS Flexible Box Layout Module

Candidate Recommendation

Initial definition.

浏览器兼容性

Feature

Firefox (Gecko)

Chrome

Internet Explorer

Opera

Safari

Basic support

20.0 (20.0)

21.0-webkit 29.0

10.0-ms 11.0

12.10

6.1-webkit

Feature

Firefox Mobile (Gecko)

Android

IE Phone

Opera Mobile

Safari Mobile

Basic support

(Yes)

4.4

11

12.10

7.1-webkit

扫码关注腾讯云开发者

领取腾讯云代金券