8/31 학습
flexbox란?
- flexbox인터페이스 내의 아이템 간 공간 배분과 강력한 정렬 기능을 제공하기 위한 1차원 레이아웃 모델
- flex-direction속성으로 주축의 방향 지정 가능
html
<div class="flexbox">
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3
<br>extra
<br>text
</div>
css
div {
border: solid 1px;
}
.flexbox {
display: flex;
width: 100px;
}
css
div {
border: solid 1px;
}
.flexbox {
display: flex;
width: 100px;
flex-direction: row-reverse;
}
- flex-basis : 속성의 크기를 결정. 기본값은 auto로 항목이 크기를 갖는지 확인한다.
- flex-grow : 속성을 지정해 내용물의 크기를(주축 방향으로) flex-basis 이상으로 늘릴 수 있다. 다른 내용물과의 비율 설정 가능. flex-basis에 컨테이너의 남은 공간을 추가로 할당하는 것 같다. flex-basis 가 0px, 각 내용물의 값을 1, 1, 2로 할당하면 1:1:2의 비율로 컨테이너가 채워진다.
html
<div class="flexbox">
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
</div>
css
div {
border: solid 1px;
}
.flexbox {
display: flex;
width: 100px;
}
.one {
/* 기본값: auto 이 경우 사용자가 지정한 값이 있는지 확인 */
flex-basis: 0px;
/* 내용물의 크기를 flex-basis 이상으로 늘린다. 컨테이너가 늘어나지는 않는다. */
flex-grow: 1;
}
.two
{
flex-basis: 0px;
flex-grow: 1;
}
.three
{
flex-basis: 0px;
flex-grow: 2;
}
- align-items: flex 컨테이너에 지정하는 속성이며, 교차축의 정렬방식을 지정한다. 기본값은 stretch.
css
div {
border: solid 1px;
}
.flexbox {
display: flex;
width: 100px;
height: 100px;
/* 주축에 직각인 교차축의 정렬방식 */
align-items: center;
}
.one {
flex-basis: 20px;
}
.two
{
flex-basis: 20px;
}
.three
{
flex-basis: 20px;
}
- justify-content: 주축을 따라 flex항목들을 정렬
css
div {
border: solid 1px;
}
.flexbox {
display: flex;
width: 100px;
height: 100px;
/* 주축의 정렬방식 */
/* 여유 공간을 flex항목 사이의 공간과 시작선, 끝선과 flex항목 사이의 공간을 동일하게 배분*/
justify-content: space-evenly;
}
.one {
flex-basis: 20px;
}
.two
{
flex-basis: 20px;
}
.three
{
flex-basis: 20px;
}
출처
https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
Author And Source
이 문제에 관하여(8/31 학습), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@haribo/831-학습저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)