How to manually overrule flex property for specified element-CodePudding

I have a section in my page which has a h1 and 3 div. I set the display property of the section to flex; and so the h1 as well as the div aligned themselves one after the other.

I want the h1 to be in the top center ignoring the display property and then the 3 div to be right below it. Something like this-

Also, please tell me of a more efficient or conventional way to do so.

Here's my HTML and CSS code:

/* Why choose Section */

#Why_choose{
  height: 800px;
  background: #12121;
  display: flex
}

#Why_choose h1{
  color: white;
}

#Why_choose h2{
  color: #e50914;
}

#Why_choose p{
  color: white;
}

#Why_choose img{
  width: 50%;
}

<section id="Why_choose">
    <h1>Why choose Snap Smile Veneers</h1>
    <div >
      <img src="images/random_img.jpg">
      <h2>we invisible</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing
         elit, sed do eiusmod tempor incididunt ut labore et
         dolore magna aliqua. Ut enim ad minim veniam</p>
    </div>
    <div >
      <img src="images/random_img.jpg">
      <h2>we comfortable</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing
         elit, sed do eiusmod tempor incididunt ut labore et
         dolore magna aliqua. Ut enim ad minim veniam</p>
    </div>
    <div >
      <img src="images/random_img.jpg">
      <h2>we work from home</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing
         elit, sed do eiusmod tempor incididunt ut labore et
         dolore magna aliqua. Ut enim ad minim veniam</p>
    </div>
  </section>

CodePudding user response：

I would recommend using flex-wrap: wrap in oder to make the rest of the items begin in a new line like that:

#my-flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

#bottom-flex-items {
  display: flex;
}

<section id="my-flex">
  <h1>Top center h1 Title</h1>
  <div id="bottom-flex-items">
    <div>
      <h2>First One</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
    </div>
    <div>
      <h2>Second One</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
    </div>
    <div>
      <h2>Third One</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
    </div>
  </div>
</section>

CodePudding user response：

in here one approach is that,you can wrap comfortable,workHome and invisible section with new div.in here I wrapped with section two div.give Why_choose section display flex and flex direction cloumn.giv section two to display flex.in order to center the text inside #Why_choose h1 give css propetry text-align:center to it.working code is below,

 <section id="Why_choose">
      <h1>Why choose Snap Smile Veneers</h1>
      <div >
        <div >
          <img src="images/random_img.jpg" />
          <h2>we invisible</h2>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam
          </p>
        </div>

        <div >
          <img src="images/random_img.jpg" />
          <h2>we comfortable</h2>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam
          </p>
        </div>
        <div >
          <img src="images/random_img.jpg" />
          <h2>we work from home</h2>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam
          </p>
        </div>
      </div>
    </section> 




#Why_choose {
  height: 800px;
  background: #12121;
  display: flex;

  flex-direction: column;
}
.section-two {
  display: flex;
}
#Why_choose h1 {
  text-align: center;
  color: white;
}

#Why_choose h2 {
  color: #e50914;
}

#Why_choose p {
  color: white;
}

#Why_choose img {
  width: 50%;
}

CodePudding user response：

You can try using display: grid

* { box-sizing: border-box } body { font: 16px sans-serif; margin: 0 } h1 { margin: 0 }

/* Why choose Section */

#Why_choose {
  background-color: #121212;
  color: white;

  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto 1fr;
  gap: 1rem;
  padding: 1rem;
}

#Why_choose h1 { grid-column: 1 / -1 }
#Why_choose h2 { color: #e50914 }
#Why_choose img{ width: 50% }

<section id="Why_choose">
  <h1>Why choose Snap Smile Veneers</h1>
  <div >
    <img src="https://picsum.photos/id/1/200/300">
    <h2>we invisible</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
  </div>
  <div >
    <img src="https://picsum.photos/id/2/200/300">
    <h2>we comfortable</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
  </div>
  <div >
    <img src="https://picsum.photos/id/3/200/300">
    <h2>we work from home</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
  </div>
</section>