Flexbox :子项不占用父项的100%，仅占用其最小宽度

Flexbox是一种CSS布局模块，用于在容器元素中创建灵活的、响应式的布局。通过使用Flexbox，可以轻松实现子项不占用父项的100%，而是仅占用其最小宽度。

Flexbox通过在父容器上应用display: flex或display: inline-flex来启用，将其子元素设置为flex项。下面是对Flexbox的一些关键概念和特点的解释：

• 主轴和交叉轴：Flexbox布局由主轴和交叉轴组成。主轴是沿着Flex容器的方向进行布局的轴线，而交叉轴是与主轴垂直的轴线。默认情况下，主轴是水平方向，交叉轴是垂直方向。
• 容器属性：在父容器上使用的属性用于控制Flexbox布局的行为，包括justify-content（主轴上的对齐方式）、align-items（交叉轴上的对齐方式）、flex-direction（主轴的方向）等等。
• 子项属性：在子项上使用的属性用于控制子项在Flex容器中的布局行为，包括flex-grow（子项的放大比例）、flex-shrink（子项的收缩比例）、flex-basis（子项的初始大小）等等。
• 弹性布局：Flexbox使用弹性布局的概念，使得子项可以自动调整和扩展以填充可用空间，同时保持灵活性和响应性。

应用场景： 由于Flexbox提供了强大的布局功能，它在前端开发中得到了广泛应用。以下是一些使用Flexbox的常见场景：

1. 导航栏：Flexbox可以很容易地创建水平或垂直导航栏，并使导航项自动适应容器大小。
2. 网格布局：Flexbox可以用于创建灵活的网格布局，使得网格项可以根据可用空间自动调整位置和大小。
3. 响应式布局：Flexbox非常适合响应式设计，可以通过简单地调整一些属性来实现不同屏幕尺寸下的布局适配。
4. 居中对齐：Flexbox提供了多种对齐方式，可以轻松地实现水平居中、垂直居中或两者同时居中的布局效果。

推荐腾讯云产品和产品介绍链接地址：

• 腾讯云CSS CDN服务：腾讯云提供了CDN服务，可以帮助提高页面加载速度和用户体验。使用CDN可以有效地传输和分发使用Flexbox布局的网页和相关资源。了解更多信息，请访问：腾讯云CSS CDN服务

总结： Flexbox是一种强大的CSS布局模块，可以实现灵活、响应式的布局效果。通过使用容器属性和子项属性，可以轻松地控制子项在容器中的布局行为。它在前端开发中得到了广泛应用，适用于导航栏、网格布局、响应式布局和居中对齐等场景。腾讯云提供了CSS CDN服务，可帮助加速Flexbox布局的网页加载。