Flex Containers

Hello.

I am currently working on a project and I would like to know something.

The project I am currently working on is a survey form. I have completed the survey form, but I am having a slight issue in regards to box-sizing. Anyway, this is not my question.

I am rewriting the code and after learning about semantics and structuring I was wondering if their was some other way of making a flex container without using div for syntax. I would like to include sections in the code to help search engines find the survey more easily (I know I know in order to pass I don’t need this step, but for the sake of actually learning how to write code properly I figure I may as well write this the right way. This is so I may be able to present this to future employers).

I don’t want to use section with an id of flex container as this is not the kind of structure I was looking for. Also I don’t really think the article syntax is going to cut it as well. Anyone got any other ideas where to put the flex container (I’ll be assigning flex container to an id)?

Without knowing your HTML structure there is really no way to know what you should be using as the flex containers.

But there are no rules for which type of element can be a flex container. There is nothing wrong or un-semantic about making section or article elements flex containers. But if you just need a generic layout container then use a div. They can be nested inside the semantic elements.

As an aside, don’t use ids, use classes. You can even make them flexbox utility classes you can reuse as needed which can be pretty handy for layout-specific CSS.

.flex {
  display: flex;
}

.align-center {
  align-items: center;
}

.justify-center {
  justify-content: center;
}
<section class="flex align-center justify-center">
</section>
1 Like

Thank you. I never thought to write it out that way.

Utility classes are super useful. They let you compose the styles and give you a lot of reusabilities. If you look at the Tailwind framework you can see it taken to the extreme where there are no components, just classes you compose/combine into components. Bootstrap on the other hand is more about components (like a button, navbar, etc.) with some utility classes added.

You will find people leaning either way and you will figure out what type of balance you like (utility classes vs components). Personally, I think for pure HTML/CSS pages, using only utility classes with no components at all can be a bit too much. You can end up with a lot of classes applied to a single element and it can make the HTML pretty noisy.

But for component-based JS frameworks, it evens out as you have components that can be reused. So you might have a Button component but its CSS is written using utility classes. Which can make it the best of both worlds, reusable components with the CSS written using utility classes.

Thank you for helping me to understand their use and what ways I can use them.

Here was my issue with utility classes. Just looking at your example I realized that they could make the html noisy. I thought about it and I came to this conclusion. Say someone else wanted to edit the style of the code. That person would have to look up where all the classes are in the html code itself as to opposed to finding the classes in the css code. I think my personal style is to try to keep it simple and pure so perhaps I am becoming a purest as they say in a way.

I’m really just messing around with structure and understanding view ports and flex containers seeing how they interact with one another.

I’ll pass you along the link to my codepen.

Here is a link to my survey project. I figured out how to make sure all my borders where lined up with box-sizing: border-box; so I saved you to trouble there.

Basically what I am trying to figure out is this…

When the view port is small say anywhere between 300 to 400 pixels, I would like for a few things to happen.

  1. The survey title remains the same just shrinks to fit the view port with the text remaining in the center.

  2. The description will shrink because of the width being smaller and the text will wrap under itself with the text staying centered.

  3. I would like for the elements to line up in a column. Basically the inputs on the left will stay on top. The gender radio inputs will wrap underneath the first inputs group, and lastly the occupation drop down will fall underneath both input groups.

  4. In regards to the interest section I was thinking instead of having 1 long column perhaps I could get the two last columns to fall under the first 2 columns.

  5. For the footer I would simply have the button fall under the text area.

So that is it other than styling some inputs and fixing the tab through feature I am almost complete with this project.

I guess what I really need is a push in the right direction. Where should I be placing the display: flex;?

How exactly should I go about steps 1 through 5 so this survey looks good on smaller view ports? I am trying to understand where I should be using @media queries in this instance. I’ll have to admit I am a little stumped at this point and any help would be appreciated.

Utility classes if named correctly are much more expressive than component classes. They tell you exactly what styles are applied and you do not even need to read the CSS to know what they do.

Here is an abbreviated example from the Tailwind docs.

<div class="chat-notification">
</div>

chat-notification is a black box you have absolutely no way of knowing what styles are being applied.

<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-lg flex items-center space-x-4">
</div>

The above are the same styles applied as utility classes. It reads as follows (slightly simplified):

padding, max-width, margin-auto, background white, border-radius, box-shadow, display flex, align-items center, space between child elements.

You know what styles are being applied just by reading the classes in the HTML and you can edit the styles without even touching a CSS file.

