front_end/css-sass

flexbox alignment 01 (justify-content)

joepasss 2022. 4. 6. 21:06

플렉스박스 안의 자식 요소를 정렬하는 방법

justify-content
align-items
align-content

mainAxis 상에서 자식 요소를 조작 => justify-content

crossAxis 상에서 자식 요소를 조작 => align-items, align-content

(Row (default)일 때 row 방향이 mainAxis, column 방향이 crossAxis)

Setup / apply 방법

플렉스박스 내 자식 요소들을 조작하는 property이니 부모 요소에 적용하면 된다

html 셋업

<div className='Container'>
      <ul>
        <li>1st Child</li>
        <li>2nd Child</li>
        <li>3rd Child</li>
        <li>4th Child</li>
      </ul>
    </div>

css 셋업

/*  flexbox container  */
ul {
  background-color: lightslategray;
  padding: 20px;
  height: 300px;
  display: flex;
  flex-wrap: wrap;
  
  justify-content: flex-start; /* alignment 적용부분 */
 }
 
 /*  flexbox child */
 li {
   list-style: none;
    color: white;
    background-color: #20b2aa;
    margin: 20px;
    padding: 10px;
    width: 100px;
    font-size: 20px;
    text-align: center;
    }

mainAxis가 row, crossAxis가 column인 상황 (flex-direction: row (default))에서 설명