Flexbox problem with formatting headings on rows

I am trying to create 3 rows of paragraphs with individual headings using Flexbox. The paragraphs are fine, but the heading (h2) isn't going on top of the paragraphs and instead is kind of smushed to the left of each paragraph.

Edited to add the HTML. Also I'm just trying to copy a website I liked on my local server so none of this wording is mine.

.container {

  display: flex;

  justify-content: space-evenly;

  flex-direction: row;

}



.container h2 {

  font-family: "Work Sans", Arial, sans-serif;

  font-size: 20px;

  font-weight: 300;

  color: hsl(0, 11%, 16%);

}



.container p {

  position: block;

  margin: 25px;

  50px;

  75px;

  100px;

}

<div class="container">

  <h2>First visit? Don't be skittish.</h2>

  <p>All new clients can enjoy a free first exam by mentioning this offer. We also provide discounted vaccination and treatment packages for puppies and kittens to start them on the right paw!</p>

  <h2>Boarding, Grooming & Doggie Daycare</h2>

  <p>We offer a full spectrum of boarding, grooming & doggie daycare services. Whether it's a day at the spa, a day of play, or a longer staycation, your pet is in good hands.

  </p>

  <h2>Refill Prescriptions</h2>

  <p>You're busy, so we make refills easy. We also competitively price match all of your pet's medications. Request a refill via our Chat Now feature or give us a call and we'll hop on it.</p>

</div>

edited Nov 14 '18 at 16:58

Maaz Syed Adeeb

2,37221425

asked Nov 14 '18 at 14:24

decopage

113

1

Please add your code, including your HTML

– Itay Gal
Nov 14 '18 at 14:26

flex is a tool you'd use specifically to position elements adjacently. <h2> and <p> elements stack vertically by default - you wouldn't need any CSS to achieve that effect.

– Tyler Roper
Nov 14 '18 at 14:26

I'm learning flexblox and I decided to try it on this element b/c the original website used flexbox and the positioning without flexbox is more complicated, ie moving everything to the right and left, using random breaks to make sure all rows are equal. I figured flexbox would be easier for this, and it is with the exception of the heading being messed up

– decopage
Nov 14 '18 at 14:52

Is there a picture/live demo of how you're expecting it to look? By your statement, I get a feeling that what you're expecting and what you're communicating are not matching. And it would help everyone if there's a picture/demo.

– Maaz Syed Adeeb
Nov 14 '18 at 14:56

add a comment |

Edited to add the HTML. Also I'm just trying to copy a website I liked on my local server so none of this wording is mine.

.container {

  display: flex;

  justify-content: space-evenly;

  flex-direction: row;

}



.container h2 {

  font-family: "Work Sans", Arial, sans-serif;

  font-size: 20px;

  font-weight: 300;

  color: hsl(0, 11%, 16%);

}



.container p {

  position: block;

  margin: 25px;

  50px;

  75px;

  100px;

}

<div class="container">

  <h2>First visit? Don't be skittish.</h2>

  <p>All new clients can enjoy a free first exam by mentioning this offer. We also provide discounted vaccination and treatment packages for puppies and kittens to start them on the right paw!</p>

  <h2>Boarding, Grooming & Doggie Daycare</h2>

  <p>We offer a full spectrum of boarding, grooming & doggie daycare services. Whether it's a day at the spa, a day of play, or a longer staycation, your pet is in good hands.

  </p>

  <h2>Refill Prescriptions</h2>

  <p>You're busy, so we make refills easy. We also competitively price match all of your pet's medications. Request a refill via our Chat Now feature or give us a call and we'll hop on it.</p>

</div>

edited Nov 14 '18 at 16:58

Maaz Syed Adeeb

2,37221425

asked Nov 14 '18 at 14:24

decopage

113

1

Please add your code, including your HTML

– Itay Gal
Nov 14 '18 at 14:26

flex is a tool you'd use specifically to position elements adjacently. <h2> and <p> elements stack vertically by default - you wouldn't need any CSS to achieve that effect.

– Tyler Roper
Nov 14 '18 at 14:26

