SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Sep 2013
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problem with flex layout

    I'm trying to create a page that looks something like this:

    sample.png

    The example I've been following makes use of a flex layout, but changes to the stylesheet seems to have no effect on the page.

    The other problem I have is that I cannot affect the image dimensions through the stylesheet.

    I reckon I'm either missing something here, or this flex functionality is not yet an implemented standard.

    (did I mention I'm totally new to this )


    Code:
         <section id='channels'>
                <section class='channel-item'>
                	<h1>item 1</h1>
                	<p>description 1</p>	
                	<img src="../assets/1.jpg" alt="X" width="50" height = "50" ></a>
                </section>
                
                <section class='channel-item'>
                	<h1>item 2</h1>
                	<p>description 2</p>
                	<img src="../assets/2.jpg" alt="X" width="50" height = "50"></a>
                </section>
         </section>

    And my stylesheet is as follows:

    Code:
    #channels 		
    {
    	display: flex;
    	flex-flow: row wrap;
    }
    
    .channel-item 
    {
    	display: flex;
    	flex-flow: column;
    }
    
    .channel-item > img {
    	order: -1
    	align-self: center;
    	height: 32px;	/* doesn't work either*/
    	width: 32px;
    }


    I'm running Chrome, Apatana Studio, PHP.

    Thanks for any pointers.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,214
    Mentioned
    457 Post(s)
    Tagged
    8 Thread(s)
    I'm not up to speed with flexbox, but you do have a typo in your CSS that is wiping out the image dimension styles:

    This:

    Code:
    .channel-item > img {
    	order: -1
    	align-self: center;
    	height: 32px;	/* doesn't work either*/
    	width: 32px;
    }
    should be this (you are missing a semicolon after order: -1):

    Code:
    .channel-item > img {
    	order: -1;
    	align-self: center;
    	height: 32px;	/* doesn't work either*/
    	width: 32px;
    }

  3. #3
    SitePoint Member
    Join Date
    Sep 2013
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks... doesn't change anything though. I suspect the <section> tags are a problem.

    What would you suggest I use to achieve the desired result? (if not a flexbox)?

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,214
    Mentioned
    457 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Maxcot View Post
    Thanks... doesn't change anything though
    It makes a huge difference to add in that semi colon. The images go from bottom to top.

    I'd like some more info about the layout you really want to suggest alternatives, but flexbox isn't needed for a layout like what you showed in your screen shot. You can make up a working example for us to look at, including images. Take a look at this thread for guidance on that:

    http://www.sitepoint.com/forums/show...Posting-Basics

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,385
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Maxcot View Post
    Thanks... doesn't change anything though. I suspect the <section> tags are a problem.
    Putting the semi colon back in place works fine and the layout is working as expected in Chrome.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    #channels {
    	display: flex;
    	flex-flow: row wrap;
    }
    .channel-item {
    	display: flex;
    	flex-flow: column;
    }
    .channel-item > img {
     order: -1;
    	align-self: center;
    	height: 32px;	/* doesn't work either*/
    	width: 32px;
    }
    </style>
    </head>
    
    <body>
    <section id="channels">
    		<section class='channel-item'>
    				<h1>item 1</h1>
    				<p>description 1</p>
    				<img src="http://www.placehold.it/50x50" alt="X" width="50" height = "50" ></a> </section>
    		<section class='channel-item'>
    				<h1>item 2</h1>
    				<p>description 2</p>
    				<img src="http://www.placehold.it/50x50" alt="X" width="50" height = "50"></a> </section>
    </section>
    </body>
    </html>
    It doesn't work in Mozilla as it only has partial support for flexbox according to caniuse


    What would you suggest I use to achieve the desired result? (if not a flexbox)?
    For the time being I'd use display table (IE8+) for the equal columns. The problem is the button at the bottom of each column and you'd need to do it (rather non-semantically in two rows as follows).

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    .wrap {
    	width:70%;
    	margin:auto;
    	table-layout:fixed;
    	border-spacing:20px 0;
    }
    .row { display:table-row }
    .item {
    	display:table-cell;
    	border:5px solid #000;
    	padding:10px;
    }
    .item.top {
    	border-bottom:none;
    	border-radius:10px 10px 0 0
    }
    .item.bottom {
    	border-top:none;
    	border-radius:0 0 10px 10px
    }
    button {
    	width:50%;
    	height:30px;
    	line-height:30px;
    	border-radius:5px;
    	border:1px solid #000;
    	padding:0;
    	text-transform:uppercase;
    	background:red;
    	margin:auto;
    	display:block;
    }
    </style>
    </head>
    
    <body>
    <h1>Equal columns IE8+</h1>
    <div class="wrap">
    		<div class="row">
    				<div class="item top">
    						<h2>Heading</h2>
    						<p>Lorem ipsum dolor site amet text Lorem ipsum dolor site amet text Lorem ipsum dolor site amet text Lorem ipsum dolor site amet text Lorem ipsum dolor site amet text </p>
    				</div>
    				<div class="item top">
    						<h2>Heading</h2>
    						<p>Lorem ipsum dolor site amet text Lorem ipsum dolor site amet text Lorem ipsum dolor site amet text Lorem ipsum dolor site amet text Lorem ipsum dolor site amet text </p>
    						<p>Lorem ipsum dolor site amet text Lorem ipsum dolor site amet text Lorem ipsum dolor site amet text Lorem ipsum dolor site amet text Lorem ipsum dolor site amet text </p>
    				</div>
    		</div>
    		<div class="row">
    				<p class="item bottom">
    						<button>Buy now</button>
    				</p>
    				<p class="item bottom">
    						<button>Buy now</button>
    				</p>
    		</div>
    </div>
    </body>
    </html>

  6. #6
    SitePoint Member
    Join Date
    Sep 2013
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, that is very helpful, particularly that caniuse resource.

    I think I'll try alternatives to the flexibox for now.

    Cheers.


Bookmarks

Posting Permissions

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