package components
{
import mx.core.ILayoutElement;

import spark.components.supportClasses.GroupBase;
import spark.layouts.supportClasses.LayoutBase;

public class FlowLayout extends LayoutBase
{
//—————————————————————
//
// Class properties
//
//—————————————————————

//—————————————————————
// horizontalGap
//—————————————————————

private var _horizontalGap:Number = 10;

public function set horizontalGap(value:Number):void
{
_horizontalGap = value;

// We must invalidate the layout
var layoutTarget:GroupBase = target;
if (layoutTarget)
layoutTarget.invalidateDisplayList();
}

//—————————————————————
// verticalGap
//—————————————————————

private var _verticalGap:Number = 20;

public function set verticalGap(value:Number):void
{
_verticalGap = value;

// We must invalidate the layout
var layoutTarget:GroupBase = target;
if (layoutTarget)
layoutTarget.invalidateDisplayList();
}

//—————————————————————
// verticalAlign
//—————————————————————

private var _verticalAlign:String = “bottom”;

public function set verticalAlign(value:String):void
{
_verticalAlign = value;

// We must invalidate the layout
var layoutTarget:GroupBase = target;
if (layoutTarget)
layoutTarget.invalidateDisplayList();
}

//—————————————————————
// horizontalAlign
//—————————————————————

private var _horizontalAlign:String = “left”; // center, right

public function set horizontalAlign(value:String):void
{
if (_verticalAlign != “compress”)
{
_horizontalAlign = value;
}

// We must invalidate the layout
var layoutTarget:GroupBase = target;
if (layoutTarget)
layoutTarget.invalidateDisplayList();
}

//—————————————————————
//
// Class methods
//
//—————————————————————

override public function updateDisplayList(containerWidth:Number,
containerHeight:Number):void
{
var element:ILayoutElement;
var layoutTarget:GroupBase = target;
var count:int = layoutTarget.numElements;
var hGap:Number = _horizontalGap;
var vGap:Number = _verticalGap;

// The position for the current element
var x:Number = 10;
var y:Number = 0;
var elementWidth:Number;
var elementHeight:Number;
var vAlign:Number = 0;

switch (_verticalAlign)
{
case “middle” : vAlign = 0.5; break;
case “bottom” : vAlign = 1; break;
}

// Keep track of per-row height, maximum row width
var maxRowWidth:Number = 0;

// variables used for compressed layout
var firstRow:Boolean = true;
var elementsPerRow:int = 1;

// loop through the elements
// while we can start a new row
var rowStart:int = 0;
while (rowStart < count)
{
// The row always contains the start element
element = useVirtualLayout ? layoutTarget.getVirtualElementAt(rowStart) :
layoutTarget.getElementAt(rowStart);

var rowWidth:Number = element.getPreferredBoundsWidth();
var rowHeight:Number = element.getPreferredBoundsHeight();

// Find the end of the current row
var rowEnd:int = rowStart;
while (rowEnd + 1 containerWidth)
break;
//
if (firstRow)
{
elementsPerRow ++;
}
//
rowWidth += hGap + elementWidth;
rowHeight = Math.max(rowHeight, elementHeight);
rowEnd++;
}

x = 10;
switch (_horizontalAlign)
{
case “center” : x = Math.round(containerWidth – rowWidth) / 2; break;
case “right” : x = containerWidth – rowWidth;
}

// Keep track of the maximum row width so that we can
// set the correct contentSize
maxRowWidth = Math.max(maxRowWidth, x + rowWidth);

// Layout all the elements within the row
for (var i:int = rowStart; i <= rowEnd; i++)
{
element = useVirtualLayout ? layoutTarget.getVirtualElementAt(i) :
layoutTarget.getElementAt(i);

// Resize the element to its preferred size by passing
// NaN for the width and height constraints
element.setLayoutBoundsSize(NaN, NaN);

// Find out the element's dimensions sizes.
// We do this after the element has been already resized
// to its preferred size.
elementWidth = element.getLayoutBoundsWidth();
elementHeight = element.getLayoutBoundsHeight();

// Calculate the position within the row
var elementY:Number = Math.round((rowHeight – elementHeight) * vAlign);

// Compress the vertical space between elements in the same column
if (_verticalAlign == "compress" && !firstRow)
{
var elementAbove:ILayoutElement = layoutTarget.getElementAt(i – elementsPerRow);
y = elementAbove.getLayoutBoundsY() + elementAbove.getPreferredBoundsHeight() + vGap;
}
// Position the element
element.setLayoutBoundsPosition(x, y + elementY + vGap);

x += hGap + elementWidth;
}

// Next row will start with the first element after the current row's end
rowStart = rowEnd + 1;
firstRow = false;

// Update the position to the beginning of the row
x = 10;
y += vGap + rowHeight;
}

// Set the content size which determines the scrolling limits
// and is used by the Scroller to calculate whether to show up
// the scrollbars when the the scroll policy is set to "auto"
layoutTarget.setContentSize(maxRowWidth, y);
}
}
}

I don’t suppose anyone else has run into it. But, if you can tell me why a VerticalLayout wouldn’t have this problem when the FlowLayout does, I can try to work a fix into it.

Perhaps you need to set the gaps to zero (they default to 6)?
If the issue is somewhere else, I'd encourage you to post at the Flex SDK forums with a small sample app, so we can take a look at it (http://forums.adobe.com/community/labs/gumbo/).