flexbox

HTML

<div class="box">
  <div>One</div>
  <div>Two</div>
  <div>Three
    <br>has
    <br>extra
    <br>text
  </div>
</div>

CSS

.box {
  display: flex;
}

 

flex-direction 지정

• row
• row-reverse
• column
• column-reverse

row	row-reverse
column	column-reverse

 

flex-wrap을 이용한 복수 행 flex 컨테이너 지정

항목이 여러 행에 나열	flex-wrap: wrap;
flex 항목들은 컨테이너의 폭에 맞게	flex-wrap: nowrap ;

 

flex-flow

• flex-direction 속성과 flex-wrap 속성을 합침
• 첫 번째 값은 flex-direction이고 두 번째 값은 flex-wrap

flex-flow: row wrap;
flex-flow: row-reverse wrap;
flex-flow: row nowrap;
flex-flow: row-reverse nowrap;
flex-flow: column wrap;
flex-flow: column-reverse wrap;

 

 

<자료출처>

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox

flexbox의 기본 개념 - CSS: Cascading Style Sheets | MDN

 

 

https://developer.mozilla.org/ko/docs/Web/CSS/flex

flex - CSS: Cascading Style Sheets | MDN

 

https://www.w3schools.com/css/css3_flexbox.asp

W3Schools.com