How can I use flex to layout in css? (2
in 1 row)?

Question

I have 2 <section>:

<header>

</header>
<section class="left">
</section>

<section class="right">
</section>

There is no tag that covers these 2 sections And Can not change or add to HTML . Now i want to use flex to layout this pages like: |left|right|. Now I want layout header with 100% width , .left 30% and right 70%. Can you give me some ideas to fix this, thanks all

can you add a container around the two sections? – DCR Oct 08 '20 at 15:34 — DCR, Oct 08 '20 at 15:34
you should wrap them before – godfather Oct 08 '20 at 15:37 — godfather, Oct 08 '20 at 15:37

DCR · Answer 1 · 2020-10-08T16:06:39.947

1

the "proper" way would be to add a container around your two sections. If all you have on the page are these sections you can apply display:flex to the body tag

body{
display:flex;
justify-content:space-evenly;
flex-wrap:wrap;
}
header,footer{
width:100%;
text-align:center;
}

<header>header</header>
<section class="left">left
</section>
<section class="right">right
</section>
<footer>footer</footer>

edited Oct 08 '20 at 16:06

answered Oct 08 '20 at 15:37

DCR

14,737
12
52
115

Sorry about my code above. I forgot add `header` to `body`. If i use `display:flex` in `body` it will make `header` and `footer` same row with `section` – Stack Oct 08 '20 at 15:53
snippet revised to have header and footer displayed above and below sections – DCR Oct 08 '20 at 16:07
I don't know why, but this code doesn't work as I expected. .left and .right are not on a single row – Stack Oct 08 '20 at 16:13
provide code or link to your page – DCR Oct 09 '20 at 16:21

score 0 · Answer 2 · answered Oct 08 '20 at 15:38

0

<main class="container">
 <section class="left"></section>
 <section class="right"></section>
</main>

CSS

.container {
  display: flex;
  justify-content: space-between;
}

No need for left or right class. And you need a container.

answered Oct 08 '20 at 15:38

Grégory Huyghe

422
1
6
18

My problem is can not change html code. only use css and js to change layout – Stack Oct 08 '20 at 15:54
Try float:left / float:right, but you can't use flex without a container box. – Grégory Huyghe Oct 08 '20 at 15:56
oh, I know how use `float` to layout this page. But i try to practice with `display:flex` and i spent alot of time – Stack Oct 08 '20 at 16:00
You can't learn it without the proper HTML. CSS is not isolated from HTML. – Grégory Huyghe Oct 08 '20 at 16:04

score 0 · Answer 3 · answered Oct 08 '20 at 15:39

0

You can just use display: flex; on parent <div>. You can also use flex-direction: row; in the parent <div> if you want to specify it.

This page has a great guide for using flex properties.

answered Oct 08 '20 at 15:39

Leon Markes

382
1
7

yep, I know how to use `display:flex` with parent element. But my problem is not parent elemnt around 2 `section` :( – Stack Oct 08 '20 at 15:57

FreddyNoNose · Answer 4 · 2020-10-08T15:39:01.533

-3

This should provide the layout you're looking for.

 <html>
    <head>
    <style>
    .flex-container {
      display: flex;
    }
    
    .flex-container > div {
      background-color: #f1f1f1;
      margin: 10px;
      padding: 20px;
      font-size: 30px;
    }
    </style>
    </head>
    <body>
    
    <div class="flex-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>  
    </div>
    </body>
    </html>

edited Oct 08 '20 at 15:39

answered Oct 08 '20 at 15:36

FreddyNoNose

320
1
14

He don't want to use any container around the sections. – Vishal Kamlapure Oct 08 '20 at 15:38
1

@VishalKamlapure But he has to! – Grégory Huyghe Oct 08 '20 at 15:39

How can I use flex to layout in css? (2 in 1 row)?

4 Answers4

How can I use flex to layout in css? (2
in 1 row)?