Problem with flex layout

HTML & CSS
1

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

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 :rolleyes:)

     <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:


#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

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:

.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):

.channel-item > img {
	order: -1[COLOR="#FF0000"];[/COLOR]
	align-self: center;
	height: 32px;	/* doesn't work either*/
	width: 32px;
}
3

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

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:

5

Putting the semi colon back in place works fine and the layout is working as expected in Chrome.


<!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).


<!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

Thanks, that is very helpful, particularly that caniuse resource.

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

Cheers.