Curios Case Of Flexbox

Curios Case Of Flexbox

Table of contents

Flex box Behaviour

  1. The justify-content property in Flexbox aligns the flex items (direct children of the flex container) along the main axis of the flex container.

  2. However, because Flexbox is a nested layout system, setting justify-content on a flex container can have an effect on the grandchildren elements as well.

  3. If we set display: flex on the .parent element and justify-content: center, the .child element becomes a flex item and is centered along the main axis. Since the .grandchild element is a child of the .child element, it is affected by the justify-content property as well, and will be centered within the .child element.

  4. This is because Flexbox treats the .child element as a single unit or "box" that can be aligned along the main axis. The .grandchild element is contained within the .child element, so it is naturally aligned within the "box" defined by its parent element.

  5. However, it's important to note that the justify-content property only applies to direct children of a flex container. If you have a more complex nested structure with multiple levels of parent and child elements, you may need to apply additional flex properties to the intermediate elements to achieve the desired layout.

Code Snippet For the above is

<body>
  <div class="parent">
    <div class="child">
      <p>Hello World!</p>
    </div>
  </div>
</body>