Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

using a flex item as a flex container

Tags:

html

css

flexbox

I wanted to use flexbox with a column layout, but I wanted the top n - 1 flex items to be pinned to the top and the nth flex item to be pinned to the bottom of the main flex container area.

I solved this by using the nth flex item to also be a new flexbox/flex container using justify-content: flex-end, but I couldn't find any examples that were doing this - so is this a correct/acceptable solution according to the standard and, if not, how would I otherwise go about this with flexbox?

Here's a quick example:

.flex-container {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  width: 300px;
  height: 240px;
  background-color: Silver;
}
.flex-container-bottom {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  width: 300px;
  height: 240px;
  background-color: orange;
  -webkit-justify-content: flex-end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}
.flex-item {
  background-color: DeepSkyBlue;
  width: 100px;
  height: 100px;
  margin: 5px;
}
.flex-item-bottom {
  background-color: red;
  width: 100%;
  height: 50px;
}
<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item flex-container-bottom">
    <div class="flex-item-bottom">flex item 2</div>
  </div>
</div>
like image 285
Jordan Avatar asked Jun 30 '15 16:06

Jordan


People also ask

Can a Flex item be a Flex container?

Flexbox is inherently a one dimensional layout model. Flex items within a flex container can be laid out either horizontally or vertically, but not both. If you want to lay out items in both dimensions, you'll need to nest a flex container inside another one.

How do you designate an element as a flexbox container?

To designate an element as a flex container, set the element's display property to flex or inline-flex. Once an item is a flex container, there are several properties we can use to specify how its children behave. All direct child elements of a flex container are flex items.

What HTML element can be made into a Flex container?

One of the big benefits of Flexbox over HTML tables is its ability to use any HTML element to define its containers and elements. You can use div , nav , article , or any other built-in or dynamic semantic HTML tag to define your containers and child items.

Is the FLEX item only the direct child of the flexbox container?

Only direct children of flex containers are flex items. In your example, "childOfChildClass" would only be a flex item if "childClass" was a flex container.


1 Answers

The spec isn't very clear on this, but it states that "Each in-flow child of a flex container becomes a flex item, and each contiguous run of text that is directly contained inside a flex container is wrapped in an anonymous flex item." This seems to imply that if I put a flex container inside another flex container that the inner flex container would also implicitly become a flex item for its containing flex container even if this is not explicitly defined. Example 1 of the specification shows a flex container within a flex container and assuming it is legal syntax it follows that my use case may also be legal, but the section with example 1 is marked as non-normative... (╯°□°)╯︵ ┻━┻... At this point I'm just going to assume this is correct.

like image 82
Jordan Avatar answered Nov 15 '22 07:11

Jordan