Why Are Not All Flexbox Elements Behaving Like Flexbox Divs

Why are not all flexbox elements behaving like flexbox divs?

As far as I can tell, this is down to browser bugs to do with the fieldset element.

It's a known issue with fieldset elements in Chrome. Firefox has a similar (very old) issue in that legend and fieldset are replaced elements.

---

I guess it's safer to use a <div role="group"> instead of a real fieldset for now. In your CSS you could use div[role='group'] as your selector. See http://www.deque.com/aria-group-viable-alternative-fieldset-legend for more information.

Absolute div inside flexbox div behaving like fixed

set position: relative for parent (#chat-page-main-container)

Flexbox not giving equal width to elements

There is an important bit that is not mentioned in the article to which you linked and that is flex-basis. By default flex-basis is auto.

From the spec:

If the specified flex-basis is auto, the used flex basis is the value of the flex item’s main size property. (This can itself be the keyword auto, which sizes the flex item based on its contents.)

Each flex item has a flex-basis which is sort of like its initial size. Then from there, any remaining free space is distributed proportionally (based on flex-grow) among the items. With auto, that basis is the contents size (or defined size with width, etc.). As a result, items with bigger text within are being given more space overall in your example.

If you want your elements to be completely even, you can set flex-basis: 0. This will set the flex basis to 0 and then any remaining space (which will be all space since all basises are 0) will be proportionally distributed based on flex-grow.

li {
    flex-grow: 1;
    flex-basis: 0;
    /* ... */
}

This diagram from the spec does a pretty good job of illustrating the point.

And here is a working example with your fiddle.

My css flexbox is not working on any browser

The display: flex property only applies to the direct children elements within the flex container. I'm guessing that you want the list items to also be "flexed" so in order to do that - you need to apply display flex to the ul as well as the nav.

In other words - the nav bar applies display flex to ONLY the div containing the image image and the ul. In order to align and space out the list items - the ul needs to also be a flex container. I am using space-around to space out the list items - but obviously you might need to alter the styling to suit your needs.

*{
    margin: 0px;
    padding: 0px;
}
/* Navigation Bar */
#navbar{
    display: flex;
    align-items: center;
    flex-direction: row;
    top: 0px;
}

#navbar ul{
    display: flex;
    align-items: center;
    flex-direction: row;
    top: 0px;
    list-style: none;
    flex-grow: 1;
    justify-content: space-between;
    margin-left: 32px
}

<nav id="navbar">
   <div id="logo">
       <img src="logo.png" alt="MyOnlineMeal.com">
    </div>
    <ul>
       <li class="item"><a href="#home">Home</a></li>
       <li class="item"><a href="#services-container">Services</a></li>
       <li class="item"><a href="#client-section">Our Clients</a></li>
       <li class="item"><a href="#contact">Contact Us</a></li>
     </ul>
 </nav>

Why do I need to apply flexbox twice to get this to work?

If I am understanding your question properly, Flexbox is working as it should. You have to imagine each component and its children as its own container. The 'cards' class aligns each individual card. Flex css on 'cards' only affects items that share a common parent (the direct children), aka how the cards are aligned relative to the cards container. That means that any content within the cards will not be affected by your styling so you will have to reassign flex properties.

In comes flex css for each individual card ('.cards a'). This only styles the direct children of each 'a' element, so how you want the content to be aligned. This means that if you remove the 'cards' flexbox classes, nothing is telling each card how it should be aligned relative to its container. That's why you have to redefine flex styling depending on the hierarchy and how you intend to align the content.

If I misunderstood please do correct me, but otherwise I hope this provides some insight!

CSS grid as child of flexbox not behaving as expected

The Simple Answer:

The grid container's automatic width is essentially whatever it would be if it weren't a grid container.

In the first example, the grid container width is only constrained by the width of the document and any default margins.

In the second example, the grid container width is the width of an ancestor flex item with default shrinkwrap behavior that's dependent on the width of its content, the text "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta est ipsa recusandae." (To put it more directly, the width of the grid container is the width of the preceding, quoted sentence.)

The Extended Answer:

The grid container (.hero-modules) has width: auto (the default). Per https://drafts.csswg.org/css-grid/#grid-container:

As a block-level box in a block formatting context, it is sized like a block box that establishes a formatting context, with an auto inline size calculated as for non-replaced block boxes.

The term "auto inline size" is just another way of saying width: auto in this case. (The "auto inline size" is height: auto in vertical text.)

"A block box that establishes a formatting context" is the same as a box with display: flow-root. Changing display: grid to display: flow-root will demonstrate what width is being used to calculate the width of the grid container as a result of width: auto.

