-1

I'm using flex for my CSS style with some divs:

<div class="wrapper">
    <h2>Title</h2>
    <div class="button-left">Left</div>
    <div class="button-right">Right</div>
    <div class="content">content goes here...</div>
</div>

.wrapper {
    display: flex;
    flex-direction: column;
    align-items: start;
}

What is need is the h2 needs to be 100% width. The 2 button divs need to be next to each other. And the content must also be 100% width.

But I couldn't get the 2 button divs next to each other for some reason... It keeps placing all the divs below each other...

How can I fix that?

n00bly
  • 395
  • 6
  • 21

7 Answers7

1

What you need to do is remove the flex-direction and employ flex-wrap, while giving each element it's own width:

.wrapper {
  display: flex;
  flex-wrap: wrap;
}

h2,
.content {
  width: 100%;
}

.button-left,
.button-right {
  width: 50%;
}


.wrapper {
  display: flex;
  flex-wrap: wrap;
  max-width: 300px;
  border: solid 2px #333;
  padding: 10px;
}

h2,
.content {
  margin: 0;
  width: 100%;
}

.button-left,
.button-right {
  width: 50%;
}
<div class="wrapper">
  <h2>Title</h2>
  <div class="button-left">Left</div>
  <div class="button-right">Right</div>
  <div class="content">content goes here...</div>
</div>
symlink
  • 11,984
  • 7
  • 29
  • 50
1

I'm sure this is by no means the only solution, but I believe this is what you want. 

.wrapper {
  width: 100%
}

.btn-container {
  display: flex;
  width: 100;
}

.btn-container div {
  width: 50%
}
<div class="wrapper">
  <h2>Title</h2>
  <div class="btn-container">
    <div class="button-left">Left</div>
    <div class="button-right">Right</div>
  </div>
  <div class="content">content goes here...</div>
</div
Soheila Tarighi
  • 487
  • 4
  • 15
maryam
  • 217
  • 2
  • 7
0

wrapper is flex container. so it should have the attribute. justify-content and flex-wrap. justify-content is to adjust the child element. flex-wrap is to wrap the child element. if the wrapper class have flex attribute, child element is located in horizontally. if the child element is out width, we should wrap the element. in this case flex-wrap:wrap attribute. 

.wrapper {
        display: flex;
        flex-direction: column;
        align-items: start;
        flex-wrap: wrap;
        justify-content: space-between;
    }

h2 and content should be width 100%. because it should have the full width from the wrapper element. In this case, the button element will be placed in new line.

.wrapper h2,
.wrapper .content {
    width: 100%;
    min-width: 100%;
}
  • 2
    Please don't post only code as answer, but also provide an explanation what your code does and how it solves the problem of the question. Answers with an explanation are usually of higher quality, and are more likely to attract upvotes. – Mark Rotteveel Mar 31 '20 at 18:01
  • Flexbox is very strong css. .wrapper class should have flex-wrap attribute. It's to break down the element when width is overflow. so I set the 100% width to h2, .content. The element will be 100% width. and button class is placed in 2 side. it's related in justify-content element of .wrapper class. –  Apr 01 '20 at 02:07
  • You should edit the explanation into your answer, not post in the comments. – Mark Rotteveel Apr 01 '20 at 07:18
  • Can you please add a few sentences to explain what the code above does? :) – Fuzzy Analysis Apr 01 '20 at 07:18
  • It's helpfull. let me know. –  Apr 01 '20 at 07:28
0

Good day! I suggest a bit rework your template. Try this one:

<div class="wrapper">
  <div class="wrapper__header">
    <h2>Title</h2>
    <div class="button-left">Left</div>
    <div class="button-right">Right</div>
  </div>
  <div class="content">content goes here...</div>
</div>

.wrapper__header {
  display: flex;
}

.wrapper__header h2 {
  min-width: 100%;
}

I believe I have understood you correctly ;)

AlexanderFSP
  • 652
  • 4
  • 10
0

you'll need to place your button divs into another div like bellow.

<div class="wrapper">
<h2>Title</h2>
<div class="buttonDiv">
    <div class="button-left">Left</div>
    <div class="button-right">Right</div>
</div>
<div class="content">content goes here...</div>

and then style the parent div of button divs like bellow

.buttonDiv{
display: flex;
flex-direction: row;}

in this way you'll achieve what you wanted.

Farhan Ameer
  • 39
  • 2
  • 6
  • I forgot to say but unfortunately I cannot change the layout... – n00bly Mar 31 '20 at 14:45
  • You'll need to asign width:100% property to the h2 and content to occupy the full available width. You can also check the code pen code too. https://codepen.io/farhanameer4545/pen/ExYROQo – Farhan Ameer Mar 31 '20 at 14:54
0

You could wrap your two buttons inside a div and make this div a flexbox too, with the flex-direction set to row:

HTML

<div class="wrapper">
    <h2>Title</h2>
    <div class="button-wrapper"> 
        <div class="button-left">Left</div>
        <div class="button-right">Right</div>
    </div>
    <div class="content">content goes here...</div>
</div>

CSS

.wrapper {
    display: flex;
    flex-direction: column;
    align-items: start;
}
.button-wrapper {
    display: flex;
    flex-direction: row;
}
Daniel Groner
  • 173
  • 1
  • 9
0

let it wrap in rows setting title and content to full width, possible example:

.wrapper {
  display: flex;
  flex-wrap: wrap;
}

h2,
.content {
  min-width: 98%;/* keep room for margin,padding,borders*/
  flex-grow:1;/* let it span all the way */
}
<div class="wrapper">
  <h2>Title</h2>
  <div class="button-left">Left</div>
  <div class="button-right">Right</div>
  <div class="content">content goes here...</div>
</div>
G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129