24일차 - display:flex;

Chaehee Sohn·2022년 9월 29일
CSShtml개발자비전공자
0

국비 개발교육 일지

목록 보기
23/28

flex

<style>
      #container {
        margin: 0 auto;
        width: 500px;
        height: 300px;
        border: 3px solid red;
        display: flex;
        flex-wrap: nowrap;
        /* 줄바꿈방지 */
      }
      #container > div {
        float: left;
        width: 200px;
        border: 1px solid rgb(7, 7, 7);
      }
      h2 {
        font-size: 40px;
        padding: 20px;
      }
    </style>
  </head>
  <body>
    <h2>flex - flex-wrap</h2>
    <div id="container">
      <div id="box1">
        <h2>1</h2>
      </div>
      <div id="box2">
        <h2>2</h2>
      </div>
      <div id="box3">
        <h2>3</h2>
      </div>
    </div>
  </body>

flex wrap

flex wrap: nowrap;

  • default
  • will not wrap

flex wrap: wrap;

  • will wrap, if necessary

flex wrap: wrap-reverse;

  • will wrap, if necessary, in reverse order

justify-content (수평 방향 정렬 방식)

<style>
      #container > div {
        width: 200px;
        border: 1px solid rgb(7, 7, 7);
      }
      h2 {
        font-size: 40px;
        padding: 20px;
      }
      h3 {
        text-align: center;
      }
      .wrapper {
        width: 500px;
        height: 50px;
        margin: 0 auto;
        border: 3px solid red;
        display: flex;
      }
      .wrapper > div {
        width: 100px;
        border: 2px solid #000;
        background-color: aqua;
      }
      #container1 {
        justify-content: flex-start;
        /* 좌로 정렬 */
      }
      #container2 {
        justify-content: flex-end;
        /* 우로 정렬 */
      }
      #container3 {
        justify-content: center;
        /* 가운데정렬 */
      }
      #container4 {
        justify-content: space-between;
        /* 아이템과 아이템 사이의 여백 */
      }
      #container5 {
        justify-content: space-around;
        /* 아이템 기준 좌,우로 동등한 여백 */
      }
      #container6 {
        justify-content: space-evenly;
        /* 동등한 여백의 크기 */
      }
    </style>
  </head>
  <body>
    <h2>flex - justify-content</h2>
    <h3>justify-content:flex-start(기본값)</h3>
    <div id="container1" class="wrapper">
      <div id="box1">
        <p>1</p>
      </div>
      <div id="box2">
        <p>2</p>
      </div>
      <div id="box3">
        <p>3</p>
      </div>
    </div>
    <h3>justify-content:flex-end</h3>
    <div id="container2" class="wrapper">
      <div id="box1">
        <p>1</p>
      </div>
      <div id="box2">
        <p>2</p>
      </div>
      <div id="box3">
        <p>3</p>
      </div>
    </div>
    <h3>justify-content:center</h3>
    <div id="container3" class="wrapper">
      <div id="box1">
        <p>1</p>
      </div>
      <div id="box2">
        <p>2</p>
      </div>
      <div id="box3">
        <p>3</p>
      </div>
    </div>
    <h3>justify-content:space-beteeen</h3>
    <div id="container4" class="wrapper">
      <div id="box1">
        <p>1</p>
      </div>
      <div id="box2">
        <p>2</p>
      </div>
      <div id="box3">
        <p>3</p>
      </div>
    </div>
    <h3>justify-content:space-around</h3>
    <div id="container5" class="wrapper">
      <div id="box1">
        <p>1</p>
      </div>
      <div id="box2">
        <p>2</p>
      </div>
      <div id="box3">
        <p>3</p>
      </div>
    </div>
    <h3>justify-content:evenly</h3>
    <div id="container6" class="wrapper">
      <div id="box1">
        <p>1</p>
      </div>
      <div id="box2">
        <p>2</p>
      </div>
      <div id="box3">
        <p>3</p>
      </div>
    </div>
  </body>

align-items (수직 방향 정렬 방식)

<style>
      h2 {
        font-size: 40px;
        padding: 20px;
      }
      h3 {
        text-align: center;
      }
      .wrapper {
        width: 500px;
        height: 200px;
        margin: 0 auto;
        border: 3px solid red;
        display: flex;
      }
      .wrapper > div {
        width: 100px;
        border: 2px solid #000;
        background-color: aqua;
      }
      #container1 {
        align-items: stretch;
        /* default. items are stretched to fit the container */
      }
      #container2 {
        align-items: flex-start;
  		/* 컨테이너의 top(제일 상단)에 정렬 */
      }
      #container3 {
        align-items: flex-end;
 		/* 컨테이너의 bottom(제일 하단)에 정렬 */
      }
      #container4 {
        align-items: center;
  		/* 컨테이너의 middle(중앙)에 정렬 */
      }
      #container5 {
        align-items: baseline;
    	/* 컨테이너의 기준선에 맞춰 정렬 */
      }
    </style>
  </head>
  <body>
    <h2>flex - align-items</h2>
    <h3>align-items : stretch(기본값)</h3>
    <div id="container1" class="wrapper">
      <div id="box1">
        <p>1</p>
      </div>
      <div id="box2">
        <p>2</p>
      </div>
      <div id="box3">
        <p>3</p>
      </div>
    </div>
    <h3>align-items : flex-start</h3>
    <div id="container2" class="wrapper">
      <div id="box1">
        <p>1</p>
      </div>
      <div id="box2">
        <p>2</p>
      </div>
      <div id="box3">
        <p>3</p>
      </div>
    </div>
    <h3>align-items : flex-end</h3>
    <div id="container3" class="wrapper">
      <div id="box1">
        <p>1</p>
      </div>
      <div id="box2">
        <p>2</p>
      </div>
      <div id="box3">
        <p>3</p>
      </div>
    </div>
    <h3>align-items : center</h3>
    <div id="container4" class="wrapper">
      <div id="box1">
        <p>1</p>
      </div>
      <div id="box2">
        <p>2</p>
      </div>
      <div id="box3">
        <p>3</p>
      </div>
    </div>
    <h3>align-items : baseline</h3>
    <div id="container5" class="wrapper">
      <div id="box1">
        <p style="font-size: 50px"><a href="#">1</a></p>
      </div>
      <div id="box2">
        <p style="font-size: 25px">2</p>
      </div>
      <div id="box3">
        <p style="font-size: 19px">3</p>
      </div>
    </div>
  </body>

