CSS flexbox child behavior

Question

Hey I'm new to html and css, I want to do something but I can't find anywhere how to do it, or maybe I'm not understanding well, I made a codepen with an example: https://codepen.io/chileseco/pen/rNemRoZ and this is what I need: http://prntscr.com/u7aw4v or I need more than just flex display?

Thanks for your attention!

.parent{
  display: flex;
  background-color: rgb(77, 77, 255);
}
.child1{  
  background-color: rgb(240, 104, 104);
}
.child2{  
  background-color: rgb(115, 243, 115);
}

<div class="parent">

  <div class="child1">
    <h1>Child 1</h1>
  </div>

  <div class="child2">
    <h1>Child 2</h1>
  </div>

</div>

score 3 · Accepted Answer · edited Aug 28 '20 at 09:10

3

You can define a more specific behavior. Note offtopic: you should not use more than 1 <h1>, make them <h2> or something. Several <h1> will confuse screenreaders.

.parent{
  display: flex;
  flex-flow: row nowrap;
  background-color: rgb(77, 77, 255);
  /*height and Width, padding and margin for display example, you can set that how you need*/
  height: 100vh;
  max-width: 100vw;
  padding: 0;
  margin: 0;
}
.child1{ 
  /*Aligning the headings inside the divs*/
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(240, 104, 104);
  width: 40%;
}
.child2{ 
  /*Aligning the headings inside the divs*/
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(115, 243, 115);
  width: 60%;
}

<div class="parent">

  <div class="child1">
    <h1>Child 1</h1>
  </div>

  <div class="child2">
    <h1>Child 2</h1>
  </div>

</div>

edited Aug 28 '20 at 09:10

Terminat

1,199
5
21

answered Aug 28 '20 at 07:14

Warden330

999
1
5
11

1

Thanks for the h1 tip, it was just as example but I didn't know it anyways. Nice anwser. – Mario Jose Aug 28 '20 at 07:23
No problem thats what we are here for :) – Warden330 Aug 28 '20 at 07:31
You can unify communal declarations of both children elements: ```.child1, .child2 {display: flex; justify-content: center; align-items: center;}```. The last two can be replaced with ```place-items: center;```. – AbsoluteBeginner Aug 28 '20 at 08:41

score 2 · Answer 2 · answered Aug 28 '20 at 07:10

Add to child1

.child1{  
  display: flex;
  flex: 40%;
  align-items:center;
  justify-content:center;
}

Add to child2

.child1{  
  display: flex;
  flex: 60%;
  align-items:center;
  justify-content:center;
}

.parent{
  display: flex;
  background-color: rgb(77, 77, 255);
}

.child1{  
  display: flex;
  flex: 40%;
  background-color: rgb(240, 104, 104);
  align-items:center;
  justify-content:center;
}
.child2{  
  display: flex;
  flex: 60%;
  background-color: rgb(115, 243, 115);
  align-items:center;
  justify-content:center;
}

<div class="parent">

  <div class="child1">
    <h1>Child 1</h1>
  </div>
  
  <div class="child2">
    <h1>Child 2</h1>
  </div>

</div>

score 2 · Answer 3 · answered Aug 28 '20 at 07:12

2

You can use flex attribute in child elements.

.parent{
  display: flex;
  background-color: rgb(77, 77, 255);
  min-height:100vh;
}
.child1{ 
  flex:0.4;
  background-color:rgb(240, 104, 104);
}
.child2{  
  flex:0.6;
  background-color: rgb(115, 243, 115);
}

answered Aug 28 '20 at 07:12

Oğulcan Karayel

395
1
7
19

1

min-height! I also needed this, thank you so much! – Mario Jose Aug 28 '20 at 07:15

Citrullin · Answer 4 · 2020-08-28T07:18:25.903

1

Is this what you are looking for?

.parent{
  display: flex;
  background-color: rgb(77, 77, 255);
  height: 1000px;
}
.child1{
  flex: 40%;
  display:flex;
  background-color: rgb(240, 104, 104);
}
.child2{  
  flex: 60%;
  display:flex;
  background-color: rgb(115, 243, 115);
}

edited Aug 28 '20 at 07:18

answered Aug 28 '20 at 07:09

Citrullin

2,269
14
29

yes thank you, but I also need them to fill the all the height – Mario Jose Aug 28 '20 at 07:13
@MarioJose Edited it. Just add the desired height. – Citrullin Aug 28 '20 at 07:15
Warden down there has a complete example. – Citrullin Aug 28 '20 at 07:16
Please add each child to `display:flex;` for take the style `flex` – Aug 28 '20 at 07:17
@RubixOverflow I have seen yours and Wardens answer. Way more extensive and therefore better. – Citrullin Aug 28 '20 at 07:19

score 0 · Answer 5 · answered Aug 28 '20 at 07:08

0

You just need to add flex: 60% and flex:40% to your children

answered Aug 28 '20 at 07:08

mike

68
1
4

score 0 · Answer 6 · answered Aug 28 '20 at 07:15

Firstly I add 100% width to your parent element

.parent {
  display: flex;
  width: 100%;
  background-color: rgb(77, 77, 255);
}

Then I add 40% to first child and 60% to second child. Also there is a new nice way to center elements. It's the combination of two css rules: display: grid; to enable the second rule, which is place-items: center;

.child1 {  
  background-color: rgb(240, 104, 104);
  display: grid;
  place-items: center;
  width: 40%;
}
.child2 {  
  background-color: rgb(115, 243, 115);
  display: grid;
  place-items: center;
  width: 60%
}

What is more you can add height: 100vh; to make the parent element expand to the height of your viewport

.parent {
  display: flex;
  width: 100%;
  height: 100vh;
  background-color: rgb(77, 77, 255);
}

The whole code:

.parent {
  display: flex;
  width: 100%;
  height: 100vh;
  background-color: rgb(77, 77, 255);
}

.child1 {
  background-color: rgb(240, 104, 104);
  display: grid;
  place-items: center;
  width: 40%;
}

.child2 {
  background-color: rgb(115, 243, 115);
  display: grid;
  place-items: center;
  width: 60%
}

CSS flexbox child behavior

6 Answers6