Question: For example,

```
<div class="container">
    <div class="column">Column 1</div>
    <div class="column">Column 2</div>
    <div class="column">Column 3</div>
    <div class="column">Column 4</div>
</div>

```

from the above HTML, I want to set 'column' width 25% if container div has 4 children. If it has only 2 children then 'column' width 50% wise versa.

Is there any way to do this using LESS framework. But should not use any script like javascript, jquery etc...

Any help would be appreciated !

Answer: 
As @Danield say in comment, I post my idea as an answer! 
My answer is base on 2 CSS rules :

* set parent to `.container{display: flex;}`
* set children to `.column{flex:1;}`

The result is :

```css
.container
{
  border:solid 1px red;
  display:flex;
}

.column
{
  border:solid 1px blue;
  flex:1;
}
```

```html
<div class="container">
  <div class="column">Column 1</div>
  <div class="column">Column 2</div>
  <div class="column">Column 3</div>
  <div class="column">Column 4</div>
</div>

<br>

<div class="container">
  <div class="column">Column 1</div>
  <div class="column">Column 2</div>
</div>

<br>

<div class="container">
  <div class="column">Column 1</div>
  <div class="column">Column 2</div>
  <div class="column">Column 3</div>
  <div class="column">Column 4</div>
  <div class="column">Column 5</div>
</div>
```
Yes, there is an answer for the above question. Though it is not specific to LESS framework, we can acheive it through simple CSS properties.

All the CSS properties can be used in LESS. Hence it should be applicable in LESS framework.

It is really cool! Is it. Cheers!.

**Solution:**

Here is the working fiddle.

[jsfiddle](https://jsfiddle.net/antonysuthakarj/6wwoctbc/#&togetherjs=IgpObErozE "jsfiddle")

Here is the code.

HTML:

```
<div class="container1">
  <div class="column">Column 1</div>
</div>
<div class="container2">
  <div class="column">Column 1</div>
  <div class="column">Column 2</div>
</div>
<div class="container3">
  <div class="column">Column 1</div>
  <div class="column">Column 2</div>
  <div class="column">Column 3</div>
</div>

```

CSS:

```
.container1, .container2, .container3 {
 float: left;
 width: 100%;
}
.container1 .column, .container2 .column, .container3 .column {
  float: left;
}
.container1 .column {
  background: #ff0000;
}
.container2 .column {
  background: #ffff00;
}
.container3 .column {
  background: #ff00ff;
}
.container1 .column:first-child:nth-last-child(1) {
  width: 100%;
}
.container2 .column:first-child:nth-last-child(2), .container2  .column:first-child:nth-last-child(2) ~ .column {
 width: 50%;
}
.container3 .column:first-child:nth-last-child(3), .container3 .column:first-child:nth-last-child(3) ~ .column {
  width: 33.33%;
}

```

Result:

[![enter image description here](https://i.stack.imgur.com/uYPLV.png)](https://i.stack.imgur.com/uYPLV.png)