CSS에서 align-self 속성을 기본값으로 설정하는 방법은 무엇입니까?

CSS 또는 Cascading Style Sheets는 웹 페이지에서 요소를 정렬 및 위치 지정하기 위한 속성 집합을 제공하는 강력한 도구입니다. align-self 속성은 Flex 컨테이너 내의 개별 Flex 항목 정렬을 조정하기 위해 CSS에서 사용할 수 있는 많은 속성 중 하나입니다. 기본적으로 align-self는 자동으로 설정됩니다. 즉, 요소가 상위 컨테이너의 정렬을 상속합니다. 그러나 align-self 속성을 설정하여 개별 Flex 항목에 대해 이 동작을 변경할 수 있습니다.

으아아아

CSS의 align-self 속성

align-self 속성을 기본값으로 재설정하는 방법을 논의하기 전에 align-self가 무엇인지 이해하는 것이 중요합니다. align-self 속성은 flex 속기 속성의 하위 속성으로, 컨테이너의 가로 축을 따라 단일 플렉스 항목을 정렬하는 데 사용됩니다. align-self 속성의 기본값은 auto이며, 이는 요소가 상위 컨테이너의 align-items 속성을 상속하도록 합니다. align-self 속성은 다음 값 중 하나로 설정할 수 있습니다. -

• 자동(기본값),

• Flex 출시,

• 플렉스 사이드,

• 센터,

• 기준선 및

• 스트레칭

align-self 속성을 자동 이외의 값으로 설정하면 해당 특정 요소에 대한 컨테이너의 align-items 속성이 재정의됩니다.

CSS에서 align-self를 기본값으로 재설정

align-self 속성을 기본값으로 재설정하려면 요소의 CSS 선언에서 해당 속성의 auto 값을 제거하면 됩니다. 예를 들어

으아아아

선언에서 align-self 속성이 제거되면 기본값으로 재설정됩니다.

으아아아

이제 CSS에서 align-self 속성을 기본값으로 재설정하는 몇 가지 예를 살펴보겠습니다.

자동 값 사용

align-self 속성을 기본값으로 재설정하는 쉬운 방법은 자동으로 설정하는 것입니다. align-self 값이 auto로 설정되면 Flex 항목은 Flex 컨테이너에 설정된 align-items 속성 값에 따라 정렬됩니다.

예

이 예에서는 auto 값을 사용하여 .div1 또는 .div3 클래스가 없는 모든 .item 요소를 선택하고 align-self 속성을 auto로 설정합니다. 이렇게 하면 .div1, .div3 및 요소에만 사용자 정의 align-self 값이 포함됩니다.

으아아아

:not() 선택기 사용

:not() 선택기는 align-self 속성을 기본값으로 재설정하는 또 다른 방법입니다. 이 선택기를 사용하면 특정 기준을 충족하지 않는 모든 요소를 ​​선택할 수 있습니다. :not() 선택기를 사용하면 특정 align-self 값을 적용하려는 요소를 제외한 모든 요소를 ​​선택할 수 있습니다.

예

이 예에서는 :not() 선택기를 사용하여 .box1 또는 .box3 클래스가 없는 모든 .item 요소를 선택하고 align-self 속성을 auto로 설정합니다. 이렇게 하면 .box1, .box3 및 요소에만 사용자 정의 align-self 값이 포함됩니다.

으아아아

결론

align-self 속성은 Flex 컨테이너 내에서 Flex 항목의 수직 정렬을 설정하는 강력한 도구입니다. 그러나 때로는 CSS의 align-self 속성을 기본값으로 재설정해야 할 수도 있습니다. align-self 속성을 기본값인 auto로 재설정하거나 대신 align-items를 사용하면 CSS를 단순화하고 정렬 문제를 피할 수 있습니다.

위 내용은 CSS에서 align-self 속성을 기본값으로 설정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!