I'm learning flexblox and I decided to try it on this element b/c the original website used flexbox and the positioning without flexbox is more complicated, ie moving everything to the right and left, using random breaks to make sure all rows are equal. I figured flexbox would be easier for this, and it is with the exception of the heading being messed up

– decopage
Nov 14 '18 at 14:52

Is there a picture/live demo of how you're expecting it to look? By your statement, I get a feeling that what you're expecting and what you're communicating are not matching. And it would help everyone if there's a picture/demo.

– Maaz Syed Adeeb
Nov 14 '18 at 14:56

add a comment |

Edited to add the HTML. Also I'm just trying to copy a website I liked on my local server so none of this wording is mine.

.container {

  display: flex;

  justify-content: space-evenly;

  flex-direction: row;

}



.container h2 {

  font-family: "Work Sans", Arial, sans-serif;

  font-size: 20px;

  font-weight: 300;

  color: hsl(0, 11%, 16%);

}



.container p {

  position: block;

  margin: 25px;

  50px;

  75px;

  100px;

}

<div class="container">

  <h2>First visit? Don't be skittish.</h2>

  <p>All new clients can enjoy a free first exam by mentioning this offer. We also provide discounted vaccination and treatment packages for puppies and kittens to start them on the right paw!</p>

  <h2>Boarding, Grooming & Doggie Daycare</h2>

  <p>We offer a full spectrum of boarding, grooming & doggie daycare services. Whether it's a day at the spa, a day of play, or a longer staycation, your pet is in good hands.

  </p>

  <h2>Refill Prescriptions</h2>

  <p>You're busy, so we make refills easy. We also competitively price match all of your pet's medications. Request a refill via our Chat Now feature or give us a call and we'll hop on it.</p>

</div>

edited Nov 14 '18 at 16:58

Maaz Syed Adeeb

2,37221425

asked Nov 14 '18 at 14:24

decopage

113

Edited to add the HTML. Also I'm just trying to copy a website I liked on my local server so none of this wording is mine.

.container {

  display: flex;

  justify-content: space-evenly;

  flex-direction: row;

}



.container h2 {

  font-family: "Work Sans", Arial, sans-serif;

  font-size: 20px;

  font-weight: 300;

  color: hsl(0, 11%, 16%);

}



.container p {

  position: block;

  margin: 25px;

  50px;

  75px;

  100px;

}

<div class="container">

  <h2>First visit? Don't be skittish.</h2>

  <p>All new clients can enjoy a free first exam by mentioning this offer. We also provide discounted vaccination and treatment packages for puppies and kittens to start them on the right paw!</p>

  <h2>Boarding, Grooming & Doggie Daycare</h2>

  <p>We offer a full spectrum of boarding, grooming & doggie daycare services. Whether it's a day at the spa, a day of play, or a longer staycation, your pet is in good hands.

  </p>

  <h2>Refill Prescriptions</h2>

  <p>You're busy, so we make refills easy. We also competitively price match all of your pet's medications. Request a refill via our Chat Now feature or give us a call and we'll hop on it.</p>

</div>

.container {

  display: flex;

  justify-content: space-evenly;

  flex-direction: row;

}



.container h2 {

  font-family: "Work Sans", Arial, sans-serif;

  font-size: 20px;

  font-weight: 300;

  color: hsl(0, 11%, 16%);

}



.container p {

  position: block;

  margin: 25px;

  50px;

  75px;

  100px;

}

<div class="container">

  <h2>First visit? Don't be skittish.</h2>

  <p>All new clients can enjoy a free first exam by mentioning this offer. We also provide discounted vaccination and treatment packages for puppies and kittens to start them on the right paw!</p>

  <h2>Boarding, Grooming & Doggie Daycare</h2>

  <p>We offer a full spectrum of boarding, grooming & doggie daycare services. Whether it's a day at the spa, a day of play, or a longer staycation, your pet is in good hands.

  </p>

  <h2>Refill Prescriptions</h2>

  <p>You're busy, so we make refills easy. We also competitively price match all of your pet's medications. Request a refill via our Chat Now feature or give us a call and we'll hop on it.</p>

</div>

.container {

  display: flex;

  justify-content: space-evenly;

  flex-direction: row;

}



