CSS justify-self 属性

Definition and Usage

Ang property na justify-self ay nag-aalinhin ang item ng grid sa loob ng kanyang kawatang grid sa direksyong inlin.

Para sa pahina na may Ingles, ang direksyong inlin ay mula sa kaliwa papunta sa kanan, ang direksyong bloke ay mula itaas papunta sa ilalim.

Upang magkaroon ng anumang epekto ng alinhamentong ito, ang item ng grid ay dapat may magagamit na espasyo sa paligid ng kanyang sarili sa direksyong inlin.

Tip:Kung gusto mong alinhin ang item ng grid sa direksyong bloke sa halip ng direksyong inlin, gamitin ang: align-self property O align-items property Properties.

Mga hilingin pa:

CSS Tutorial:CSS Grid

CSS Tutorial:CSS Positioning

CSS Reference Manual:align-content property

CSS Reference Manual:align-items property

CSS Reference Manual:align-self property

CSS Reference Manual:direction property

CSS Reference Manual:grid property

CSS Reference Manual:grid-template-columns property

CSS Reference Manual:position property

CSS Reference Manual:writing-mode property

Mga hilingin pa:

Sample

Halimbawa 1

Alinhahin ang item ng grid sa kanan ng kanyang kawatang grid

.red {
  display: grid;
  justify-self: kanan;
}

Try It Yourself

Halimbawa 2: paghahambing ng justify-self at justify-items

I-set ang alinhamentong itinuturing ng container bilang 'gitnang', ang item ng grid ay itinuturing na 'kanan'. Ang halaga ng property 'kanan' ang nagiging pangunahin:

#container {
  display: grid;
  justify-items: gitnang;
}
.blue {
  justify-self: kanan;
}

Try It Yourself

Halimbawa 3: I-set ang justify-self sa item na may posisyon na absolute

I-set ang alinhamentong itinuturing ng item na may posisyon na absolute na 'kanan':

#container {
  display: grid;
  position: relative;
}
.red {
  position: absolute;
  justify-self: kanan;
}

Try It Yourself

Halimbawa 4: writing-mode

Kapag ang halaga ng writing-mode property ng elemento ng grid container ay itinalaga na vertical-rl, ang direksyong inlin ang nakaliliko. Ang resulta ay ang punto ng simula ng container ay lumipat mula sa kaliwa papunta sa itaas, ang punggol ng container ay lumipat mula sa kanan papunta sa ilalim:

#container {
  display: grid;
  writing-mode: vertical-rl;
}
.blue {
  justify-self: end;
}

Try It Yourself

Example 5: direction

When the direction attribute of the grid container element is set to 'rtl', the inline direction is from right to left. The result is that the container's starting point moves from the left to the right, and the container's end moves from the right to the left:

#container {
  display: grid;
  direction: rtl;
}
.blue {
  justify-self: end;
}

Try It Yourself

CSS Syntax

justify-self: auto|normal|stretch|Positional Alignment|Overflow-alignment|Baseline Alignment|initial|inherit;

Attribute Value

Value Description
auto Default. Inherit the justify-self attribute value of the grid container.
normal

Depends on the layout context, but similar to the 'stretch' of grid items in grid layout when size is not set.

If size is set, the behavior of the attribute value is similar to 'start'.
stretch Stretches to fill the grid cell if inline-size (width) is not set.
start Aligns the item at the beginning of the inline direction.
left Aligns the item to the left.
center Aligns the item to the center.
end Aligns the item at the end of the inline direction.
right Aligns the item to the right.
Overflow-alignment
  • 'safe' will set the alignment of the item to 'start' if the content overflows.
  • 'unsafe' maintains the alignment value regardless of whether the content overflows.
Baseline Alignment Aligns the element with the baseline of its parent element.
initial Sets this property to its default value. See initial.
inherit Inherits this property from its parent element. See inherit.

Technical Details

Default Value: auto
Inheritance: No
Animation Creation: Not supported. See:Animation-related properties.
Version: CSS3
JavaScript Syntax: object.style.justifySelf="right"

Browser Support

Table numbers indicate the first browser version that fully supports this attribute.

Chrome Edge Firefox Safari Opera
Chrome IE / Edge Firefox Safari Opera
57.0 16.0 45.0 10.1 44.0