CSS: Flexbox Property Stuck At Default - Stretch

user_18093151 0
Viewed 55

Good day everyone! I just started learning flex box. I applied the align item: stretch property and it gave me the expected outcome. I deleted the style immediately from my CSS so I could proceed with my lesson but the browser still kept behaving like I still have the align-item: stretch property.

I have deleted my browser cache/data, loaded using different browser but it's still giving me the same problem. I'm almost frustrated, please help me. I'm currently using Chrome browser.

flexbox stretch css-selectors css html
2 Answers

Here is what I got for you. So I have an example below which should explain exactly why you have this issue, but let me give you an exlaination of my code.

  • container and container1 shows that stretch is the default behaviour of flexbox, so even if you deleted the code nothing will happen.
  • container3-reverse-axis shows you what the example I gave looks by default with stretch if you reverse the axis.
  • container3-flex-end shows you what happens if you set it now to anything else like flex-end.
  • container4-default and container4-justify shows you what you probably are looking for and expected to happen in the first place.

Here is a great website that explains flex box in a lot of detail.

<!doctype html>
<html lang="en">
<style>
  .box1 {
    background: green;
  }
  
  .box2 {
    background: blue;
  }
  
  .box3 {
    background: red;
  }
  
  .box4 {
    background: magenta;
  }
  
  .box5 {
    background: yellow;
  }
  
  .box6 {
    background: pink;
  }
  
  .box {
    font-size: 15px;
    padding: 15px;
  }
  
  .container {
    display: flex;
    /* stretch is actually the default */
  }
  
  .container1 {
    display: flex;
    align-items: stretch;
  }
  
  .container2 {
    /* stretch changed to flex-end will actually do nothing, you know why? Because its targeting cross axis alignment. So it will only make a difference if you change the axis to column with flex-flow. */
    display: flex;
    align-items: flex-end;
  }
  
  .container3-reverse-axis {
    display: flex;
    align-items: stretch;
    flex-flow: column;
  }
  
  .container3-flex-end {
    display: flex;
    align-items: flex-end;
    flex-flow: column;
  }
  /* You might actually be looking for justify-content instead. */
  
  .container4-default {
    display: flex;
    justify-content: stretch;
  }
  
  .container4-justify {
    display: flex;
    justify-content: flex-end;
  }
</style>

<body>

<h1>Stretch is the Default</h1>

  <div class="container">
    <div class="box box1">One</div>
    <div class="box box2">two</div>
    <div class="box box3">three</div>
    <div class="box box4">four</div>
    <div class="box box5">five</div>
    <div class="box box6">six</div>
  </div>

  <br>

  <div class="container2">
    <div class="box box1">One</div>
    <div class="box box2">two</div>
    <div class="box box3">three</div>
    <div class="box box4">four</div>
    <div class="box box5">five</div>
    <div class="box box6">six</div>
  </div>

  <br>

<h1>This is what happens when you switch to cross-axis alignment</h1>

  <div class="container3-reverse-axis">
    <div class="box box1">One</div>
    <div class="box box2">two</div>
    <div class="box box3">three</div>
    <div class="box box4">four</div>
    <div class="box box5">five</div>
    <div class="box box6">six</div>
  </div>

  <br>

  <div class="container3-flex-end">
    <div class="box box1">One</div>
    <div class="box box2">two</div>
    <div class="box box3">three</div>
    <div class="box box4">four</div>
    <div class="box box5">five</div>
    <div class="box box6">six</div>
  </div>

  <br>
  <h1>This is what you probably expected to happen.</h1>

  <div class="container4-default">
    <div class="box box1">One</div>
    <div class="box box2">two</div>
    <div class="box box3">three</div>
    <div class="box box4">four</div>
    <div class="box box5">five</div>
    <div class="box box6">six</div>
  </div>

  <br>

  <div class="container4-justify">
    <div class="box box1">One</div>
    <div class="box box2">two</div>
    <div class="box box3">three</div>
    <div class="box box4">four</div>
    <div class="box box5">five</div>
    <div class="box box6">six</div>
  </div>
</body>

</html>

user_107376260

This seems like an extremely unusual thing to happen. I don't really have anything to advise on it unless you post your code along with the question.

Maybe then we can find some error with the code.

Until then, are you absolutely 100% sure you saved your both HTML and CSS page before trying to see the result? Asking this because it is very unlikely for something like this to happen.

;)

user_167751710
Related