코딩 매거진 프로젝트에서
float를 이용해서 했던것처럼
이렇게 똑같은 구도로 만들어주는걸 했다.
flex가 훨씬 간단했는데 일단
div로 article하고 aside부분을 감싸주고
그 클래스(여기서는 row로 지정)를 플렉스 컨테이너로 만들어줬다!
.row {
display: flex;
align-items : flex-start;
gap: 75px;
margin-bottom: 60px;
}요런식으로 했더니 아주 간편하게 저렇게 만들어짐 ㅎㅎ
저기서 align-items을 해주기 전에는
옆에 aside부분도 똑같은 길이로 쭉 늘어져있었는데
flex-start을 해주니 저렇게 되었다.
흠 근데 왜 flex-start를 해주니 이렇게 달라졌는지가 좀
의문이다.... 흐음 ... ?
이건 좀 더 고민을 해보자!!!!
aside {
/* DEFAULTS:
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
*/
flex: 0 0 300px;
}aside는 이렇게 함으로써 width를 설정해줄 수 있었다.
article에는
article{
flex: 1;
margin-bottom: 0;
}이렇게 했더니 알아서 width가 맞춰지는 매직이...
flex-grow에 1로 설정된거같은데
이렇게 하면 알아서 사이즈가 맞춰지나봄..
흠 솔직히 내가 지금듣고있는 강의가
제일 중요한 flex부분에서 좀 미흡한 점이 있는거 같다.
자세히 하나하나씩 알려주면 좋겠는데
그냥 넘어가는 부분들이 있는듯..
그래서 일단 질문하는곳에 질문을 올렸는데
질문도 답변 해줄때가 있고 안해줄때가 있고 복불복인지라..휴