.container h2 {

  font-family: "Work Sans", Arial, sans-serif;

  font-size: 20px;

  font-weight: 300;

  color: hsl(0, 11%, 16%);

}



.container p {

  position: block;

  margin: 25px;

  50px;

  75px;

  100px;

}

<div class="container">

  <h2>First visit? Don't be skittish.</h2>

  <p>All new clients can enjoy a free first exam by mentioning this offer. We also provide discounted vaccination and treatment packages for puppies and kittens to start them on the right paw!</p>

  <h2>Boarding, Grooming & Doggie Daycare</h2>

  <p>We offer a full spectrum of boarding, grooming & doggie daycare services. Whether it's a day at the spa, a day of play, or a longer staycation, your pet is in good hands.

  </p>

  <h2>Refill Prescriptions</h2>

  <p>You're busy, so we make refills easy. We also competitively price match all of your pet's medications. Request a refill via our Chat Now feature or give us a call and we'll hop on it.</p>

</div>

css flexbox

edited Nov 14 '18 at 16:58

Maaz Syed Adeeb

2,37221425

asked Nov 14 '18 at 14:24

decopage

113

edited Nov 14 '18 at 16:58

Maaz Syed Adeeb

2,37221425

asked Nov 14 '18 at 14:24

decopage

113

edited Nov 14 '18 at 16:58

Maaz Syed Adeeb

2,37221425

edited Nov 14 '18 at 16:58

Maaz Syed Adeeb

2,37221425

edited Nov 14 '18 at 16:58

Maaz Syed Adeeb

2,37221425

asked Nov 14 '18 at 14:24

decopage

113

asked Nov 14 '18 at 14:24

decopage

113

asked Nov 14 '18 at 14:24

decopage

113

1

Please add your code, including your HTML

– Itay Gal
Nov 14 '18 at 14:26

flex is a tool you'd use specifically to position elements adjacently. <h2> and <p> elements stack vertically by default - you wouldn't need any CSS to achieve that effect.

– Tyler Roper
Nov 14 '18 at 14:26

I'm learning flexblox and I decided to try it on this element b/c the original website used flexbox and the positioning without flexbox is more complicated, ie moving everything to the right and left, using random breaks to make sure all rows are equal. I figured flexbox would be easier for this, and it is with the exception of the heading being messed up

– decopage
Nov 14 '18 at 14:52

Is there a picture/live demo of how you're expecting it to look? By your statement, I get a feeling that what you're expecting and what you're communicating are not matching. And it would help everyone if there's a picture/demo.

– Maaz Syed Adeeb
Nov 14 '18 at 14:56

add a comment |

1

Please add your code, including your HTML

– Itay Gal
Nov 14 '18 at 14:26

flex is a tool you'd use specifically to position elements adjacently. <h2> and <p> elements stack vertically by default - you wouldn't need any CSS to achieve that effect.

– Tyler Roper
Nov 14 '18 at 14:26

I'm learning flexblox and I decided to try it on this element b/c the original website used flexbox and the positioning without flexbox is more complicated, ie moving everything to the right and left, using random breaks to make sure all rows are equal. I figured flexbox would be easier for this, and it is with the exception of the heading being messed up

– decopage
Nov 14 '18 at 14:52

Is there a picture/live demo of how you're expecting it to look? By your statement, I get a feeling that what you're expecting and what you're communicating are not matching. And it would help everyone if there's a picture/demo.

– Maaz Syed Adeeb
Nov 14 '18 at 14:56

Please add your code, including your HTML

– Itay Gal
Nov 14 '18 at 14:26

flex is a tool you'd use specifically to position elements adjacently. <h2> and <p> elements stack vertically by default - you wouldn't need any CSS to achieve that effect.

– Tyler Roper
Nov 14 '18 at 14:26

I'm learning flexblox and I decided to try it on this element b/c the original website used flexbox and the positioning without flexbox is more complicated, ie moving everything to the right and left, using random breaks to make sure all rows are equal. I figured flexbox would be easier for this, and it is with the exception of the heading being messed up

– decopage
Nov 14 '18 at 14:52

