How can I get one flex element to take the width of another?

user_15681832 0
Viewed 214

Thank you again for your help with review my code and give some advice that I can use to move forward.

I am having trouble figuring out how to expand the services section below to inherit the hero section width. The image below display how the website looks right but the next image will show what the concept will look like.

Example of the website

Design Concept

CSS CODE

.navbar {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  border-left: 1px solid #181024;
  border-right: 1px solid #181024;
  border-bottom: 1px solid #181024;
  background-color: #FAFAFA;
}

.nav {
  display: flex;
}

.logo {
  padding: 2em;
  font-size: 1.2rem;
}

.site-nav-list {
  padding: 2em;
}

.site-nav-list li {
  padding-left: 65px;
}

.site-nav-list li a {
  font-size: 1em;
}

.button {
  width: 300px;
  height: 100%;
  background-color: #181024;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: bold;
  color: white;
  font-size: 0.9rem;
  padding: 2em;
}

.button a {
  color: #FFFFFF;
  letter-spacing: 1%;
  text-decoration: none;
}

.site-title {
  position: fixed;
  width: 100%;
}

.site-nav-list {
  display: flex;
}

li {
  list-style: none;
  font-size: 1.2rem;
}

a {
  text-decoration: none;
}

section {
  display: flex;
}

h1 {
  font-size: 5.5vw;
}

button {
  border: none;
  cursor: pointer;
}

.hero_services {
  display: flex;
}

.hero_lists {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center
}

.hero_lists>.hero_content {
  flex: 1 1 21%;
}

.hero_content {
  padding: 1.4em;
  font-size: 1vw;
  height: 20vh;
  border: 1px solid #181024;
  background-color: #FAFAFA;
}

.hero_top-right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-left: 1px solid #181024;
  background-color: #FAFAFA;
  padding: 5.16em;
}

.hero_top-left {
  background-color: #E7DDF8;
  border-left: 1px solid #181024;
  height: 90vh;
}

.button_info {
  margin-top: 3em;
  text-transform: uppercase;
  text-decoration: underline;
  font-size: 1.3em;
}

.button_info button {
  background-color: #181024;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 0.8em;
  color: white;
  padding: 1.3em 3em;
  margin-right: 20px;
}

.hero_email {
  background-color: #E7DDF8;
  align-items: flex-end;
  width: 100%;
}

input {
  padding: 24px;
}
<div class="hero">
  <section>
    <div class="hero_top-right">
      <h1>Bring your minority B2B business ideas to life with our services.</h1>

      <div class="button_info">
        <a href="#">
          <button type="button" name="button">
                    Speak With A Perceptor
                </button>
        </a>

        <a href="#">
                Accelerate Program
              </a>
      </div>
    </div>

    <div class="hero_top-left">
      <img src="{{ site.data.teams.team.ImgWorkHC }}" alt="Hunt For Careers Perview">
    </div>
  </section>
</div>

<div class="hero_services">
  <div class="hero_lists">
    <div class="hero_content">
      <h3>test words</h3>
      <p>test words</p>
      <a href="">
        <p>Learn More</p>
      </a>
    </div>

    <div class="hero_content">
      <h3>test words</h3>
      <p>test words</p>
      <a href="">
        <p>Learn More</p>
      </a>
    </div>

    <div class="hero_content">
      <h3>test words</h3>
      <p>test words</p>
      <a href="">
        <p>Learn More</p>
      </a>
    </div>

    <div class="hero_content">
      <h3>test words</h3>
      <p>test words</p>
      <a href="">
        <p>Learn More</p>
      </a>
    </div>

    <div class="hero_content">
      <h3>test words</h3>
      <p>test words</p>
      <a href="">
        <p>Learn More</p>
      </a>
    </div>

    <div class="hero_content">
      <h3>test words</h3>
      <p>test words</p>
      <a href="">
        <p>Learn More</p>
      </a>
    </div>
  </div>
  
  <div class="hero_email">
    <form class="" action="" method="">
      <input type="email" name="email" placeholder="Email Address">
      <button type="button" name="button">Send</button>
    </form>
  </div>
</div>

flexbox css html
1 Answers

Here is one example of how you could structure your HTML for using flexbox.

Note I have stuck with using flex rows as the default, but as @isherwood has mentioned in his comment above, you can also use flex columns or a combination of both. Either way will work.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  color: #222;
}

.container {
  height: 100vh;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 10%;
  padding: 0 50px;
  border: 1px solid black;
}

.nav__list {
  display: flex;
  gap: 50px;
}

.nav__item {
  list-style: none;
}

a:link {
  text-decoration: none;
  color: inherit;
}

.flex__container-main {
  display: flex;
  height: 90%;
  border: 1px solid black;
}

.flex__container-left {
  width: 70%;
  height: 50%;
}

.flex__container-right {
  width: 30%;
  height: 100%;
}

.top__container {
  height: 100%;
  border: 1px solid black;
}

.bottom__container {
  height: 100%;
  border: 1px solid black;
}

.top__aside {
  border: 1px solid black;
  height: 90%;
}

.bottom__aside {
  border: 1px solid black;
  height: 10%;
}

.top__row {
  display: flex;
  height: 50%;
}

.bottom__row {
  display: flex;
  height: 50%;
}

.card {
  border: 1px solid black;
  width: 33.33%;
  /* 
  4 cards per row would mean using
  width: 25%;
  */
}
 <body>
    <div class="container">
      <nav class="nav">
        <!-- <img src="" alt=""> -->
        <span>LOGO HERE</span>
        <ul class="nav__list">
          <li class="nav__item"><a href="#">Link 1</a></li>
          <li class="nav__item"><a href="#">Link 2</a></li>
          <li class="nav__item"><a href="#">Link 3</a></li>
          <li class="nav__item"><a href="#">Link 4</a></li>
        </ul>
      </nav>
      <div class="flex__container-main">
        <div class="flex__container-left">
          <div class="top__container">
            <h1>TOP LEFT</h1>
          </div>
          <div class="bottom__container">
            <div class="top__row">
              <div class="card">
                <h2>CARD</h2>
              </div>
              <div class="card">
                <h2>CARD</h2>
              </div>
              <div class="card">
                <h2>CARD</h2>
              </div>
            </div>
            <div class="bottom__row">
              <div class="card">
                <h2>CARD</h2>
              </div>
              <div class="card">
                <h2>CARD</h2>
              </div>
              <div class="card">
                <h2>CARD</h2>
              </div>
            </div>
          </div>
        </div>
        <div class="flex__container-right">
          <div class="top__aside">
            <h3>TOP ASIDE</h3>
          </div>
          <div class="bottom__aside">
            <h3>BOTTOM ASIDE</h3>
          </div>
        </div>
      </div>
    </div>
  </body>

user_145463810
Related