Now, you do have to know what the classes do and it isn’t always super obvious (unless you write your own utility classes). But after you have learned the framework a bit better most styles are fairly self-explanatory. It’s mainly the specific numbers behind the notation that can be hard to know (e.g. what is sm or xl, sure it’s small and extra-large but what does that actually translate into number-wise).

Editing styles you didn’t write is actually safer with utility classes as you have to worry much less about the cascade, inherited styles, specificity, or otherwise breaking stuff when editing some gigantic stylesheet with a bunch of styles you didn’t write.

This is why CSS files balloon in size over time, people are too afraid to remove or edit styles they didn’t write because for a large site it can be extremely difficult to know how and where all the styles are being applied and how they affect each other.


You have to copy and paste your code here, we can’t see it using the link you posted.

Use the “preformatted text” tool in the editor (</>) to add backticks around the code to get the proper formatting.

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheets" type="text/css" href="styles.css"
</head>

<!-- ======================
       ~Global~                                   
====================== -->

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300&family=Work+Sans:wght@300&display=swap" rel="stylesheet">

<!-- ======================
       ~LAYOUT~                                   
====================== -->

<body>
 <main>
  <form id="survey-form">

    <div class="flex-container">

      <div class="container1">
        <h1 id="title" class="title">Survey</h1>
      </div>

      <div class="container2">
        <p id="description">Lets <span>ignite</span> your curiosity, <span>peak</span> your interest and <span>explore</span> exciting new avenues.</p>
        <hr>
      </div>

      <div class="container3">

        <h2 class="profile">Profile</h2>

        <div class="form-group">

          <div class="info">
            <label for="number" id="number-label">Age </label><br />
            <input type="number" name="age" id="number" min="0" max="99" class="form-control" placeholder="0" />
            <br />
            <label for="name" id="name-label">Name </label><br />
            <input type="text" name="name" id="name" class="form-control" placeholder="John Doe" required /><br />
            <label for="email" id="email-label">Email </label><br />
            <input type="email" name="email" id="email" class="form-control" placeholder="johndoe@email.com" required /><br />
            <label for="birthplace" id="nation-label">Birthplace</label><br>
            <input type="country" name="birthplace" id="birthplace" class="form-control" placeholder="Place of birth">
          </div>

          <div class="gender">
            <h4>Gender</h4>
            <input type="radio" id="male" name="gender" value="male" class="radio">
            <label for="male" class="gender-label">Male</label>
            <br>
            <input type="radio" id="female" name="gender" value="female" class="radio">
            <label for="female" class="gender-label">Female</label>
            <br>
            <input type="radio" id="other" name="gender" value="other" class="radio">
            <label for="other" class="gender-label">Other</label>
            <br>
          </div>

          <div class="occupation">
            <p>Select from the options given below</p>
            <select id="dropdown" name="occupation" class="form-control" required>
              <option disabled selected value>Current occupation</option>
              <option value="full-time">Full Time</option>
              <option value="part-time">Part Time</option>
              <option value="student">Student</option>
              <option value="prefernottosay">Prefer not to say</option>
              <option value="other">Other</option>
            </select>
          </div>

        </div>

      </div>

      <div class="container4">
        <p>Unsure of your interests? <span>No problem!</span> Our list will guide you through the process.</p>
      </div>

      <div class="container5">
        <div class="pastime">
          <div class="column1">
            <input type="checkbox" id="animals" name="interest" value="animals" class="interest-input">
            <label for="animals" class="interest-label">Animals</label>
            <br>
            <input type="checkbox" id="anime" name="interest" value="anime" class="interest-input">
            <label for="anime" class="interest-label">Anime</label>
            <br>
            <input type="checkbox" id="arts" name="interest" value="arts" class="interest-input">
            <label for="arts" class="interest-label">Arts</label>
            <br>
            <input type="checkbox" id="crafts" name="interest" value="crafts" class="interest-input">
            <label for="crafts" class="interest-label">Crafts</label>
            <br>
            <input type="checkbox" id="decor" name="interest" value="decor" class="interest-input">
            <label for="decor" class="interest-label">Decor</label>
            <br>
            <input type="checkbox" id="design" name="interest" value="design" class="interest-input">
            <label for="design" class="interest-label">Design</label>
            <br>
            <input type="checkbox" id="drawing" name="interest" value="drawing" class="interest-input">
            <label for="drawing" class="interest-label">Drawing</label>
            <br>
            <input type="checkbox" id="education" name="interest" value="education" class="interest-input">
            <label for="education" class="interest-label">Education</label>
            <br>
            <input type="checkbox" id="exercise" name="interest" value="exercise" class="interest-input">
            <label for="exercise" class="interest-label">Exercise</label>
            <br>
            <input type="checkbox" id="family" name="interest" value="family" class="interest-input">
            <label for="family" class="interest-label">Family</label>
            <br>
          </div>
          <div class="column2">
            <input type="checkbox" id="fashion" name="interest" value="fashion" class="interest-input">
            <label for="fashion" class="interest-label">Fashion</label>
            <br>
            <input type="checkbox" id="financials" name="interest" value="financials" class="interest-input">
            <label for="financials" class="interest-label">Financials</label>
            <br>
            <input type="checkbox" id="flying" name="interest" value="flying" class="interest-input">
            <label for="flying" class="interest-label">Flying</label>
            <br>
            <input type="checkbox" id="food" name="interest" value="food" class="interest-input">
            <label for="food" class="interest-label">Food</label>
            <br>
            <input type="checkbox" id="friends" name="interest" value="friends" class="interest-input">
            <label for="friends" class="interest-label">Friends</label>
            <br>
            <input type="checkbox" id="games" name="interest" value="games" class="interest-input">
            <label for="games" class="interest-label">Games</label>
            <br>
            <input type="checkbox" id="gardening" name="interest" value="gardening" class="interest-input">
            <label for="gardening" class="interest-label">Gardening</label>
            <br>
            <input type="checkbox" id="healing" name="interest" value="healing" class="interest-input">
            <label for="healing" class="interest-label">Healing</label>
            <br>
            <input type="checkbox" id="hiking" name="interest" value="hiking" class="interest-input">
            <label for="hiking" class="interest-label">Hiking</label>
            <br>
            <input type="checkbox" id="history" name="interest" value="history" class="interest-input">
            <label for="history" class="interest-label">History</label>
            <br>
          </div>
          <div class="column3">
            <input type="checkbox" id="languages" name="interest" value="languages" class="interest-input">
            <label for="languages" class="interest-label">Languages</label>
            <br>
            <input type="checkbox" id="love" name="interest" value="love" class="interest-input">
            <label for="love" class="interest-label">Love</label>
            <br>
            <input type="checkbox" id="movies" name="interest" value="movies" class="interest-input">
            <label for="movies" class="interest-label">Movies</label>
            <br>
            <input type="checkbox" id="music" name="interest" value="music" class="interest-input">
            <label for="music" class="interest-label">Music</label>
            <br>
            <input type="checkbox" id="painting" name="interest" value="painting" class="interest-input">
            <label for="painting" class="interest-label">painting</label>
            <br>
            <input type="checkbox" id="parachuting" name="interest" value="parachuting" class="interest-input">
            <label for="parachuting" class="interest-label">Parachuting</label>
            <br>
            <input type="checkbox" id="politics" name="interest" value="politics" class="interest-input">
            <label for="politics" class="interest-label">Politics</label>
            <br>
            <input type="checkbox" id="racing" name="interest" value="racing" class="interest-input">
            <label for="racing" class="interest-label">Racing</label>
            <br>
            <input type="checkbox" id="reading" name="interest" value="reading" class="interest-input">
            <label for="reading" class="interest-label">Reading</label>
            <br>
            <input type="checkbox" id="religion" name="interest" value="religion" class="interest-input">
            <label for="religion" class="interest-label">Religion</label>
            <br>
          </div>
          <div class="column4">
            <input type="checkbox" id="research" name="interest" value="research" class="interest-input">
            <label for="research" class="interest-label">Research</label>
            <br>
            <input type="checkbox" id="rockclimbing" name="interest" value="rockclimbing" class="interest-input">
            <label for="rockclimbing" class="interest-label">Rock Climbing</label>
            <br>
            <input type="checkbox" id="Sailing" name="interest" value="sailing" class="interest-input">
            <label for="sailing" class="interest-label">Sailing</label>
            <br>
            <input type="checkbox" id="shopping" name="interest" value="shopping" class="interest-input">
            <label for="shopping" class="interest-label">Shopping</label>
            <br>
            <input type="checkbox" id="socialmedia" name="interest" value="socialmedia" class="interest-input">
            <label for="socialmedia" class="interest-label">Social Media</label>
            <br>
            <input type="checkbox" id="sports" name="interest" value="sports" class="interest-input">
            <label for="sports" class="interest-label">Sports</label>
            <br>
            <input type="checkbox" id="technology" name="interest" value="technology" class="interest-input">
            <label for="technology" class="interest-label">Technology</label>
            <br>
            <input type="checkbox" id="thebeach" name="interest" value="thebeach" class="interest-input">
            <label for="thebeach" class="interest-label">The Beach</label>
            <br>
            <input type="checkbox" id="travel" name="interest" value="travel" class="interest-input">
            <label for="travel" class="interest-label">Travel</label>
            <br>
            <input type="checkbox" id="tvshows" name="interest" value="tvshows" class="interest-input">
            <label for="tvshows" class="interest-label">TV Shows</label>
            <br>
          </div>
        </div>
      </div>

      <div class="container6">

        <textarea placeholder="Leave a comment..."></textarea>

        <button type="submit" id="submit" class="button"><strong>Submit</strong>
          </buttom>
      </div>

    </div>

  </form>
 </main>