Is there a picture/live demo of how you're expecting it to look? By your statement, I get a feeling that what you're expecting and what you're communicating are not matching. And it would help everyone if there's a picture/demo.

– Maaz Syed Adeeb
Nov 14 '18 at 14:56

add a comment |

2 Answers
2

active

oldest

votes

-1

By default flex-direction: row puts elements horizontally, changing it to flex-direction: column will probably fix it by making the element stack vertically.

answered Nov 14 '18 at 14:42

Jose Guerra

543

I tried this but it just stacks everything in a column, whereas I want 3 short rows of text adjacent to one another, not on top of one another.

– decopage
Nov 14 '18 at 14:49

If you want to do that, you need to wrap your h2 and p in a div. You'll have 3 divs with h2 and p in each. Then your original code should work fine. You may need to add margins or max-widths to the divs to add space between them.

– Jose Guerra
Nov 14 '18 at 14:54

Thank you Jose!! That worked :)

– decopage
Nov 14 '18 at 15:02

add a comment |

If for some reason you simply must use flexbox for this, do it like this:

.container {

  display: flex;

  justify-content: space-evenly;

  flex-direction: column;

}



.container h2 {

  font-family: "Work Sans", Arial, sans-serif;

  font-size: 20px;

  font-weight: 300;

  color: hsl(0, 11%, 16%);

  flex: 1 1 100%;

}



.container p {

  margin: 25px 50px 75px 100px;

  flex: 1 1 100%;

}

<div class="container">

  <h2>First visit? Don't be skittish.</h2>

  <p>All new clients can enjoy a free first exam by mentioning this offer. We also provide discounted vaccination and treatment packages for puppies and kittens to start them on the right paw!</p>

  <h2>Boarding, Grooming & Doggie Daycare</h2>

  <p>We offer a full spectrum of boarding, grooming & doggie daycare services. Whether it's a day at the spa, a day of play, or a longer staycation, your pet is in good hands.

  </p>

  <h2>Refill Prescriptions</h2>

  <p>You're busy, so we make refills easy. We also competitively price match all of your pet's medications. Request a refill via our Chat Now feature or give us a call and we'll hop on it.</p>

</div>

However, you can achieve the same thing without flexbox.

paragraphs and headers are block level elements, and they will display in this way by default.

.container h2 {

  font-family: "Work Sans", Arial, sans-serif;

  font-size: 20px;

  font-weight: 300;

  color: hsl(0, 11%, 16%);

}



.container p {

  margin: 25px 50px 75px 100px;

}

<div class="container">

  <h2>First visit? Don't be skittish.</h2>

  <p>All new clients can enjoy a free first exam by mentioning this offer. We also provide discounted vaccination and treatment packages for puppies and kittens to start them on the right paw!</p>

  <h2>Boarding, Grooming & Doggie Daycare</h2>

  <p>We offer a full spectrum of boarding, grooming & doggie daycare services. Whether it's a day at the spa, a day of play, or a longer staycation, your pet is in good hands.

  </p>

  <h2>Refill Prescriptions</h2>

  <p>You're busy, so we make refills easy. We also competitively price match all of your pet's medications. Request a refill via our Chat Now feature or give us a call and we'll hop on it.</p>

</div>

edited Nov 14 '18 at 14:47

answered Nov 14 '18 at 14:40

ksav

5,32421331

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53302440%2fflexbox-problem-with-formatting-headings-on-rows%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

-1

By default flex-direction: row puts elements horizontally, changing it to flex-direction: column will probably fix it by making the element stack vertically.

answered Nov 14 '18 at 14:42

Jose Guerra

543

I tried this but it just stacks everything in a column, whereas I want 3 short rows of text adjacent to one another, not on top of one another.

– decopage
Nov 14 '18 at 14:49

If you want to do that, you need to wrap your h2 and p in a div. You'll have 3 divs with h2 and p in each. Then your original code should work fine. You may need to add margins or max-widths to the divs to add space between them.

– Jose Guerra
Nov 14 '18 at 14:54

Thank you Jose!! That worked :)

– decopage
Nov 14 '18 at 15:02

add a comment |

