is there a way to cause a SINGLE child box in the flex box module to occupy 100% of the width of it’s parent? for example, if I had:
<div class="section">
<h2>Headline text which i want to go above all 3 articles<h2>
<div class="artcl">content</div>
<div class="artcl">content</div>
<div class="artcl">content</div>
</div>
this gives me this:
<h2> headline content<h2><div>content</div><div>content</div><div>content</div>
when what I was hoping for is :
<h2> headline content<h2>
<div>content</div><div>content</div><div>content</div>
I realize that I could simply take the H2 outside .section and wrap that… but #1 am trying to avoid the extra mark up
since #2 it makes sense that the H2 is ALREADY wrapped in the section that corresponds of its content
so before I start adding exra tags I was hoping to know if its possible to manipulate the flex boxes so that its no necessary to do add the tag.
Am sorry for the confusion. The element <div class=“section”>, which would contains the <h2> AND 3 divs. “.section” has the display:box; box-orient: horizontal;. What happens is that its seen as 4 children to be lined up horizontally. but what I want is the H2 ABOVE the 3 other child elements.
wrapping the h2 in a header element would be adding extra tags and would not change the result
as I said :
I wanted it to display like this: HEADLINE… HEadline Headline
element 1| Element 2| Element 3
and NOT like this HEADLINE… HEadline Headline|element 1| Element 2| Element 3
That doesn’t seem to make much sense as you just need to remove the h2 from .section and place it above and then you will get the layout you want. Why make it more complicated than it needs to be?
As I see it all the children of .section will be distributed according to the module rules applied and you can’t make one box 100% and the rest then equally divide on another line. The idea is to distribute the elements horizontally (when using box-orient-horizontal) across the available space. (I assume you are looking for something similar to colspan=3 if you were using a table-cell to span 3 cells).
Of course I haven’t played around much with this module yet so don’t fully understand all the implications yet and what happens in practice.
Yah. I know. I was just striving for ULTRA minimalist code and went overboard. it was bugging me that I would have to use a wrapper around h2 and .section. I know that box-flex : can set the proportion of the box based on the AVAILABLE space and that you can even absolutely set the size of boxes… so it struck me that could not set a percentage.
I apologise for not understanding you properly. The only way I would know how to make something look like this:
other than what is already suggested is using tables. Depending on who you talk to some say they are the most dependable and supported terms of making a site looking them same regardless of platform, browser, or device.
But others, including me, believe that is is an old and outdated technique and with proper styling one can achieve the same result with the div tag.
One of the tutorials I read a while back said something about using flexbox – it is best reserved for things like form elements and UI type groupings like menus than it is for actual layout of large sections of text. This makes sense as it comes from the land of “There is no Dana” and that’s what it’s for there… as such that would be strike one against using it for an article section, which is what it looks like you are after here. (though vowel stripping the word for the class is silly). Said page suggested not treating flex as the new float – sage advice.
Strike two comes from it being CSS3, and as such NOT for use in building production websites… as evident from the need for the vendor specific prefixes for it even to work. Even without the vendor specific and just leaving the ACTUAL CSS3 properties in place it’s a heck of a lot of code doing floats job.
Then there’s the stating the widths on elements that by default should be expanding to 100% width.
.section {
overflow:hidden; /* wrap floats */
position:relative; /* make sure width is reported to children in all browsers */
width:100%; /* trip haslayout, wrap floats IE */
}
.section div {
float:left;
width:33.33%;
}
You don’t even need to specify a width on the h2. Sure the total width of those sections may end up off by a pixel or two – but really big deal in most cases.
To me that’s just another of the ‘not ready for primetime’ features of CSS3 that really doesn’t do anything NEW. Do yourself a favor, wait the five to ten years for CSS3 to be ready for production use, and go back to using a float for that.
Unless of course your point was to play around with it so you can go “hey this is kind of neat” or to report bugs in the various browsers implementations – after all that’s what the vendor specific prefixes are supposed to mean!
Shadow. Sage advice indeed. I was just playing with it because box-flex allowed me to change the order f the display of the children AND it easily gives you equal height children (if you want) ! so i thought it could easily lend to creating layouts.
I have however discovered an additional drawback to flex-box, relative positioning doesn’t work on children of display:box elements. A minor bummer I guess, but a bummer nonetheless.
The very same. But not mentioned in that article, flex-box children can be given a box-ordinal-group. Which mean you can display an element ( even an element with dynamic dimensions) that came last in the the source code FIRST, or second, or whatever order you want. Quite handy.
Why make it more complicated than it needs to be?