Flex 盒子宽度和高度始终保持4比1 其中宽度占满父元素的宽度

Flex布局是一种现代CSS布局模型，它使得容器内的元素可以自适应地调整空间，特别是当它们需要在不同屏幕尺寸下排列时。如果你想要创建一个宽度占据父元素全宽、而高度保持为宽度四分之一的布局，你可以使用以下Flex容器属性：

1. `display: flex;`: 首先将容器设置为Flex布局模式。

2. `.container { display: flex; flex-direction: row; }`: `flex-direction: row;`表示主轴方向从左到右，即默认行为。

3. 对于宽度，假设父元素没有设定固定宽度，你可以让`.item`元素占据剩余的空间：

   .container {
     width: 100%; /* 或者去掉，如果父元素已经设置了100%宽度 */
   }
   
   .item {
     flex: 1; /* 这意味着每个.item会等比例分配可用空间 */
   }

4. 对于高度，设置`.item`的高度为宽度的四分之一：

   .item {
     height: calc(25%); /* 使用calc()函数计算总宽度的四分之一 */
     /* 或者直接写成固定值，如: height: 100px;  如果宽度是400px */
   }

这样，`.item`就会按照4:1的比例占据容器的宽度，并保持其高度不变。然而，这仅适用于单行布局，如果有多行并且高度不是固定的，你可能需要调整`flex-wrap`属性和子元素的`align-items`属性。