</body>

that is the html

/* ----------------------
       ~Global~                                   
---------------------- */

:root {
  
  --primary-color: rgb(18, 49, 77, 0.7);
  
  --secondary-color: rgb(181, 108, 0);
  
  --third-color: rgb(9, 105, 93, 0.7);
  
  --fourth-color: rgb(46, 45, 44);
  
}

span {
  color: var(--secondary-color);
  font-weight: bold;
}

.container2,
.container3,
.container4,
.container6 {
  border-left: 1px solid grey;
  border-right: 1px solid grey;
  border-color: var(--secondary-color);
}

input:focus {
  border: 1px solid var(--secondary-color)
  ;
}

.radio:focus {
  border: 1px solid var(--secondary-color);
}

select:focus {
  border: 1px solid var(--secondary-color);
}

body {
  max-width: 1200px;
  margin: auto;
}

main {
  max-width: 700px;
  margin: auto;
  float: none;
  padding: 10px;
  box-sizing: border-box;
}

* {
  box-sizing: border-box;
}

/* ----------------------
       ~Layout~                                   
---------------------- */

.flex-container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  }

/* ----------------------
       ~Header~                                   
---------------------- */

.container1 {
  color: rgb(255, 255, 255);
  width: 700px;
  height: 80px;
  text-align: center; 
  background-color: var(--primary-color);
}

