CODEWITHSUNDEEP
csswebkitflexbox
David Rodrigues
David Rodrigues

Reputation: 12532

flex-pack at webkit

On web exists information about CSS3 box, flexbox and flex. From what I understand, the flex is the current draft method, for now. So on webkit we use display: -webkit-flex, -webkit-flex: 1 auto...

But my question is: how I can use something like box-pack: start on flex?

Take a look in this example (webkit only). I need pack it to top, but it is spreading. It'll be similar to this hackish example (but not is good for my case, hard to maintance). How I can fix that?

NEED TO FIX

HTML

<div class="body">
    <h1>Test</h1>
    <div class="box" style="width: 80%"></div>
    <div class="box" style="width: 20%"></div>
    <div class="box" style="width: 20%"></div>
    <div class="box" style="width: 20%"></div>
    <!-- (NEED TO FIX) EMPTY SPACE -->
</div>

CSS

h1 {
    -webkit-flex: 1 100%;
}

.body {
    display: -webkit-flex;
    -webkit-flex-direction: row;
    -webkit-flex-wrap: wrap;
    height: 400px;
}

So note that h1 need use all space from line 1, 2nd and 3rd .box will go to line 2, 4th and 5th .box on line 3 and I need that the .body (that is bigger than content, in height) have a empty space on bottom.

HACKISH SOLUTION :-(

HTML

<div class="body">
    <h1 style="height: 40px;">Test</h1>
    <div class="box" style="width: 80%; height: 20px;"></div>
    <div class="box" style="width: 20%; height: 20px;"></div>
    <div class="box" style="width: 20%; height: 20px;"></div>
    <div class="box" style="width: 20%; height: 20px;"></div>
    <div class="hackish"></div>
    <!-- NOTE THIS .hackish :-( -->
</div>

CSS

.hackish {
    width: 100%;
    height: 100%;
}

So, some solution?

Upvotes: 1

Views: 3745

Answers (1)

David Rodrigues
David Rodrigues

Reputation: 12532

After write all and create examples to here, I found the solution, 5 seconds after. Grrr...

I can simply use -webkit-align-content: flex-start on .body (W3 Flexbox - Align Content). So this is the solution:

.body {
    display: -webkit-flex;
    -webkit-flex-direction: row;
    -webkit-flex-wrap: wrap;
    height: 400px;

    -webkit-align-content: flex-start;
}

See this working.

Upvotes: 2

Related Questions