So now we know where the grid container size comes from.

The flex item's size comes from flex-grow: 0 and flex-shrink: 1 (the defaults), which makes its width shrink and not grow. The basis for the flex item's width is flex-basis: auto (the default), which resolves to flex-basis: content. The content is the text "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta est ipsa recusandae."

So now we know why the flex item doesn't expand and what its width is based on.

Fixing This Layout:

This flex layout should not be column-based; it should be row-based. Columns are inside the sole flex item, but not flex items themselves and dimensional flexibility is desired on the x-axis, not the y-axis.

So, flex-direction: column needs to become flex-direction: row.

The flex layout needs to grow (on the x-axis) to fit available space, so flex-grow: 1 needs to be specified on the flex item (.box).

Lastly, the grid-template-columns value should use auto-fit, not auto-fill if horizontal centering is desired. Grid items can be centered with justify-content: center applied to the grid container element.

(With auto-fill, invisible placeholder grid items will be placed to fill out the layout, which will cause the three present grid items to be aligned to the left with a bunch of invisible placeholder items filling out the remaining blank space to their right. With auto-fit, those placeholder grid items are simply discarded and that space is freed for horizontal alignment.)

.hero {

  background-color: pink;

  display: flex;

  min-height: 600px;

  flex-direction: row;

  align-items: center;

  justify-content: center;

  border: 1px solid #000;

}

.box {

  border: 1px dotted #000;

  flex-grow: 1;

  text-align: center;

}

.button-unit {

  text-align: center;

  margin-top: 20px;

}

.hero-modules {

  display: grid;

  grid-gap: 2rem;

  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

  justify-content: center;

}

.hero-modules .hero-item {

  border: 1px solid #000;

  text-align: center;

}

.hero-modules .hero-item h3 {

  font-size: 22px;

  text-align: center;

}

<div class="hero">

  <div class="box">

    <div>

      <h1 class="hero-heading">Check out these new features</h1>

    </div>

    <div class="hero-modules">

      <div class="hero-item">

        <div>

          <h3>Title of Item</h3>

          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta est ipsa recusandae.</p>

        </div>

        <div>

          <a class="hero-read-more">Read more</a>

        </div>

      </div>

      <div class="hero-item">

        <div>

          <h3>Title of Item</h3>

          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta est ipsa recusandae.</p>

        </div>

        <div>

          <a class="hero-read-more">Read more</a>

        </div>

      </div>

      <div class="hero-item">

        <div>

          <h3>Title of Item</h3>

          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta est ipsa recusandae.</p>

        </div>

        <div>

          <a class="hero-read-more">Read more</a>

        </div>

      </div>

    </div>

    <div class="button-unit">

      <button class="btn btn-secondary mb-3">Got It</button>

      <p>

        <a class="remind-me-later" href="">Remind me later</a>

      </p>

    </div>

  </div>

</div>

<div class="container">

  <div class="row">

    <div class="col">

      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum molestias earum beatae, minima provident sunt a et? Voluptatibus sequi ipsum ad asperiores soluta odio, nam nobis quas non totam ut officiis itaque eveniet, maiores saepe id cum consequuntur.

      Molestias suscipit quia laudantium laborum nemo ab officia, nihil esse mollitia sunt!

    </div>

  </div>

</div>

Is it possible to make all elements on the page a display: flex (flexbox)?

(I took my comments and turned them into an answer)

The universal selector would do the trick:

body * { display: flex; } 

(Note that I've scoped it to only include elements within the body)

The universal selector can lead to (negligible, tiny, almost immeasurable) performance issues, but it's by far the simplest way of doing what you asked (given that the display property isn't inherited). The other option (a selector consisting of a massive list of all HTML) elements would take quite a long time to download and parse, too! As for best practise, I don't think either of them is a particularly awesome idea, but I don't know the details of your implementation.

The display property isn't inherited because it would wreak havoc! For example, the <a> element is an inline element. If it inherited display: block; from it's parent elements, all links would be full width and cause a line break (like a p, h1 or div). The inheritance bit of the (rather complicated) CSS2 spec is here: http://w3.org/TR/CSS2/cascade.html#inheritance

CSS Keep all flexbox children elements the same size

You have 2 ways of doing this:

flex-grow: 0 (fiddle)

If you set flex-grow to 0 you are telling the items to keep their width and expand the empty space. Using flex-grow: 1 the items will expand the width to fit the space.

invisible items (fiddle)

Add some invisible items after the normal items with the same flex properties. You will get a left aligned look.

In this solution there will be the same number of items in all visible rows so make sure to add enough invisible items to work properly on larger screens.

---

Related Topics