using html and css only flexbox

Question

How to align like this because the text with progress bar are hard to align using flex box.

should i make 3 seperate div or 2 div? because text with progressbar content are hard to align

https://jsfiddle.net/ypsmkLrb/1/ MY CODE

*{
    padding:0;
    margin:0;
}
body{
    font-family:Verdana, Geneva, Tahoma, sans-serif;
}
.container{
    width:1200px;
    margin:auto;
    background-color:teal;
}
.about-header{
    padding-bottom:25px;
    text-align: center;
}
.about-img img{
    height:200px;
    width:auto;
}
.about-img{
    height:200px;
    width:auto;
}
.about-row{
    display: flex;
    flex-wrap: wrap;
    font-size: 11px;       
}
.about-content{
    line-height:1.6;
    padding-left: 20px;
    border:solid
}
.about-content img{
    height:15px;
    width:auto;
 }
.bar-row-one{
    display:flex;
    align-items:flex-start;
    justify-content:space-around;
}
 .bar-row-two{
    display:flex;
    justify-content:space-around;
}

I'm already writing a solution, and I want to ask why you use the  tag if it comes from XHTML. Correctly used in HTML5 looks like this:  . — Majonez.exe
– Majonez.exe, Commented Feb 15, 2020 at 17:51
@MAJO sorry, before you replied i also read in related post about , and realized i put it wrong. — Kiruaaa
– Kiruaaa, Commented Feb 15, 2020 at 17:56
should i make 3 seperate div or 2 div? because text with progressbar content are hard to align You mean like a padding or a margin? — Majonez.exe
– Majonez.exe, Commented Feb 15, 2020 at 18:11

IvanS95 · Accepted Answer · 2020-02-15 18:06:59Z

If you need to just align the progressbars, I'd suggest setting an explicit width to the labels before so the progress bar starts at the same point for all of them

* {
  padding: 0;
  margin: 0;
}

