Slideshare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our User Agreement and Privacy Policy.

Slideshare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our Privacy Policy and User Agreement for details.

New values for float property
These include values like start and end to help with languages with RTL direction, but check out how the text wraps around this graphic when using the new contour value. .unicorn { float: right contour; } Pretty sweet, right? Almost as sweet as this rad unicorn pegasus. 9

CSS3 “content-flow” modules• Multi-column Layout:
flow a box’s content into multiple columns in that box• Regions: flow content into multiple, separate boxes• Exclusions and Shapes: make content flow around and within areas in more intricate ways than floating 17

How flexbox works• Make boxes
automatically grow to fill space or shrink to avoid overflow• Give boxes proportional measurements• Lay out boxes in any direction• Align boxes on any side• Place boxes out of order from HTML 35

Make the text input flex#order,
#order form { Make outer div and form display: flex; into flex containers align-items: center; } Vertically center kiddos#order form { Make form take up all flex: 1; } space next to image#order #message { Make text input take up flex: 1; all space in form left min-width: 7em; after label and button margin: 0 5px; } But don’t let it get crazy-small 72