css Flexbox 样式使用入门

来源：互联网 2023-03-16 19:10:51 440

本经验介绍在css样式编写时，使用Flexbox的简单介绍，对常用属性进行了说明。详细信息请另请查看 A Complete Guide to Flexbox。

css Flexbox 样式使用入门

工具/原料

首先，要使用flexbox需要理解flex layout的基本结构。

图中标出了main axis, cross axis，它们是垂直的。main方向和cross方向有各自的大小，开始位置，结束位置。

至于main axis的方向，是可以用flex-direction调节的。另外一个方向就是cross axis。

css Flexbox 样式使用入门

1此文章未经授权抓取自百度经验

在flex布局当中，有container和item的概念。container往往有display: flex属性。其内部的元素即为items。

css Flexbox 样式使用入门

先说container的常用属性。首先是flex-direction，该属性可以取值row/row-reverse/column/column-reverse, 其作用如图所示。

css Flexbox 样式使用入门

接下来是flex-wrap属性。其不同取值nowrap/wrap/wrap-reverse分别指定当元素沿着主轴放不下以后的不同行为。

css Flexbox 样式使用入门

然后是justify-content，该属性指定元素如何分配剩余空间，不同属性值效果如图所示。

css Flexbox 样式使用入门

align-items属性则指定当元素排列时，沿着非主轴（cross axis）的行为。如图所示。

css Flexbox 样式使用入门

align-content属性和justify-content属性类似，不过该属性同时考虑沿着cross axis的剩余空间分配办法。

css Flexbox 样式使用入门

下面说在flex盒子内的item的常用属性。order属性可以控制元素在Flexbox中的相对位置。

css Flexbox 样式使用入门

flex-grow可以指定当剩余空间充足时，该item可以拉伸的比例。

同样的，类似控制尺寸的还有flex-shink属性，flex-basis属性。

css Flexbox 样式使用入门

align-self属性可以指定某个元素自己沿着cross axis的排列方式（相当于覆盖align-items属性）。

css Flexbox 样式使用入门

以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！

标签： CSS