CSS3 弹性盒子是一种用于布局的强大工具,它可以让开发者更轻松地控制元素的位置和大小。以下是一份CSS3 弹性盒子的属性速查表:
属性名 | 取值 | 描述 |
---|---|---|
display | flex | 用于定义一个弹性容器。 |
flex-direction | row/column/row-reverse/column-reverse | 用于定义弹性容器内项目的排列方向。 |
flex-wrap | nowrap/wrap/wrap-reverse | 用于定义弹性容器内项目的换行方式。 |
justify-content | flex-start/flex-end/center/space-between/space-around/space-evenly | 用于定义弹性容器内项目在主轴上的对齐方式。 |
align-items | flex-start/flex-end/center/baseline/stretch | 用于定义弹性容器内项目在交叉轴上的对齐方式。 |
align-content | flex-start/flex-end/center/space-between/space-around/stretch | 用于定义弹性容器内多行项目在交叉轴上的对齐方式。 |
flex-grow | number | 用于定义弹性项目的放大比例。 |
flex-shrink | number | 用于定义弹性项目的缩小比例。 |
flex-basis | length/percentage/auto | 用于定义弹性项目在分配多余空间之前的基准大小。 |
flex | flex-grow flex-shrink flex-basis | 用于定义弹性项目的三个属性。 |
order | number | 用于定义弹性项目的排列顺序。 |
以上是CSS3 弹性盒子的常用属性,可以根据需要灵活使用。
如需详细介绍,可参照一下链接:https://www.runoob.com/css3/css3-flexbox.html