-1

By default flex-direction: row puts elements horizontally, changing it to flex-direction: column will probably fix it by making the element stack vertically.

answered Nov 14 '18 at 14:42

Jose Guerra

543

I tried this but it just stacks everything in a column, whereas I want 3 short rows of text adjacent to one another, not on top of one another.

– decopage
Nov 14 '18 at 14:49

If you want to do that, you need to wrap your h2 and p in a div. You'll have 3 divs with h2 and p in each. Then your original code should work fine. You may need to add margins or max-widths to the divs to add space between them.

– Jose Guerra
Nov 14 '18 at 14:54

Thank you Jose!! That worked :)

– decopage
Nov 14 '18 at 15:02

add a comment |

-1

By default flex-direction: row puts elements horizontally, changing it to flex-direction: column will probably fix it by making the element stack vertically.

answered Nov 14 '18 at 14:42

Jose Guerra

543

By default flex-direction: row puts elements horizontally, changing it to flex-direction: column will probably fix it by making the element stack vertically.

answered Nov 14 '18 at 14:42

Jose Guerra

543

answered Nov 14 '18 at 14:42

Jose Guerra

543

answered Nov 14 '18 at 14:42

Jose Guerra

543

answered Nov 14 '18 at 14:42

Jose Guerra

543

I tried this but it just stacks everything in a column, whereas I want 3 short rows of text adjacent to one another, not on top of one another.

– decopage
Nov 14 '18 at 14:49

If you want to do that, you need to wrap your h2 and p in a div. You'll have 3 divs with h2 and p in each. Then your original code should work fine. You may need to add margins or max-widths to the divs to add space between them.

– Jose Guerra
Nov 14 '18 at 14:54

Thank you Jose!! That worked :)

– decopage
Nov 14 '18 at 15:02

add a comment |

I tried this but it just stacks everything in a column, whereas I want 3 short rows of text adjacent to one another, not on top of one another.

– decopage
Nov 14 '18 at 14:49

If you want to do that, you need to wrap your h2 and p in a div. You'll have 3 divs with h2 and p in each. Then your original code should work fine. You may need to add margins or max-widths to the divs to add space between them.

– Jose Guerra
Nov 14 '18 at 14:54

Thank you Jose!! That worked :)

– decopage
Nov 14 '18 at 15:02

I tried this but it just stacks everything in a column, whereas I want 3 short rows of text adjacent to one another, not on top of one another.

– decopage
Nov 14 '18 at 14:49

If you want to do that, you need to wrap your h2 and p in a div. You'll have 3 divs with h2 and p in each. Then your original code should work fine. You may need to add margins or max-widths to the divs to add space between them.

– Jose Guerra
Nov 14 '18 at 14:54

Thank you Jose!! That worked :)

– decopage
Nov 14 '18 at 15:02

add a comment |

If for some reason you simply must use flexbox for this, do it like this:

.container {

  display: flex;

  justify-content: space-evenly;

  flex-direction: column;

}



.container h2 {

  font-family: "Work Sans", Arial, sans-serif;

  font-size: 20px;

  font-weight: 300;

  color: hsl(0, 11%, 16%);

  flex: 1 1 100%;

}



.container p {

  margin: 25px 50px 75px 100px;

  flex: 1 1 100%;

}

<div class="container">

  <h2>First visit? Don't be skittish.</h2>

  <p>All new clients can enjoy a free first exam by mentioning this offer. We also provide discounted vaccination and treatment packages for puppies and kittens to start them on the right paw!</p>

  <h2>Boarding, Grooming & Doggie Daycare</h2>

  <p>We offer a full spectrum of boarding, grooming & doggie daycare services. Whether it's a day at the spa, a day of play, or a longer staycation, your pet is in good hands.

  </p>

  <h2>Refill Prescriptions</h2>

  <p>You're busy, so we make refills easy. We also competitively price match all of your pet's medications. Request a refill via our Chat Now feature or give us a call and we'll hop on it.</p>

</div>

However, you can achieve the same thing without flexbox.

paragraphs and headers are block level elements, and they will display in this way by default.

