이번엔 전 시간에 확인했던 flexbox의 각 속성들을 알아볼게요.
수업은 아래의 링크를 참고합니다.
공부 자료 출처 : https://www.youtube.com/c/%EC%9C%A0%EB%85%B8%EC%BD%94%EB%94%A9
유노코딩
강의/집필/기타 협업 문의 beansdrawer@naver.com 기업 및 기관 출강 가능합니다. 웹 프론트엔드(HTML, CSS, JavaScript, React)/파이썬/C언어 등. 배움의 과정에서 겪는 불필요한 고통들이 사라지길 바라고, 또
www.youtube.com
● flex-direction
● flex-wrap
● justify-content
●align-items
● align-self
● align-content
1. flex-direction
플렉스 컨테이너의 주축을 결정하는 속성입니다.
행은 가로 축을, 열은 세로 축을 주축으로 합니다.
2. flex-wrap
<style>
.parent{
width: 500px; height: 100px; border: 1px solid black;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
.children{
width: 100px; height: 100px; background-color: tomato;
}
.children:nth-child(2){
background-color: teal;
}
</style>
</head>
<body>
<div class="parent">
<div class="children">1</div>
<div class="children">2</div>
<div class="children">3</div>
</div>
</body>
flex-flow는 방향과 줄바꿈 여부를 함께 결정하는 단축속성입니다.
3. justify-content
플렉스아이템들이 플렉스박스 주축을 따라 배치될 때, 요소 사이의 공간을 분배하는 방식을 결정합니다.
주축을 기준으로 해서 주축이 어디서 시작하는지가 중요한 기준이 됩니다.
4. align-items
플렉스 컨테이너의 교차축 위에서 플렉스아이템들이 어떤 식으로 정렬될 것인지를 결정합니다.
너비나 높이가 없이 포함만 되어 있으면 교차 축에 맞춰서 들어갑니다.
5. align-self
각각의 플렉스아이템이 교차축에서 어떤 식으로 정렬될 것인지를 스스로 결정합니다.
6.align-content
교차축 위에서 justify-content와 동일하게 사용할 수 있는 속성입니다.
다음 두 조건이 만족되면서 여유 공간이 있을 때만 동작할 수 있습니다.
● flex-wrap의 값이 wrap으로 지정되어 있을 때
● 아이템을 배치하기 위해 필요한 공간보다 플렉스 컨테이너가 더 클 때
7. flex-grow
플렉스아이템이 기본 크기보다 더 커질 수 있는지를 결정하고, 플렉스 컨테이너
내부에서 할당받을 수 있는 공간을 상대적으로 정의할 수 있는 속성입니다.
8. flex-shrink
플렉스아이템이 기본 크기보다 더 작아질 수 있는지를 결정하고, 플렉스 컨테이너 내부에서 할당받을 수 있는 공간을 상대적으로 정의할 수 있는 속성입니다.
9. flex-basis
플렉스아이템의 초기 크기를 지정합니다. box-sizing이 따로 설정되지 않은 경우, 콘텐츠 박스의 크기를 결정하게 됩니다. 기본값은 auto입니다.
10. flex
flex-grow, flex-shrink, flex-basis
위 세 가지 속성을 정의할 수 있는 단축 속성입니다.
(적혀 있는 순서대로!)
11. order
플렉스 아이템의 배치 순서를 설정할 수 있으며, 지정한 숫자에 맞춰 오름차순으로 배치가 진행됩니다.
코드에 영향을 끼치는 것이 아닌, 보여지는 순서에만 영향을 줍니다.
'HTML · CSS > HTML · CSS 입문 공부일지' 카테고리의 다른 글
| 웹 CSS 입문 공부 18. 상속, 공용키워드, z-index (0) | 2022.11.14 |
|---|---|
| 웹 CSS 입문 공부 17. 선택자(2) (0) | 2022.11.14 |
| 웹 CSS 입문 공부 15. float, position 포지션, 레이아웃 flexbox (0) | 2022.11.14 |
| 웹 CSS 입문 공부 14. 요소 유형 display & borde, 박스 모델 Box-Model (0) | 2022.11.11 |
| 웹 CSS 입문 공부 13. 텍스트 속성, 웹 폰트 설정 (0) | 2022.11.10 |