.title {
  font-size: 48px;
  font-weight: 500px;
  font-family: 'Work Sans', sans-serif;
  text-align: center;
  letter-spacing: 5px;
  margin: 0.5rem;
}

/* ----------------------
       ~Description~                                   
---------------------- */

.container2 {
  width: 700px;
  height: 80px;
}

#description {
  font-size: 15px;
  font-family: 'Poppins', sans-serif;
  text-align: center;
  letter-spacing: 0.4px;
  margin: 1.25em 0;
  color: var(--fourth-color);
}

hr {
  width: 580px;
  background-color: var(--primary-color);
}

/* ----------------------
       ~Profile~                                   
---------------------- */

.container3 {
  font-family: 'Work Sans', sans-serif;
  width: 700px;
  height: 370px;
}

.profile {
  color: var(--third-color);
  font-family: 'Poppins', sans-serif;
  font-weight: 100px;
  text-align: left;
  letter-spacing: 1px;
  margin-left: 67px;
}

.form-group {
  display: flex;
  margin-top: 40px;
  justify-content: center;
  gap: 2em;
}

.info {
  color: var(--primary-color);
  padding-top: 0.5em;
  letter-spacing: 1px;
}

#number-label,
#name-label,
#email-label, 
#nation-label {
  padding-left: 0.75em;
}

.form-control {
  margin: 0.5em;
  outline: rgb(18, 49, 77, 0.7);
  width: 150px;
  height: 25px;
  border-radius: 5px;
}

.gender {
  width: 110px;
  margin-left: 1em;
  border: 2px solid;
  border-color: var(--primary-color);
}

.gender > h4 {
  color: rgb(18, 49, 77, 0.7);
  font-family: 'Poppins', sans-serif;
  text-align: center;
  letter-spacing: 1px;
  padding-top: 10px;
}

.gender > label {
  color: var(--secondary-color);
  letter-spacing: 1px;
}

.gender > input {
  margin: 10px;
}

.occupation {
  margin-top: 20px;
}

.occupation > p {
  font-weight: 500;
  margin-top: 18px;
  color: var(--third-color);
}

.occupation > select {
  color: var(--primary-color);
  margin: 0 63px;
}

/* ----------------------
    ~Interest Header~                                   
---------------------- */

.container4 {
  font-size: 13px;
  font-family: 'Poppins', sans-serif;
  text-align: center;
  letter-spacing: 0.4px;
  color: var(--fourth-color);
}

/* ----------------------
       ~Interest~                                   
---------------------- */

.container5 {
  font-family: 'Work Sans', sans-serif;
  background-color: var(--primary-color);
}

.pastime {
  display: flex;
  padding: 1em;
  justify-content: center;
  gap: 2em;
  color: white;
}

