Столбцы CSS3 с одним меньшим

Question

Я хочу разделить мою страницу на несколько столбцов. На самом деле мне нужно всего три, но мне может понадобиться несколько позже.

Так что я использовал это:

<style> 
.container { 
    display: flex; 
} 

.column { 
    flex: 1; 

    /*for demo purposes only */ 
    background: #f2f2f2; 
    /*border: 1px solid #e6e6e6;*/ 
    box-sizing: border-box; 
    padding-left: 100px; 
    padding-right: 100px; 
    padding-top: 50px; 
    text-align: center; 
} 

.column-one { 
    order: 1; 
} 
.column-two { 
    order: 2; 
} 
.column-three { 
    order: 3; 
} 
</style> 

Так что моя страница полностью разделены на три различных и одинаковых столбцов. Но я хочу, чтобы второй был меньше остальных (50%).

Я уже пытался уменьшить ширину .column-two class, но это не сработало. Можно ли сделать это с помощью этого короля кода?

Мне очень нравится эта структура, потому что, если мне нужно добавить еще один столбец, мне не нужно менять весь CSS. Вот почему я хочу сохранить этот код.

Answer 1

 .container { 
 
      display: flex; 
 
      min-height: 200px; 
 
     } 
 

 
     .column { 
 
      background: #f2f2f2; 
 
      border: 1px solid black; 
 
      margin: 3px; 
 
     } 
 

 
     .column-one { 
 
      flex: 1; 
 
     } 
 
     .column-two { 
 
      flex: 0.5; 
 
     } 
 
     .column-three { 
 
      flex: 1; 
 
     }

<div class="container"> 
 
      <div class="column column-one"></div> 
 
      <div class="column column-two"></div> 
 
      <div class="column column-three"></div> 
 
</div>

Если Вы хотите использовать четыре столбца позднее.

   .column-one { 
        flex: 1; 
       } 
       .column-two { 
        flex: 0.5; 
       } 
       .column-three { 
        flex: 0.5; 
       } 
       .column-four { 
        flex: 1; 
       } 

Answer 2

Если вы добавите flex: 1 в колонку-два и flex: 2 в другие две колонки, столбец-два будет половиной ширины или 50% шириной других двух столбцов. Также вам не нужно использовать заказ, если вы не собираетесь его менять.

.container { 
 
    display: flex; 
 
    min-height: 100vh; 
 
    flex-direction: row; 
 
} 
 

 
.column { 
 
    /*for demo purposes only */ 
 
    background: #f2f2f2; 
 
    /*border: 1px solid #e6e6e6;*/ 
 
    box-sizing: border-box; 
 
    padding-top: 50px; 
 
    text-align: center; 
 
    border: 1px solid black; 
 
    margin: 5px; 
 
} 
 

 
.column-one { 
 
    flex: 2; 
 
} 
 
.column-two { 
 
    flex: 1; 
 
} 
 
.column-three { 
 
    flex: 2; 
 
}

<div class="container"> 
 
    <div class="column column-one"></div> 
 
    <div class="column column-two"></div> 
 
    <div class="column column-three"></div> 
 
</div>