23_09_26 CSS공부정리

https://www.youtube.com/watch?v=2htMvJdW9O0&t=471s 

[생활코딩] flexbox

-display:flex를 지정하면 콘텐츠가 다음과같이 바뀜

flex지정 전

부모 태그(div container)에 flex지정후

-부모태그에 height를 지정하면 그에 따라 자식태그도 같이 늘어남

-ol태그에 width값 을 지정하면 너비도 조절가능.(but width보다 flex-basis를 더 많이 사용함)

.container의 height : 300px / ol의 width : 100px

-flex-basis를 width와 동일하게 사용할 수 있음

flex-basis : 100px;

-justify-content : center(end) = 부모태그에 입력해서 안의 내용들을 가운데(오른쪽)정렬할 수 있음

justify-content : center;

 -flex-direction : row(column) = flex 방향을 지정 / row냐 colum이냐에 따라 이후의 속성값이 다르게 동작함

-row = 하나의 행에 자식들을 수평으로 배치(행의 방향으로 배치. →)

-column = 하나의 column에 자식들을 수직으로 배치한다. (열의 방향으로 배치. ↓)

flex-direction : row 세로방향

flex-direction : column 가로방향

-justify-content : end를 했을때 row와 column은 다음과 같이 표현됨 / 주축배치

위쪽이미지 : row 행의 끝방향 / 아래쪽이미지 : column 열의 끝방향

주축과 교차축

-justify-content의 속성은 주축을 기준으로 배치하는것을 결정한다

-start, end, center, space-around 등을 값으로 지정할 수 있다.

https://developer.mozilla.org/ko/docs/Web/CSS/justify-content

justify-content - CSS: Cascading Style Sheets | MDN

-align-items = 교차축방향으로 정렬하는 속성( align-items : stretch 가 기본)

align-items : stretch;

align-items : start;

align-items : end;

align-items : center;

-justify-content와 align-items를 center로 하면 가운데정렬을 쉽게 할 수 있음

justify-content: center; / align-items : center;

-flex-basis : 주축방향으로 크기를 증가시킴

flex-basis : 30px/60px/90px을 각각 적용

-flex-grow : 주축방향으로 여백을 남김 없이 활용하도록 하는 속성(여백이 많을때 사용하는 속성)

-아래 예시는 flex-grow를 통해 div one,two,three 를 1:2:3 비율로 맞춤

flex-grow : 1/2/3을 각각적용

-flex-basis와 flex-grow를 같이 활용하는 예시

div three에 flex-grow값을 1로 주면서 나머지 여백을 모두 차지하게 함

해당 코드

        .one{

            border:10px solid blue;

            flex-basis :30px;

            flex-grow : 0;

        }

        .two{

            border:10px solid green;

            flex-basis :60px;

            flex-grow : 0; //여기서 1을 주면 two와 three가 one이 차지한 공간을 제외하고 나머지공간을 1:1로 가져감

        }

        .three{

            border:10px solid pink;

            flex-basis :90px;

            flex-grow : 1; //1을 줌으로써 나머지 여백을 다 차지하게 만듬

        }

-flex-shrink 

원래는 페이지 창이 줄어들면서 flex박스들은 비율에 맞게 크기가 조정됨.

이 크기조정에 대해 박스들이 줄어드는 비율을 조정하는 속성.

다양한값을 지정하여 줄어드는 비율을 설정가능(ex)0,1,2,3..)

        .one{

            border:10px solid blue;

            flex-basis :200px;

            /* flex-grow : 0; */

            flex-shrink : 0; //페이지가 작아져도 줄어들지 않는 박스

        }

        .two{

            border:10px solid green;

            flex-basis :200px;

            /* flex-grow : 1; */

            flex-shrink : 0; //페이지가 작아져도 줄어들지 않는 박스

        }

        .three{

            border:10px solid pink;

            flex-basis :300px;

            flex-shrink : 1; //페이지가 작아지면 줄어드는 박스

            /* flex-grow : 1; */

        }

        .one{

            border:10px solid blue;

            flex-basis :300px;

            /* flex-grow : 0; */

            flex-shrink : 1;

        }

        .two{

            border:10px solid green;

            flex-basis :300px;

            /* flex-grow : 1; */

            flex-shrink : 1;

        }

        .three{

            border:10px solid pink;

            flex-basis :600px;

            flex-shrink : 2; 

            /* flex-grow : 1; */

        } //1:1:2의 비율로 줄어드는 박스들을 볼 수 있음

-basis : 기본크기 / grow : 남는 여백 분배 / shrink : 부족한 여백을 어떻게 각출할것인가

 

-flex-wrap = 여백이 부족할때 박스를 줄바꿈해주는 기능. 부모태그에 flex-wrap:wrap;을 통해 가능

축소전(row방향)

 

축소후. three박스가 여백이 없어 밑으로 줄바꿈 됨.

        .container{

            display : flex;

            /* justify-content: center; */

            /* align-items : center; */

            flex-wrap : wrap; //해당 부분. 부모태그에 붙여야함.

            height: 300px;

            border:10px solid red;

            margin: 10px;

        }

        .row {

            flex-direction: row;

        }

        .one{

            border:10px solid blue;

            flex-basis :300px;

            /* flex-grow : 0; */

            /* flex-shrink : 1; */

        }

        .two{

            border:10px solid green;

            flex-basis :300px;

            /* flex-grow : 1; */

            /* flex-shrink : 1; */

        }

        .three{

            border:10px solid pink;

            flex-basis :600px;

            /* flex-shrink : 2; */

            /* flex-grow : 1; */

        }

-키워드

display : flex = 부모태그에 넣기

justify-content = 주축방향으로 배치

align-items = 교차축방향으로 배치

flex-direction : row, column = flex박스들이 배치될 방향결정

flex-basis = 기본크기 크기결정

flex-grow = 남는 여백 분배

flex-shrink = 줄어드는 비율설정

flex-wrap = 페이지축소시 줄바꿈설정 (부모태그에)

 

-활용방안

사진첩에 들어갈 사진들을 flex박스로 지정하면 좋을것 같다.