Define the horizontal position in horizontal boxes and the vertical position in vertical boxes.
Syntax
box-pack: start | end | center| justify ;
start - For normal direction boxes, place the first child on the top/left with any extra space on the bottom/right (after the last child). For reverse direction boxes, place last child on the bottom/right with any extra space on the top/left (before the first child.)
end - For normal direction boxes, place last child on the bottom/right with any extra space on the top/left (before the first child.). For reverse direction boxes, place the first child one the top/left with any extra space on the bottom/right (after the last child)
center - Divide any extra space is evenly, with half before and half after the last child.
justify - Divide extra space evenly between each child (no extra space before the first child or after the last child)
Examples:
h1 { box-pack: start; }
.emw3class { box-pack: center; }
#emw3id { box-pack: end; }
Try it:
This is a sample of text with a CSS border. The border helps to display the position of the text DIV. |
(CSS 3) Browser Support: None, use the equivalent -moz-box-align for Firefox and -webkit-box-align for Safari, Opera, and Chrome.
“Surround yourself with people who believe in you” ~ Brian Koslow
Related:
box-pack - MDN Web Docs.
box-align - Align the child elements of a box.
box-direction - The direction in which children of a box are displayed.
box-flex - Whether the children of a box are flexible or inflexible in size.
box-ordinal-group - Display order of the child elements of a box.
box-orient - Position child elements horizontally or vertically.