I’m unfamiliar with the Compass syntax. However, the syntax looks old. First get the wrapper in order: start with “display:flex” for the parent container. then “flex-direction: row” to set the orientation of the child elements. Then justify-content.
justify-content will set the position of your elements inside of the container. justify-content: center will put stuff in the center, while 'space-between' throws your elements out to the edges, and evenly spaces the middle. After that, add flex styles to the child elements: Flex-basis is used to set the “starting” width of a child element. You can set flex-basis in %, em, or px (or whatever your heart’s desire) 'Flex-basis' means that this is a “default” width of the child element - before it starts to grow or shrink. All elements will start with this space, before expanding or shrinking. 'flex-grow' sets how much the child element can grow, in comparison to its siblings. If you set all child elements to flex-grow:1, then, after flex-basis, they will grow to fill up the available space. If only one element is set to flex-grow:1, then it will grow, while the others stay the same. Here’s a quick example I threw together: http://www.cssdesk.com/PFBAX On Aug 8, 2014, at 13:45, Tim Dawson <t...@ramasaig.com> wrote: > I'm experimenting with the CSS3 Flexible Box layout. Since I am also using > SASS I copied a very simple flex layout from: > http://compass-style.org/examples/compass/css3/box/ > > … > .main { > display: box; ______________________________________________________________________ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
