css 3 弹性盒子 |webpack3 编译scss

弹性盒子通常使用以下几个属性来定义：

.container {
display: flex; /* 定义弹性容器 */
flex-direction: row; /* 定义子元素的排列方向 */
justify-content: center; /* 定义子元素在主轴上的对齐方式 */
align-items: center; /* 定义子元素在交叉轴上的对齐方式 */
}

在上面的例子中，大家定义了一个具有居中对齐子元素的横向 flexbox。这意味着所有子元素将会沿着它们的方向排列，且它们在容器中将被居中对齐。

弹性盒子还有一些其他的属性，例如：

• flex-grow：定义子元素在容器中可用空间的比例。
• flex-basis：定义子元素的初始大小。
• flex-shrink：定义子元素在容器中空间不足时缩小的比例。
• order：修改子元素出现的顺序。

使用弹性盒子，可以轻松创建响应式布局，以适应各种屏幕尺寸和设备类型。弹性盒子的优点还包括：

• 子元素不会超出容器范围。
• 子元素可以通过空间分配进行对齐。
• 可以使用相对或绝对单位来定义子元素的大小。

总之，CSS 3 弹性盒箱是一个必须掌握的工具，可以帮助大家更好地设计网页应用程序。