CSS: Flexbox Property Stuck At Default - Stretch

Question

CSS: Flexbox Property Stuck At Default - Stretch

111 Views Asked by Femi Gideon At 01 February 2022 at 18:16

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.

Original Q&A

There are 2 best solutions below

**Nick the Community Scientist** · Answer 1 · 2022-02-01T19:01:12.053000

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>

**Shlok Talati** · Answer 2 · 2022-02-01T21:26:51.937000

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.

;)

CSS: Flexbox Property Stuck At Default - Stretch

There are 2 best solutions below

Related Questions in HTML

Related Questions in CSS

Related Questions in FLEXBOX

Related Questions in CSS-SELECTORS

Related Questions in STRETCH

Trending Questions

Popular # Hahtags

Popular Questions