flex-direction

<style>
      h2 {
        font-size: 40px;
        padding: 20px;
      }
      h3 {
        text-align: center;
      }
      .wrapper {
        width: 500px;
        height: 200px;
        margin: 0 auto;
        border: 3px solid red;
        display: flex;
      }
      .wrapper > div {
        width: 100px;
        border: 2px solid #000;
        background-color: rgb(252, 217, 235);
      }
      #container1 {
        display: flex;
        flex-direction: row;
        /* default. items are displayed horizontally, as a row */
      }
      #container1-2 {
        display: flex;
        flex-direction: row-reverse;
        /* same as row, but in reverse order */
      }
      #container2 {
        display: flex;
        flex-direction: column;
        /* items are displayed vertically, as a column */
      }
      #container2-2 {
        display: flex;
        flex-direction: column-reverse;
        /* same as column, but in reverse order */
      }
    </style>
  </head>
  <body>
    <h2>flex - flex-direction</h2>
    <h3>flex-direction:row</h3>
    <div id="container1" class="wrapper">
      <div id="box1">
        <p>1</p>
      </div>
      <div id="box2">
        <p>2</p>
      </div>
      <div id="box3">
        <p>3</p>
      </div>
    </div>
    <h3>flex-direction:row-reverse</h3>
    <div id="container1-2" class="wrapper">
      <div id="box1">
        <p>1</p>
      </div>
      <div id="box2">
        <p>2</p>
      </div>
      <div id="box3">
        <p>3</p>
      </div>
    </div>
    <h3>flex-direction:column</h3>
    <div id="container2" class="wrapper">
      <div id="box1">
        <p>1</p>
      </div>
      <div id="box2">
        <p>2</p>
      </div>
      <div id="box3">
        <p>3</p>
      </div>
    </div>
    <h3>flex-direction:column-reverse</h3>
    <div id="container2-2" class="wrapper">
      <div id="box1">
        <p>1</p>
      </div>
      <div id="box2">
        <p>2</p>
      </div>
      <div id="box3">
        <p>3</p>
      </div>
    </div>
  </body>

align-self

<style>
        h2 {
            font-size: 40px;
            padding: 20px;
        }
        h3 {
            text-align: center;
        }
        .wrapper {
            width: 500px;
            height: 200px;
            margin: 0 auto;
            border: 3px solid red;
            display: flex;
            align-items: center;
        }
        .wrapper>div {
            width: 100px;
            border: 2px solid #000;
            background-color: aqua;
        }
        .wrapper>div#box1 {
            width: 100px;
            border: 2px solid #000;
            background-color: aqua;
            align-self: flex-end;
        }
        #box1 {
            order: 2
        }
        #box2 {
            order: 3
        }
        #box3 {
            order: 1
        }
    </style>
</head>
<body>
    <h2>flex - align-items</h2>
    <h3>align-items : stretch(기본값)</h3>
    <div id="container1" class="wrapper">
        <div id="box1">
            <p>1</p>
        </div>
        <div id="box2">
            <p>2</p>
        </div>
        <div id="box3">
            <p>3</p>
        </div>
    </div>
</body>
  • align-items 속성보다 우선 적용된다
  • flex 요소마다 서로 다른 align 속성값을 설정할 수 있다

flex-grow

<style>
      h2 {
        font-size: 40px;
        padding: 20px;
      }
      h3 {
        text-align: center;
      }
      .wrapper {
        width: 100%;
        height: 200px;
        margin: 0 auto;
        border: 3px solid red;
        display: flex;
      }
      .wrapper > div {
        width: 500px;
        border: 2px solid #000;
        background-color: aqua;
        display: flex;
      }
      /* 요소의 여백 비율 확대하기 */
      #box1 {
        flex-grow: 0;
        default=원래크기 
      }
      #box2 {
        flex-grow: 2;
      }
      #box3 {
        flex-grow: 1;
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <div id="box1">
        <p>1</p>
      </div>
      <div id="box2">
        <p>2</p>
      </div>
      <div id="box3">
        <p>3</p>
      </div>
    </div>
  </body>

flex-shrink

/* 요소의 여백 비율 다르게 축소하기 */
      #box1 {
        flex-shrink: 3;
      }
      #box2 {
        flex-shrink: 2;
      }
      #box3 {
        flex-shrink: 1;
      }
profile
Chaehee Sohn
손체리
이전 포스트

23일차-단위

다음 포스트

25일차 - 새로운 코딩

0개의 댓글