css弹性盒子布局

CSS 弹性盒子布局（Flexbox）是一种用于创建灵活的、响应式的页面布局的强大技术。以下是一些常见的 CSS 弹性盒子布局属性和相关值：

1. 容器属性（适用于父元素）：

   • display：指定容器元素使用弹性布局，可以设置为 flex 或 inline-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 (拉伸填充)。

2. 项目属性（适用于子元素）：

   • order：定义项目的排列顺序，默认为 0，可以是任意整数值。
   • flex-grow：定义项目的放大比例，默认为 0，即不放大，可以是任意正数。
   • flex-shrink：定义项目的缩小比例，默认为 1，即有空间时自动缩小，可以是任意正数。
   • flex-basis：定义项目的初始大小，默认为 auto，可以是具体长度或百分比。
   • flex：flex-grow、flex-shrink 和 flex-basis 的简写形式。
   • align-self：覆盖容器的 align-items 属性，单独控制该项目在交叉轴上的对齐方式，可以是 auto、flex-start、flex-end、center、baseline 或 stretch。

这些只是 CSS 弹性盒子布局的一些核心属性和值，还有其他更高级的属性可以进一步扩展和控制弹性盒子布局。使用这些属性和值，您可以创建出各种复杂且灵活的布局。