inflearn logo
강의

Course

Instructor

[Code Camp] Powerful CSS

float layout

diary-date 부분 질문

Resolved

314

yh

12 asked

0

여기서 display:flex; 입력시 왜 text -align은 적용안되는지 궁금합니다!

 .diary-date{
   
    font-size:14px;
    color:gray;
    text-align:right;
}

HTML/CSS

Answer 1

0

nwd09074926

안녕하세요! yh님!

display: flex; 특성을 주시게 되면, flex-direction: row; 가 기본값이 됩니다.

다시말해, display: flex;를 주시는 순간 내부에 포함된 자식들이 1줄로 다닥다닥 붙게 됩니다

따라서, 오른쪽정렬이 되었지만 가로넓이가 없으므로 정렬이 되지 않은 것 처럼 보이는 거예요!

아래는 예시 그림입니다!

image

직접 확인까지 해보고 싶으시다면, flex-direction: column;을 강제로 줘보세요!
그러면, 자식 1개가 1줄 전체를 차지하는 구조로 변경되기 때문에 오른쪽 정렬이 의미가 있게 되겠죠?!
아래는 관련 그림입니다.
image

background vs background-color

0

27

1

노션 자료위치

0

85

2

강의 수강 후 실습

0

327

1

강의 내용과 같은 작업을 쉽게 도와주는 라이브러리 같은 것도 있나요?

1

311

1

강의학습시 작성한 코드를 블로그에 올려도 될까요?

0

394

2

안녕하세요 이미지 관련해서 질문이 있습니다,

0

365

1

codepen질문입니다.

0

304

2

transition질문있습니다~

0

349

1

섹션 5. position 강의 중 absolute와 relative의 사용법에 대한 질문 있습니다!

0

225

1

노션 학습 링크

0

374

1

반응형 실습

0

284

2

@media 미디어 쿼리 적용 안되는 이유

0

1262

1

35분 강의 내용중 :after 사용관련

0

270

2

코드캠프 로드맵 이후 질문사항

0

328

1

transform 3번째 강의 질문

0

313

1

강의자료

0

470

1

학습자료 요청건

0

396

1

레이아웃 질문드려요~

0

384

1

vscode 새로운 폴더 불러오기

0

391

1

grid속성 6:36에 나오는 것.

0

318

1

left:calc(100% - 100px) 질문드립니다.

0

734

1

텍스트박스안에서 padding-bottom 이 이렇습니다

0

400

2

단위심화 강의 중 질문 있습니다.

0

345

1

영상 중간 생략

0

319

1