body {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.container {
  width: 1200px;
  margin: auto;
  background-color: teal;
}

.about-header {
  padding-bottom: 25px;
  text-align: center;
}

.about-img img {
  height: 200px;
  width: auto;
}

.about-img {
  height: 200px;
  width: auto;
}

.about-row {
  display: flex;
  flex-wrap: wrap;
  font-size: 11px;
}

.about-content {
  line-height: 1.6;
  padding-left: 20px;
  border: solid
}

.about-content img {
  height: 15px;
  width: auto;
}

.bar-row-one {
  display: flex;
  align-items: flex-start;
  justify-content: space-around;
}

.bar-row-two {
  display: flex;
  justify-content: space-around;
}

label {
  width: 50px;
  display: inline-block;
}

.bar {
  display: flex;
  align-items: center;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mockup Template</title>
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <section id="about">
    <div class="container">
      <div class="about-header">
        <h1>About</h1>
      </div>
      <div class="about-row">
        <div class="about-img">
          <img src="https://cdn.pixabay.com/photo/2015/02/24/15/41/dog-647528_1280.jpg" alt="farm_5">
        </div>
        <div class="about-content">
          <p>Lorem Ipsum dolor sit amet, vix vocent habemus petentium ea , ex vix nonumy scripta.<br/> Per ne alia stet clita. No admodum detracto pericula vim, te dicit utamur molestie nec. No phaedrum molestiae assueverit duo
          </p>
          </br>
          <p>Et tritani recusabo oportere sea, per at noster vivedum deterruisset. Mea te libris mandamus deseruisse.<br/> Dicat zril epicurei ex pri, ad posse occurreret posidonium mei, ut vis sint explicari.<br/> In vidisse volucptatibus vix. Ectram dissentiunt
            an sit, duo ea utinam imperdiet. His et nobis hendrerit,<br/> Illum delicata no sea, cu fabulas recusabo adhorreant has. Probo luciluis perfecto ei vix, purto noluisse constetur an pro.
          </p>
          <div class="bar-row-one">
            <div class="bar bar1">
              <label class="bar-label">Graphic</label><img src="https://i.dlpng.com/static/png/6659952_preview.png" alt="bars">
            </div>
            <div class="bar bar2">
              <label class="bar-label">System</label><img src="https://i.dlpng.com/static/png/6659952_preview.png" alt="bars">
            </div>
          </div>
          <div class="bar-row-two">
            <div class="bar bar3">
              <label class="bar-label-web"> Web</label><img src="https://i.dlpng.com/static/png/6659952_preview.png" alt="bars">
            </div>
            <div class="bar bar4">
              <label class="bar-label-ui">UI/UX</label><img src="https://i.dlpng.com/static/png/6659952_preview.png" alt="bars">
            </div>
          </div>
        </div>
      </div>
  </section>
</body>

</html>

Himanshu Joshi · Accepted Answer · 2020-02-15 17:53:36Z

What I understand from your comment that you looking for center alignment of the content area. If this is right, I think you missed few attributes for flex properties in ".about-row" class, please try below snippet :

*{
              padding:0;
              margin:0;
          }
          body{
              font-family:Verdana, Geneva, Tahoma, sans-serif;
          }
          .container{
              width:1200px;
              margin:auto;
              background-color:teal;
          }
          .about-header{
              padding-bottom:25px;
              text-align: center;
          }
          .about-img img{
              height:200px;
              width:auto;
          }
          .about-img{
              height:200px;
              width:auto;
          }
          .about-row{
              display: flex;
              flex-direction: row;
              font-size: 11px;
              justify-content: center;
              align-items: flex-start;     
          }
          .about-content{
              line-height:1.6;
              padding-left: 20px;
              border:solid
          }
          .about-content img{
              height:15px;
              width:auto;
           }
          .bar-row-one{
              display:flex;
              align-items:flex-start;
              justify-content:space-around;
          }
           .bar-row-two{
              display:flex;
              justify-content:space-around;
          }

 <section id="about">
        <div class="container">
            <div class="about-header">
                <h1>About</h1>
            </div>
            <div class="about-row">
                <div class="about-img">
                    <img src="https://cdn.pixabay.com/photo/2015/02/24/15/41/dog-647528_1280.jpg" alt="farm_5">
                </div>
                <div class="about-content">
                    <p>Lorem Ipsum dolor sit amet, vix vocent habemus petentium ea , ex vix nonumy scripta.<br/>
                        Per ne alia stet clita. No admodum detracto pericula vim, te dicit utamur molestie nec. No phaedrum molestiae assueverit duo
                     </p></br>
                     <p>Et tritani recusabo oportere sea, per at noster vivedum deterruisset. Mea te libris mandamus deseruisse.<br/>
                        Dicat zril epicurei ex pri, ad posse occurreret posidonium mei, ut vis sint explicari.<br/>
                        In vidisse volucptatibus vix. Ectram dissentiunt an sit, duo ea utinam imperdiet. His et nobis hendrerit,<br/>
                        Illum delicata no sea, cu fabulas recusabo adhorreant has. Probo luciluis perfecto ei vix, purto noluisse constetur an pro.
                     </p>
                    <div class="bar-row-one">
                        <div class="bar1">
                            <label class="bar-label">Graphic</label><img src="https://i.dlpng.com/static/png/6659952_preview.png" alt="bars">
                        </div>
                        <div class="bar2">
                            <label class="bar-label">System</label><img src="https://i.dlpng.com/static/png/6659952_preview.png" alt="bars">
                        </div>
                    </div>
                    <div class="bar-row-two">
                        <div class="bar3">
                            <label class="bar-label-web"> Web</label><img src="https://i.dlpng.com/static/png/6659952_preview.png" alt="bars">
                        </div>
                        <div class="bar4">
                            <label class="bar-label-ui/ux">UI/UX</label><img src="https://i.dlpng.com/static/png/6659952_preview.png" alt="bars">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

Majonez.exe · Accepted Answer · 2020-02-15 18:07:17Z

That's the solution:

Live demo: https://jsfiddle.net/6qwkmtfx/1/

Or the CSS code.

* {
  padding: 0;
  margin: 0;
}

body {
  font-family: Verdana, Geneva, Tahoma, sans-serif; /* ohhh. a lot of fonts */
}

.container {
  width: 100%; /* orginally "width: 1200px" */
  margin: auto;
  background-color: teal; /* or "white" // "#fff" */
}

.about-header {
  padding-bottom: 25px;
  /* padding-top: 25px; */
  text-align: center;
}

.about-img img {
  height: 200px;
}

.about-img {
  height: 200px;
}

.about-row {
  display: flex;
  flex-direction: row;
  font-size: 11px;
  justify-content: center; /* to grid */
  align-items: flex-start; /* to grid */
}

.about-content {
  line-height: 1.6; /* Missing value? */
  padding-left: 20px;
  border: solid;
}

.about-content img {
  height: 15px;
  width: auto;
}

.bar-row-one {
  display: flex;
  align-items: flex-start;
  justify-content: space-around;
}

.bar-row-two {
  display: flex;
  justify-content: space-around;
}

Collectives™ on Stack Overflow

using html and css only flexbox

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related