.container h2 {

  font-family: "Work Sans", Arial, sans-serif;

  font-size: 20px;

  font-weight: 300;

  color: hsl(0, 11%, 16%);

}



.container p {

  margin: 25px 50px 75px 100px;

}

<div class="container">

  <h2>First visit? Don't be skittish.</h2>

  <p>All new clients can enjoy a free first exam by mentioning this offer. We also provide discounted vaccination and treatment packages for puppies and kittens to start them on the right paw!</p>

  <h2>Boarding, Grooming & Doggie Daycare</h2>

  <p>We offer a full spectrum of boarding, grooming & doggie daycare services. Whether it's a day at the spa, a day of play, or a longer staycation, your pet is in good hands.

  </p>

  <h2>Refill Prescriptions</h2>

  <p>You're busy, so we make refills easy. We also competitively price match all of your pet's medications. Request a refill via our Chat Now feature or give us a call and we'll hop on it.</p>

</div>

edited Nov 14 '18 at 14:47

answered Nov 14 '18 at 14:40

ksav

5,32421331

add a comment |

If for some reason you simply must use flexbox for this, do it like this:

.container {

  display: flex;

  justify-content: space-evenly;

  flex-direction: column;

}



.container h2 {

  font-family: "Work Sans", Arial, sans-serif;

  font-size: 20px;

  font-weight: 300;

  color: hsl(0, 11%, 16%);

  flex: 1 1 100%;

}



.container p {

  margin: 25px 50px 75px 100px;

  flex: 1 1 100%;

}

<div class="container">

  <h2>First visit? Don't be skittish.</h2>

  <p>All new clients can enjoy a free first exam by mentioning this offer. We also provide discounted vaccination and treatment packages for puppies and kittens to start them on the right paw!</p>

  <h2>Boarding, Grooming & Doggie Daycare</h2>

  <p>We offer a full spectrum of boarding, grooming & doggie daycare services. Whether it's a day at the spa, a day of play, or a longer staycation, your pet is in good hands.

  </p>

  <h2>Refill Prescriptions</h2>

  <p>You're busy, so we make refills easy. We also competitively price match all of your pet's medications. Request a refill via our Chat Now feature or give us a call and we'll hop on it.</p>

</div>

However, you can achieve the same thing without flexbox.

paragraphs and headers are block level elements, and they will display in this way by default.

.container h2 {

  font-family: "Work Sans", Arial, sans-serif;

  font-size: 20px;

  font-weight: 300;

  color: hsl(0, 11%, 16%);

}



.container p {

  margin: 25px 50px 75px 100px;

}

<div class="container">

  <h2>First visit? Don't be skittish.</h2>

  <p>All new clients can enjoy a free first exam by mentioning this offer. We also provide discounted vaccination and treatment packages for puppies and kittens to start them on the right paw!</p>

  <h2>Boarding, Grooming & Doggie Daycare</h2>

  <p>We offer a full spectrum of boarding, grooming & doggie daycare services. Whether it's a day at the spa, a day of play, or a longer staycation, your pet is in good hands.

  </p>

  <h2>Refill Prescriptions</h2>

  <p>You're busy, so we make refills easy. We also competitively price match all of your pet's medications. Request a refill via our Chat Now feature or give us a call and we'll hop on it.</p>

</div>

edited Nov 14 '18 at 14:47

answered Nov 14 '18 at 14:40

ksav

5,32421331

add a comment |

If for some reason you simply must use flexbox for this, do it like this:

.container {

  display: flex;

  justify-content: space-evenly;

  flex-direction: column;

}



.container h2 {

  font-family: "Work Sans", Arial, sans-serif;

  font-size: 20px;

  font-weight: 300;

  color: hsl(0, 11%, 16%);

  flex: 1 1 100%;

}



.container p {

  margin: 25px 50px 75px 100px;

  flex: 1 1 100%;

}

