1

I have display:flex on #imgfirst and #textSecond. Do i really need to use display:flex on that even though i already set .container to display:flex? If i don't set display flex on these items, the spacing is different. What is actually happening?

var twitchArr = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];

var dataArray;
twitchArr.forEach(function(twitch) {
  $.getJSON('https://api.twitch.tv/kraken/streams/' + twitch + '?client_id=lgiuraoc2wbg635m7ewteblxg38n4b', function(data) {
    console.log(data.stream); /*just for checking*/
    if (data.stream !== null) {
      forOnline(data.stream.channel.logo, data.stream.channel.game, data.stream.channel.status);

      function forOnline(img, gameName, description) {
        var para = '<div class="off">' +
          '<img id="mainImg" src=' + img + '>' + '</div>';
        var para1 = '<div class="off1">' + '<p id="textovo">' + gameName + ": " + description + '</p>' + '</div>';

        $("#imgFirst").append(para);
        $("#textSecond").append(para1);
      }
    } else {
      console.log(data._links.channel);
      let toHitUrl = data._links.channel;
      toHitUrl += '?client_id=lgiuraoc2wbg635m7ewteblxg38n4b';
      console.log(toHitUrl);
      $.getJSON(toHitUrl, function(imglogo) {
        forOffline(imglogo.logo, 'offline');

        function forOffline(img, description) {
          var para = '<p class="off2">' +
            '<img id="mainImg" src=' + img + '>' + '</p>';
          var para1 = '<p class="off3">' + '<span id="textovo">' + description + '</span>' + '</p>';
          $('#imgFirst1').append(para);
          $('#textSecond1').append(para1);
        } //for when offline use this

      });
    } //end of getJson
  });
});
body {
  body: 100%;
  font-size: 16px;
  /*or 1 em*/
}

.container {
  display: flex;
  border: 5px solid magenta;
}

.mainCont {
  background-color: rgb(177, 175, 175);
  border: 5px solid red;
  justify-content: flex-start;
}

#twitchHead {
  border: 5px solid maroon;
}

#imgFirst {
  border: 5px solid maroon;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.off {
  border: 1px solid mediumaquamarine;
}

#textSecond {
  display: flex;
  border: 5px solid blue;
  flex-direction: column;
}


/*********************************
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Twitch Tv Project</title>
  <link rel="stylesheet" href="twitchcss.css">

  <!--jquery link-->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" />


  <body>
    <div class='container mainCont'>
      <h3 id="twitchHead">TWITCH STREAMERS</h3>
    </div>
    <!--end of first container-->

    <div class='container onlineContainer'>
      <div id="imgFirst"></div>
      <div id="textSecond"></div>
    </div>
    <!--end of online container-->

    <div class='container'>
      <div id="imgFirst1"></div>
      <div id="textSecond1"></div>
    </div>
    <!--end of offline container-->

    <script type="text/javascript" src="twitchjs.js"></script>

  </body>

</html>

I have display:flex on #imgfirst and #textSecond. Do i really need to use display:flex on that even though i already set .container to display:flex? If i don't set display flex on these items, the spacing is different. What is actually happening?

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
user2763557
  • 449
  • 5
  • 18
  • With `display: flex` set on `.container` it will be a flex parent, and the `#imgFirst`/`#imgSecond` will be flex child. If you also add `display: flex` to those flex child, they will be both flex parent and flex child, so called nested flex elements. – Asons Mar 11 '18 at 17:12
  • Also the `flex-direction: column;` you set on e.g. `#textSecond` won't do anything as that is a flex parent property, and should be set on e.g. `.container`. – Asons Mar 11 '18 at 17:15
  • I think you need to read up on how Flexbox works: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ – Asons Mar 11 '18 at 17:16
  • I see, l am looking at that page as i work on adding flexbox to my code. I totally missed the parent - child connection. Thank you! – user2763557 Mar 11 '18 at 17:27

0 Answers0