CODEWITHSUNDEEP
css
Raji A C
Raji A C

Reputation: 2351

difference between box-pack and box-align in css

anyone please point out the difference between box-align and box-pack

following is my code.it works same with both box-align and box-pack.


    div
    {
   width:100px;
   height:100px;
   background:orange;
   display:-webkit-box;
   -webkit-box-align:start;
    }

Upvotes: 3

Views: 7136

Answers (2)

HalfWebDev
HalfWebDev

Reputation: 7648

BOX-PACK is used to pack the contents horizontally. The values of box-pack are

Start - Aligns to the the left and leaves any space to the right.

Center- Aligns center dividing the space equally on both sides.

End- Aligns right...

Justify- Divides the space equally between the child elements.

BOX ALIGN is for vertical adjustments in simple terms.

box-align: start | center | end | baseline | stretch /* As specified */

Upvotes: 0

Ahsan Khurshid
Ahsan Khurshid

Reputation: 9469

-webkit-box-pack

Specifies alignment of child elements within the current element in the direction of orientation.

For elements whose children are aligned horizontally, a packing value of start indicates left alignment with extra space towards the right side, a value of end indicates right alignment with extra space to the left, a value of center indicates center alignment with extra space split evenly on either side, and a value of justify indicates that the outer elements should be aligned on the left and right, with space added evenly between the elements.

Syntax

-webkit-box-pack: <alignment>;

Values:

<alignment> The alignment of child elements.

center: Child elements are aligned to the center of the element.

end: Child elements are aligned to the end of the element.

justify: Child elements are justified with both the start and end of the element.

start: Child elements are aligned to the start of the element.

-webkit-box-align

Specifies the alignment of nested elements within an outer flexible box element.

This property specifies the horizontal alignment if the box direction is vertical, and vice versa. This property applies only to flexible box layouts. For more information about flexible boxes, see http://www.w3.org/TR/css3-layout/.

Syntax

-webkit-box-align: baseline | center | end | start | stretch;

Values:

baseline: Elements are aligned with the baseline of the box.

center: Elements are aligned with the center of the box.

end: Elements are aligned with the end of the box.

start: Elements are aligned with the start of the box.

stretch: Elements are stretched to fill the box.

Upvotes: 1

Related Questions