CODEWITHSUNDEEP
htmlcss
Bastian
Bastian

Reputation: 1237

How to divide to rows using flex - HTML CSS

I start to learn html, I want to create a screen that will have 3 rows in the forth line. I understood that it could be using flex, this is my html code.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="myStayle.css">
    <title>Document</title>
</head>
<body>
    <div class="contaner">
        <div class = "header">   
                <div style="display: inline-block;" class="row-1">LOGO</div>
                <div style="display: inline-block;"  class="row-1">Menu</div>

        </div>
        <div class="main">
                <div  class="row-2">picture</div>

                <div style="display: inline-block;" class="row-3">text1</div>
                <div style="display: inline-block;" class="row-3">text2</div>

                <div   class="row-4">pic</div>
                <div   class="row-4">link</div>
                <div   class="row-4">text</div>
        </div>
      

    </div>
    
    
</body>
</html>

this is my CSS

.row-1 {
    display: flex;
    flex:1;
    text-align: center;
    border: 10px solid black;
    max-width: 100px;
  }

  .row-2 {
    display: flex;
    flex:1;
    text-align: center;
    border: 10px solid black;
    max-width: 100px;
    font-size: 30px;
  }

  .row-3 {
    display: flex;
    flex:1;
    text-align: center;
    border: 10px solid black;
    max-width: 100px;
    font-size: 30px;
  }

  .row-4 {
    display: flex;
    flex-wrap: wrap;
    flex:1 1 30%;
    text-align: center;
    align-items: center;
    border: 10px solid black;
    max-width: 100px;
    font-size: 30px;
  }

this is my screen enter image description here

and this is what I want to create enter image description here

I do not know how to divide the 4 line to three rows. (pic + link + text in the same line)

Upvotes: 1

Views: 5187

Answers (3)

Ribin Roy
Ribin Roy

Reputation: 11

You can simply the HTML as below:

.container {
    display: flex;
    flex-direction: column;
    width: 100%;
    text-align: center;
}
.flex-row {
    display: flex;
    flex-direction: row;
    width: 100%;
}
.flex-row div {
    flex: 1;
    height: 40px;
    border: 1px solid black;
}
.flex-row .flex-child-b3 {
    flex: 0.5;
}
<div class="container">
    <div class="header flex-row">
        <div class="flex-child-b3">LOGO</div>
        <div>Menu</div>
    </div>
    <div class="flex-row">
        <div>picture</div>
    </div>
    <div class="flex-row">
        <div>text1</div>
        <div>text2</div>
    </div>
    <div class="flex-row">
        <div>pic</div>
        <div>link</div>
        <div>text</div>
    </div>
</div>

Upvotes: 1

denik1981
denik1981

Reputation: 380

I believe you are confusing a flex-container with a flex-item. Each of your rows should be a flex-container and its elements inside flex-items. The right way to do this should be:

<div class="row-4">
  <div>link</div>
  <div>pic</div>
  <div>text</div>
</div>

And then to have equally sized columns you will have to set the flex-grow property of every child to "1", or you can also use the shorthand "flex:1".

So your CSS in its very basic form it should look like this:

.row-4 {
  display:flex
}

.row-4 > * {
  flex-1:
  text-align:center
}

The text-align property is what I'm using here to center your text and your images inside each column. Although there are many ways to do this, I find this the easiest one.

Upvotes: 0

Sana Mumtaz
Sana Mumtaz

Reputation: 833

The key to flexbox is proper sectioning of items into containers. In the sample pic you have provided we have one big container, which you can further section into header and main. The header and main are in column layout. main further consists of four containers (column layout), each of which contains more items (row layout).

div {
  border: 1px solid #000;
  text-align: center;
  flex-grow: 1;
}

.container {
  display: flex;
  flex-direction: column;
}

header {
  display: flex;
}

main {
  display: flex;
  flex-direction: column;
}

.row-2 {
  display: flex;
}

.row-3 {
  display: flex;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="myStayle.css">
  <title>Document</title>
</head>

<body>
  <div class="container">
    <header>
      <div>LOGO</div>
      <div>Menu</div>
    </header>
    <main>
      <div class="row-1">picture</div>
      <div class="row-2">
        <div>text1</div>
        <div>text2</div>
      </div>
      <div class="row-3">
        <div>pic</div>
        <div>link</div>
        <div>text</div>
      </div>
      <div class="row-4">
        <div>footer</div>
      </div>
    </main>
  </div>
</body>

</html>

Upvotes: 1

Related Questions