Flex boxes at 50% of the screen

Navigation
3

Using divs with display:flex I would like the two elements that are going to have to occupy 50% of the screen respectively, but I do not get it by modifying the property flex-grow . I have tried to play a bit with the values of that property and nothing. I currently have the code 

    .cabecera{
      width:100%;
      height:auto;
      display:flex;
      flex-direction:row;
      justify-content: flex-start;
      align-items: center;
    }
    .item-flex{
      flex-grow: 50%; /* realizando pruebas */
    }
    .item-primero{background:yellow;}/*background pruebas*/
    .item-second{background:blue;}/*background pruebas*/
<div class="cabecera">
  <div class="item-flex item-primero">
    este es mi item primero
  </div>
  <div class="item-flex item-second">
  este es mi segundo
  </div>
</div>

To achieve this, what would you have to play with the flex-basis property?

    
asked by Marcos 20.02.2017 в 10:21
source

3 answers

3

In this question I have seen the answer, and I have copied the css -> flex: 0 1 50%; in your item-flex 

.cabecera{
      width:100%;
      height:auto;
      display:flex;
      flex-direction:row;
      justify-content: flex-start;
      align-items: center;
    }
    .item-flex{
      
      flex: 0 1 50%;


    }
    .item-primero{background:yellow;}/*background pruebas*/
    .item-second{
      background:blue;
     text-align: right;
     }/*background pruebas*/
<div class="cabecera">
  <div class="item-flex item-primero">
    este es mi item primero
  </div>
  <div class="item-flex item-second">
  este es mi segundo
  </div>
</div>
    
answered by 20.02.2017 / 10:35
source
2

Doing more tests I think I've found what I was looking for.

I was applying the wrong property, I had to set the flex-basis property to the box.

The result is like this 

.cabecera{
  width:100%;
  height:100px;
  background:#FFF;
  display:flex;
  flex-direction:row;
  justify-content: flex-start;
  align-items: center;
}
.item-flex{
  flew-grow:1;
  flex-basis:46%;
  padding:0 2%;
}
.item-primero{
  background:yellow;
}
.item-second{
  background:grey;
  color:#FFF;
  text-align:right;
}
<div class="cabecera">
  <div class="item-flex item-primero">
    este es mi item primero
  </div>
  <div class="item-flex item-second">
  este es mi segundo  
  </div>
</div>
    
answered by 20.02.2017 в 10:35
2

You can use flex:1 and that div will have the remaining width. that is, if your .item-primero has width 30%, the other div will be width 70% 

.cabecera{
  display:flex;
 }
   
  .item-primero{
  width: 50%;
  background-color: yellow;
  float: left;
}

.item-second{
  background-color: blue;
  float: right;
  flex:1;
}
<div class="cabecera">
  <div class="item-flex item-primero">
    este es mi item primero
  </div>
  <div class="item-flex item-second">
  este es mi segundo
  </div>
</div>
  

if there were 3 elements and the first was 50%, the second flex: 1 and the   Third flex: 1 ... would it mean that 50%, 25% and 25% would remain? 

.cabecera{
  display:flex;
 }
   
  .item-primero{
  width: 50%;
  background-color: yellow;
  float: left;
}

.item-second{
  background-color: blue;
  float: right;
  flex:1;
}
.item-tercer{
  background-color: green;
  float: right;
  flex:1;
}
<div class="cabecera">
  <div class="item-flex item-primero">
    este es mi item primero
  </div>
  <div class="item-flex item-second">
  este es mi segundo
  </div>
  <div class="item-flex item-tercer">
  este es mi tercer
  </div>
</div>
    
answered by 20.02.2017 в 15:48
What is the best collation for my MySQL Database? Check mail with PHP