What's the difference between the alignment values of start, flex-start, and self-start?
CSS Layout News
flex-start vs start의 차이는 뭘까?
잘 쓰지는 않지만 그래도 궁금한 CSS 속성. align-items: flex-start와 align-itmes: start는 무슨 차이일까?
https://csslayout.news/whats-the-difference-between-the-alignment-values-of-start-flex-start-and-self-start/
핵심 요약
- flex-start는 컨테이너의 방향을 따라가고, start는 글자모드의 방향을 따라간다.
ex) 글자순서가 ltr(left to right) 이고 flexbox가 row-reverse라면,
flex-start: flexbox의 방향을 따르므로 오른쪽에 배치된다. [ 2 1 ]. (row-reverse 이니까)
start: 글자순서가 ltr이므로 왼쪽에 배치된다. 그러나 row-reverse이므로 컨텐츠 순서는 뒤집혀있다. [ 2 1 ]
설명보다 그냥 눈으로 실제로 보는게 더 이해하기 빠르므로 본문은 꼭 한번씩 읽어 보시길 바랍니다.
ps. 자매품 flex-start vs self-start도 잘 설명되어 있습니다.
다음 내용이 궁금하다면?
이미 회원이신가요?
2023년 8월 30일 오후 3:11
댓글 1
placeholder의 line 수가 중간에 변하면 cursor와 위치가 안맞는 문제가 발생했는데 flex-start로 해결했다는군요
함께 읽은 게시물
6년간의 토이프로젝트 여정을 마무리하며 - 기술블로그 구독서비스 회고록
안
... 더 보기
고용노동부에서 주관하는 청년미래플러스 3기를 모집 중이라고 합니다.
구직자와 재직자 두 가지 트랙을 동시에 모집한다고 하네요.
모집 기간: 6월 15일 ~ 8월 3일
< 가장 예쁜 사람이 아니라, 1등 할 사람에게 투표하라 >
1. 유명한 경제학자 케인스는 단기 투자 전략을 미인선발대회에 비유했다.
기술, 개발 학습 자료 7가지
최근 자주 사용하고 있는 기술, 개발 및 자기 계발 학습 자료를 모아서 공유합니다.
1️⃣ Educative.io
퀄리티가 상당히 높은 기술 관련 코스가 많은 것 같아요. 현재까지 코스 3개를 들었습니다. 책처럼 읽으면서 배우는 코스라 듣는 것보다 읽으면서 학습하는 걸 선호하는 분들에게 추천합니다. 주제를 깊이 파고들고 코드나 설계 예시가 많아서 잘 사용하는 것 같습니다. 최근에 Concurrency관련 코스를 듣고 있습니다.
https://www.educative.io/
2️⃣ Designing Data Intensi... 더 보기