.interest-input,
.interest-label {
  margin: 0.3em 0.2em;
}

/* ----------------------
        ~Footer~                                   
---------------------- */

.container6 {
  display: flex;
  flex-direction: row;
  width: 700px;
  height: 200px;
  font-family: 'Poppins', sans-serif;
  border-bottom: 1px solid var(--secondary-color);
}

textarea {
  width: 300px;
  height: 150px;
  margin: 2em;
  font-size: 13px;
  box-sizing: border-box;
  border: 1px solid var(--primary-color);
  resize: none;
}

.button {
  width: 200px;
  height: 100px;
  margin: 1.75em 2.25em;
  font-size: 30px;
  background-color: hsla(210, 10%, 35%, 0.3);
  color: hsla(33, 50%, 50%, 0.8);
  cursor: pointer;
}

.button:hover {
  background-color: hsla(33, 50%, 35%, 0.8); 
  color: hsla(210, 10%, 35%, 0.8);
}

.button:active {
  background-color: hsla(33, 50%, 35%, 0.8);
  color: hsla(210, 10%, 35%, 0.8);
  transform: translateY(4px);
}

This is the CSS

I see what you are saying about the utility classes. I suppose one could just create a library of utility classes and just copy and paste them in to projects as needed.

Seeing as this is just a small survey I think I will stick with the way I wrote the code for now, but I will definitely consider the those classes on my next project.

  1. You can use the clamp function to make fluid typography. Or just add some media queries to adjust the text size at given screen sizes.

  2. The text will wrap as long as the container and its content are allowed to shrink and don’t overflow the page. Don’t use fixed width and height. Use max-width and min-height. You can also use relative units (like % or vw).

  3. If you want to stack the content of form-group you can use flex-direction: column. If you only want it to stack when the screen is narrow you can use flex-wrap: wrap or add media queries to switch the flex-direction to column when you want it to.

  4. The interests section is a little too busy. If you really want that many selection options you probably need some form of grouping. Like physical activities, creativity, entertainment, humanities, etc. You might even group them inside a details element. As it is now the list is just overwhelming and in no real order.

  5. Again, to stack flex items use flex-direction: column. Or use flex-wrap and make the flex item take up so much space that they each wrap to a new line.

Quick example for the last question for some more context
.container6 {
  display: flex;
  flex-direction: column;
  min-height: 200px;
  font-family: 'Poppins', sans-serif;
  border-bottom: 1px solid var(--secondary-color);
  padding: 2rem 1rem;
}


textarea {
  min-height: 150px;
  font-size: 13px;
  box-sizing: border-box;
  border: 1px solid var(--primary-color);
  resize: none;
  margin-bottom: 1rem;
}

.button {
  font-size: 30px;
  margin-left: auto;
  padding: 0.4rem 2rem;
  background-color: hsla(210, 10%, 35%, 0.3);
  color: hsla(33, 50%, 50%, 0.8);
  cursor: pointer;
}

As this all has to do with layout, I might suggest doing more of the new RWD curriculum and then maybe come back to this challenge again. Later parts of the curriculum teachs more about layout (flex, grid, etc.). You can also check out some videos on the subject.

1 Like

Clamp wow and here I was thinking I was progressing along nicely and this curve ball comes out of no where. Thanks for the share I will have to experiment with this little tidbit!

I have been messing around with the @media queries and this is what I got so far…

@media (max-width: 400px) {
  body,
  main {
    width: 400px;
  }
}

@media (max-width: 400px) {
  .container1,
  .container2,
  .container3,
  .container4,
  .container5,
  .container6 {
    display: flex;
    width: 350px;
    flex-flow: column wrap;
    align-items: flex-start;
    align-content: center;
    justify-content: center;
    overflow: hidden;
  }
}

So what you are saying is that in order to make things responsive it is better to use percentages and vw throughout the code? I’m assuming you mean outside of media queries right?

I used the code flex-flow: column wrap; in media queries with an overflow: hidden;. I got the elements of form-group to stay within the container but they won’t stack like I want them to.

I would like to keep all those options. Point of the survey is to get people to think specifically about what they are interested in rather than having a general view about what could be interesting to them. I do have the interest inputs separated into 4 columns, but I was thinking about making two div elements each will hold two columns. Perhaps a list would be better useful here.

Thanks for the advice. I had a quick look at the video you provided and first off I love Kevin’s videos he has taught me a few things already, so thanks for the share.

I appreciate your time and effort to help me. I think I am going to dive into this video you provided. Oh and I have moved ahead with the course while still coming back to this survey to add stuff. I am now at the technical document section and decided it was time to finish this survey before I dive into building a technical documentation page.