<div class="container">

  <h2>First visit? Don't be skittish.</h2>

  <p>All new clients can enjoy a free first exam by mentioning this offer. We also provide discounted vaccination and treatment packages for puppies and kittens to start them on the right paw!</p>

  <h2>Boarding, Grooming & Doggie Daycare</h2>

  <p>We offer a full spectrum of boarding, grooming & doggie daycare services. Whether it's a day at the spa, a day of play, or a longer staycation, your pet is in good hands.

  </p>

  <h2>Refill Prescriptions</h2>

  <p>You're busy, so we make refills easy. We also competitively price match all of your pet's medications. Request a refill via our Chat Now feature or give us a call and we'll hop on it.</p>

</div>

However, you can achieve the same thing without flexbox.

paragraphs and headers are block level elements, and they will display in this way by default.

.container h2 {

  font-family: "Work Sans", Arial, sans-serif;

  font-size: 20px;

  font-weight: 300;

  color: hsl(0, 11%, 16%);

}



.container p {

  margin: 25px 50px 75px 100px;

}

<div class="container">

  <h2>First visit? Don't be skittish.</h2>

  <p>All new clients can enjoy a free first exam by mentioning this offer. We also provide discounted vaccination and treatment packages for puppies and kittens to start them on the right paw!</p>

  <h2>Boarding, Grooming & Doggie Daycare</h2>

  <p>We offer a full spectrum of boarding, grooming & doggie daycare services. Whether it's a day at the spa, a day of play, or a longer staycation, your pet is in good hands.

  </p>

  <h2>Refill Prescriptions</h2>

  <p>You're busy, so we make refills easy. We also competitively price match all of your pet's medications. Request a refill via our Chat Now feature or give us a call and we'll hop on it.</p>

</div>

edited Nov 14 '18 at 14:47

answered Nov 14 '18 at 14:40

ksav

5,32421331

If for some reason you simply must use flexbox for this, do it like this:

.container {

  display: flex;

  justify-content: space-evenly;

  flex-direction: column;

}



.container h2 {

  font-family: "Work Sans", Arial, sans-serif;

  font-size: 20px;

  font-weight: 300;

  color: hsl(0, 11%, 16%);

  flex: 1 1 100%;

}



.container p {

  margin: 25px 50px 75px 100px;

  flex: 1 1 100%;

}

<div class="container">

  <h2>First visit? Don't be skittish.</h2>

  <p>All new clients can enjoy a free first exam by mentioning this offer. We also provide discounted vaccination and treatment packages for puppies and kittens to start them on the right paw!</p>

  <h2>Boarding, Grooming & Doggie Daycare</h2>

  <p>We offer a full spectrum of boarding, grooming & doggie daycare services. Whether it's a day at the spa, a day of play, or a longer staycation, your pet is in good hands.

  </p>

  <h2>Refill Prescriptions</h2>

  <p>You're busy, so we make refills easy. We also competitively price match all of your pet's medications. Request a refill via our Chat Now feature or give us a call and we'll hop on it.</p>

</div>

However, you can achieve the same thing without flexbox.

paragraphs and headers are block level elements, and they will display in this way by default.

.container h2 {

  font-family: "Work Sans", Arial, sans-serif;

  font-size: 20px;

  font-weight: 300;

  color: hsl(0, 11%, 16%);

}



.container p {

  margin: 25px 50px 75px 100px;

}

<div class="container">

  <h2>First visit? Don't be skittish.</h2>

  <p>All new clients can enjoy a free first exam by mentioning this offer. We also provide discounted vaccination and treatment packages for puppies and kittens to start them on the right paw!</p>

  <h2>Boarding, Grooming & Doggie Daycare</h2>

  <p>We offer a full spectrum of boarding, grooming & doggie daycare services. Whether it's a day at the spa, a day of play, or a longer staycation, your pet is in good hands.

  </p>

  <h2>Refill Prescriptions</h2>

  <p>You're busy, so we make refills easy. We also competitively price match all of your pet's medications. Request a refill via our Chat Now feature or give us a call and we'll hop on it.</p>

</div>

.container {

  display: flex;

  justify-content: space-evenly;

  flex-direction: column;

}



.container h2 {

  font-family: "Work Sans", Arial, sans-serif;

  font-size: 20px;

  font-weight: 300;

  color: hsl(0, 11%, 16%);

  flex: 1 1 100%;

}



.container p {

  margin: 25px 50px 75px 100px;

  flex: 1 1 100%;

}

