I'm trying to get my forms to use (flex box) space-around, but it is not working in flex box

user_4682551 0
Viewed 49

enter image description hereThis is what it looks like and I want them to be centered with space around First image is what I want, second image is what I have. *Please ignore the text in the image

I have tried applying~ flex: 1 1 auto; Onto both iframes and it doesn't change anything to no surprise.

I've tried to wrap the iframes into divs and change the classes to those divs, but both divs just wrap down to a new row.

I've also tried to use justify content center instead of space around, but there is no effect on the iframes

I made the iframes very small to better see the box's and there spacing

that's why this is the current code I am working with.

html~

<div class="book-club-box">

      <iframe class="sign-up-form" src="https://docs.google.com/forms/d/e/1FAIpQLSdIMTKQWGzsgaaKoMXMdwH-aWCYGt4_nkBR5PladQk71PBBzg/viewform?embedded=true" width="40" height="47" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>

      <iframe class="recomendation-form" src="https://docs.google.com/forms/d/e/1FAIpQLSdVwxefk0fq6NV3H-EryEfLk83_RQHUM-eVwav_gNmWL2-u8Q/viewform?embedded=true" width="40" height="47" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>
  
  </div>

css~

.book-club-box{
    display: flex;
    align-items: center;
    justify-content: space-around; 
}

.recomendation-form{
}

.sign-up-form{    
}
flexbox iframe css html
1 Answers

If you want that frames should be placed at start, so just remove justify-content property as it by default is set to normal.

An example:

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

.book-club-box{
  display: flex;
  align-items: center;
}

.recomendation-form {
  width: 30%;
}

.sign-up-form {
  width: 30%;
}
  <div class="book-club-box">

    <iframe class="sign-up-form"
      src="https://docs.google.com/forms/d/e/1FAIpQLSdIMTKQWGzsgaaKoMXMdwH-aWCYGt4_nkBR5PladQk71PBBzg/viewform?embedded=true"
     frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>

    <iframe class="recomendation-form"
      src="https://docs.google.com/forms/d/e/1FAIpQLSdVwxefk0fq6NV3H-EryEfLk83_RQHUM-eVwav_gNmWL2-u8Q/viewform?embedded=true"
      frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>

  </div>

UPDATE:

What is the use of asterisk (*) selector in CSS ?

The asterisk (*) is known as the CSS universal selectors. It can be used to select any and all types of elements in an HTML page. The asterisk can also be followed by a selector while using to select a child object. This selector is useful when we want to select all the elements on the page.

UPDATE 1:

If you want to have space around, then use justify-content: space-around;:

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

.book-club-box {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.recomendation-form {
  width: 30%;
}

.sign-up-form {
  width: 30%;
}
<div class="book-club-box">

    <iframe class="sign-up-form"
      src="https://docs.google.com/forms/d/e/1FAIpQLSdIMTKQWGzsgaaKoMXMdwH-aWCYGt4_nkBR5PladQk71PBBzg/viewform?embedded=true"
     frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>

    <iframe class="recomendation-form"
      src="https://docs.google.com/forms/d/e/1FAIpQLSdVwxefk0fq6NV3H-EryEfLk83_RQHUM-eVwav_gNmWL2-u8Q/viewform?embedded=true"
      frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>

  </div>

user_16462400
Related