CSS Flexbox 及其属性

CSS Flexible Box Layout（CSS弹性盒子布局）是CSS3布局模块的新特性之一，常被称为Flexbox或伸缩布局。它旨在为盒子模型提供更加灵活和有效的布局方式，特别是在移动设备上和屏幕尺寸不断变化的情况下。Flexbox定义了一种基于容器和子元素之间的关系来布局元素的方法，可以在水平和垂直方向上改变元素的大小、位置和顺序。

容器相关属性

display

display: flex;

将容器设置为Flex容器，使其成为一个弹性盒子。

flex-wrap

flex-wrap: nowrap | wrap | wrap-reverse;

设置Flex容器中的元素是单行显示（不换行），还是按容器宽度自动换行（正序或倒序）。

flex-direction

flex-direction: row | row-reverse | column | column-reverse;

设置Flex容器中的元素排列方向。默认为行排列，可以变为列排列。

justify-content

justify-content: flex-start | flex-end | center | space-between | space-around;

设置Flex容器中的元素在主轴方向上的对齐方式：靠左、居中、靠右或者平分空间。

align-items

align-items: flex-start | flex-end | center | baseline | stretch;

设置Flex容器中的元素在侧轴方向上的对齐方式：靠上、居中、靠下、基线对齐或者撑满空间。

align-content

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

设置Flex容器中的元素在侧轴方向上的对齐方式（多轴线对齐）。与align-items有一些相似之处，但是align-content可用于多轴线对齐，而align-items只能单轴对齐。

元素相关属性

order

order: <integer>;

设置元素在Flex容器中的显示顺序。默认值为0，可以为正整数或负整数。

flex-grow

flex-grow: <number>;

设置元素的放大比例，如果存在剩余空间，则元素会相应放大。

flex-shrink

flex-shrink: <number>;

设置元素的缩小比例，当空间不足时，元素会相应缩小。

flex-basis

flex-basis: <length> | auto;

定义元素的基准大小。可以理解成元素未设置flex-grow和flex-shrink时的大小。

flex

flex: none | [ flex-grow ] [ flex-shrink ] [ flex-basis ];

简写属性，用于同时设置flex-grow，flex-shrink和flex-basis属性值。

align-self

align-self: auto | flex-start | flex-end | center | baseline | stretch;

设置单个元素在侧轴方向上的对其方式，覆盖align-items属性。默认为auto，表示继承父元素的align-items属性。