[HTML/CSS] Flex
2023. 11. 22.ㆍ공부/HTML,CSS
728x90
flex는 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하기 위해 사용한다.
컨테이너에 사용할 수 있는 속성은 flex-direction, justify-content, align-items가 있으며 flex-item에 사용할 수 있는 속성은 flex-grow, flex-shrink,flex-basis가 있다. flex-item에 부여할 수 있는 속성은 축약형으로 사용할 수 있는데, 다음과 같다.
<body>
<div id="container">
<div class="flex-item">A</div>
<div class="flex-item">B</div>
<div class="flex-item">C</div>
</div>
</body>
#flex-container {
display: flex;
border:1px solid black;
padding:10px;
width: 500px;
height: 100px;
flex-direction: row;
justify-content: space-between;
gap:10px;
}
.flex-item {
flex:1;
background-color:gray;
border:1px solid black;
color:white;
font-size: 80px;
text-align: center;
}
#flex-container {
display: flex;
border:1px solid black;
padding:10px;
width: 500px;
height: 100px;
flex-direction: row;
justify-content: space-between;
gap:10px;
}
.flex-item {
flex:1;
background-color:gray;
border:1px solid black;
color:white;
font-size: 80px;
text-align: center;
}
.flex-item:first-child {
flex:2;
}
https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
'공부 > HTML,CSS' 카테고리의 다른 글
| [HTML/CSS] 체크박스 커스텀 (0) | 2023.11.29 |
|---|---|
| [웹접근성] 적절한 대체 텍스트 제공 (1) | 2023.11.28 |
| [HTML/CSS] 반응형 테이블 만들기 (0) | 2023.09.29 |
| [HTML/CSS] 툴팁 만들기 (0) | 2023.06.25 |
| [HTML/접근성] iframe 태그의 반응형 대응 (0) | 2022.12.04 |