如何为Flex容器内的两个Div分别设置85%和15%宽度？

• 用flex-grow按比例分配
  flex-grow负责分配容器的剩余空间，85%和15%的比例简化后是17:3，按这个比例设置即可：

  .flex-container {
    display: flex;
    width: 100%; /* 让容器占满可用宽度 */
  }
  
  .item-85 {
    flex-grow: 17;
    background: #eee;
  }
  
  .item-15 {
    flex-grow: 3;
    background: #ccc;
  }
  

  嫌麻烦直接设85和15也可以，比例一致就行，最终两个元素会按这个比例瓜分容器剩余空间。

• 结合flex-basis和flex-shrink实现精确初始宽度
  想要元素初始宽度就是85%和15%，同时允许空间不足时自动收缩，可这么写：

  .flex-container {
    display: flex;
    width: 100%;
  }
  
  .item-85 {
    flex-basis: 85%;
    flex-shrink: 1; /* 默认值就是1，可省略 */
    background: #eee;
  }
  
  .item-15 {
    flex-basis: 15%;
    flex-shrink: 1;
    background: #ccc;
  }
  

  要是不想让元素收缩，把flex-shrink设为0即可，但容器空间不足时元素可能会溢出。

• 直接设置width（最直观的方式）
  flex布局里给子元素直接设置width完全生效，代码更简单：

  .flex-container {
    display: flex;
    width: 100%;
  }
  
  .item-85 {
    width: 85%;
    background: #eee;
  }
  
  .item-15 {
    width: 15%;
    background: #ccc;
  }
  

  注意：如果元素有padding或border，记得加上box-sizing: border-box，防止宽度溢出容器：

  * {
    box-sizing: border-box;
  }
  

内容的提问来源于stack exchange，提问作者m4ch1n3ry