<div class="container">

  <h2>First visit? Don't be skittish.</h2>

  <p>All new clients can enjoy a free first exam by mentioning this offer. We also provide discounted vaccination and treatment packages for puppies and kittens to start them on the right paw!</p>

  <h2>Boarding, Grooming & Doggie Daycare</h2>

  <p>We offer a full spectrum of boarding, grooming & doggie daycare services. Whether it's a day at the spa, a day of play, or a longer staycation, your pet is in good hands.

  </p>

  <h2>Refill Prescriptions</h2>

  <p>You're busy, so we make refills easy. We also competitively price match all of your pet's medications. Request a refill via our Chat Now feature or give us a call and we'll hop on it.</p>

</div>

.container {

  display: flex;

  justify-content: space-evenly;

  flex-direction: column;

}



.container h2 {

  font-family: "Work Sans", Arial, sans-serif;

  font-size: 20px;

  font-weight: 300;

  color: hsl(0, 11%, 16%);

  flex: 1 1 100%;

}



.container p {

  margin: 25px 50px 75px 100px;

  flex: 1 1 100%;

}

<div class="container">

  <h2>First visit? Don't be skittish.</h2>

  <p>All new clients can enjoy a free first exam by mentioning this offer. We also provide discounted vaccination and treatment packages for puppies and kittens to start them on the right paw!</p>

  <h2>Boarding, Grooming & Doggie Daycare</h2>

  <p>We offer a full spectrum of boarding, grooming & doggie daycare services. Whether it's a day at the spa, a day of play, or a longer staycation, your pet is in good hands.

  </p>

  <h2>Refill Prescriptions</h2>

  <p>You're busy, so we make refills easy. We also competitively price match all of your pet's medications. Request a refill via our Chat Now feature or give us a call and we'll hop on it.</p>

</div>

.container h2 {

  font-family: "Work Sans", Arial, sans-serif;

  font-size: 20px;

  font-weight: 300;

  color: hsl(0, 11%, 16%);

}



.container p {

  margin: 25px 50px 75px 100px;

}

<div class="container">

  <h2>First visit? Don't be skittish.</h2>

  <p>All new clients can enjoy a free first exam by mentioning this offer. We also provide discounted vaccination and treatment packages for puppies and kittens to start them on the right paw!</p>

  <h2>Boarding, Grooming & Doggie Daycare</h2>

  <p>We offer a full spectrum of boarding, grooming & doggie daycare services. Whether it's a day at the spa, a day of play, or a longer staycation, your pet is in good hands.

  </p>

  <h2>Refill Prescriptions</h2>

  <p>You're busy, so we make refills easy. We also competitively price match all of your pet's medications. Request a refill via our Chat Now feature or give us a call and we'll hop on it.</p>

</div>

.container h2 {

  font-family: "Work Sans", Arial, sans-serif;

  font-size: 20px;

  font-weight: 300;

  color: hsl(0, 11%, 16%);

}



.container p {

  margin: 25px 50px 75px 100px;

}

<div class="container">

  <h2>First visit? Don't be skittish.</h2>

  <p>All new clients can enjoy a free first exam by mentioning this offer. We also provide discounted vaccination and treatment packages for puppies and kittens to start them on the right paw!</p>

  <h2>Boarding, Grooming & Doggie Daycare</h2>

  <p>We offer a full spectrum of boarding, grooming & doggie daycare services. Whether it's a day at the spa, a day of play, or a longer staycation, your pet is in good hands.

  </p>

  <h2>Refill Prescriptions</h2>

  <p>You're busy, so we make refills easy. We also competitively price match all of your pet's medications. Request a refill via our Chat Now feature or give us a call and we'll hop on it.</p>

</div>

edited Nov 14 '18 at 14:47

answered Nov 14 '18 at 14:40

ksav

5,32421331

edited Nov 14 '18 at 14:47

answered Nov 14 '18 at 14:40

ksav

5,32421331

answered Nov 14 '18 at 14:40

ksav

5,32421331

answered Nov 14 '18 at 14:40

ksav

5,32421331

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Vfrdtyky