www.webdeveloper.com
Results 1 to 3 of 3

Thread: Flexible Box Model

  1. #1
    Join Date
    Aug 2014
    Posts
    1

    Flexible Box Model

    so this is probably a stupid question but im teaching myself how to do this so here we go ;p

    iv been playing around with flexible box models finding the best ways to set everything up and it seems to me that i should be able to use a

    -webkit-box-align: center;
    to center the 2 boxes im using then a
    -webkit-box-align: stretch;
    to stretch the left of the 2 boxes to fit a box with a max height of 500 <random number just so i can see everything working

    there is the main section with both boxes im using <may or may not look like crap honestly im not 2 far into this lol
    Code:
    <div id="main_div2">
    			<section id="main_section">
    				<div id="article1">
    					<article>
    						<p>hello</p>
    					</article>
    				</div>
    				<div id="article2">
    					<article>
    						<p>hello2</p>
    					</article>
    				</div>
    			</section>
    Code:
    #main_div2{
    	display:-webkit-box;
    	-webkit-box-orient:horizontal;
    	border: 1px solid black;	
    }
    #main_section{
    	-webkit-box-flex: 1;
    	display:-webkit-box;
    	-webkit-box-orient:horizontal;
    	-webkit-box-align: center;
    	border: 1px solid black;
    	padding: 20px;
    	height: 500px;
    	width: 500px;
    }
    #article1{
    	-webkit-box-flex: 1;
    	-webkit-box-align: stretch;
    	border: 1px solid black;
    }
    #article2{
    	-webkit-box-flex: 5;
    	border: 1px solid black;
    }
    like i said all this is really just something iv been playing with to toy with the code so i know what it all dose sooo it isn't really meant to be anything just seams to me this should work and not shore why it doesn't

  2. #2
    Join Date
    May 2014
    Posts
    897
    This might seem like silly questions, but why use flex-box when you're fixing the width of the parent, and why so many DIV when you're using the allegedly semantic new HTML 5 structural tags, likewise why so many ID? You're using flex-box so it's not like you can't use nth-child, first-child or last-child instead keeping the HTML to a minimum...

    All that said, I'm not quite clear what you are trying to do with that. I mean if you're just going to fix the width of the container at 500px, why the flex-box in the first place unless going for height stretch -- which you don't need with a fixed height either.

    Yeah, not sure what you're trying to do there.

    I want to like flex-box, I've used it on a couple projects to provide min-height layouts... but for things like columns it seems painfully complex even compared to floats and faux-columns; another of those things people CALL easier and I look at it and go "really?"
    Java is to JavaScript as Ham is to Hamburger.

  3. #3
    Join Date
    May 2014
    Posts
    897
    I just played with it and gutted it down -- is this what you are trying to do?

    Code:
    <section id="articles">
    	<article>
    		<p>hello</p>
    	</article>
    	<article>
    		<p>hello2</p>
    	</article>
    </section>
    Code:
    #articles{
    	padding: 20px;
    	height: 500px;
    	width: 500px;
    	border: 2px solid black;	
    	display: -webkit-flex;
    	display: flex;
    	-webkit-flex-direction: row;
    	flex-direction: row;
    }
    
    #articles article {
    	-webkit-box-flex: 1;
    	flex:1;
    	border: 1px solid black;
    }
    
    #articles article:last-child {
    	-webkit-box-flex: 5;
    	flex:5;
    }
    Remember, the last-child being set to 5 means in total it's dividing by six, so the first one will be 83px wide, the rest 417px wide. (though beware that FF may result in being 1px off from rest of world thanks to it's nyetscape heritage). They both automatically stretch to height so I'm not sure why you were playing with box-align.

    In any case if you're going to use the pointless HTML 5 garbage and throw the concept of document structure out the window with it, try not to make DIV for nothing.
    Java is to JavaScript as Ham is to Hamburger.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles