[CSS] flexbox, flex, justify, Vendor Prefix

allrouvel 2024. 2. 22. 18:19

2024. 2. 22. 18:19

728x90

Vendor Prefix
웹 브라우저 공급자가 새로운 기능을 제공할 때 이전 버전의 웹브라우저에 그 사실을 알려주기위해 사용하는 접두어(prefix)를 의미함. **높은 버전의 브라우저들은 대부분의 기능이 제공되므로 프리픽스를 사용할 필요가 없다.
프리픽스를 사용해야하는 경우 - CSS권고 안에 포함이 되지 못한 기능인 경우 - CSS권고 안에는 포함되어 있지만 완벽하게 제정된 상태가 아닌 기능인 경우 - 해당 기능이 포함되어 있지 않은 이전 버전의 웹브라우저인 경우
프리픽스 형식 -벤더프리픽스명-속성명 또는 -벤더프리픽스명-속성값
웹브라우저별 벤더 프리픽스 Browser : Vendor Prefix IE, Edge Browser : -ms- Chrome, Android Browser, Chrome for Android, Safari, iOS Safari Browser : -webkit- Firefox Browser : -moz- Opera Browser : -o-
display : -webkit-flex; */ display: flex; 단독으로 사용불가

flex
flex-wrap: wrap; wrap(<>nowrap): 줄바꿈 처리 하라, 컨텐츠가 깨지기 전까지
flex-direction: row; left기준
flex-direction: row-reverse; right기준
flex-direction: column; top기준 -wrap처리가 되지 않음 box밖으로 출력됨
flex-direction: column-reverse; bottom기준
부모박스에 속성값을 부여해야 한다.
flexbox내 컨텐츠 height 미지정시 box height만큼 커진다. width > 컨텐츠 크기만큼

ㅁㄴㄹ

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS3 Flexible Box Layout</title>
    <style>
      .flexbox {
        background-color: dimgray;
        width: 400px;
        height: 350px;
        border-radius: 15px;
        display: -webkit-flex;
        /* vender prefix */
        display: flex;
        flex-wrap: wrap;
        /* wrap(<>nowrap): 줄바꿈 처리 하라, 컨텐츠가 깨지지 전까지 */
      }

      #row_reverse {
        /* -webkit-flex-direction: row-reverse; */
        flex-direction: row-reverse;
      }

      .item {
        background-color: darkgray;
        border-radius: 10px;
        width: 80px;
        height: 50px;
        /* padding: 20px; */
        /* margin: 10px; */
        color: white;
        font-size: 26px;
        text-align: center;
        line-height: 50px;
        /* text한 줄에 대한 height설정 */
      }

      .flexbox2 {
        background-color: dimgray;
        width: 400px;
        height: 250px;
        border-radius: 15px;
        /* display: -webkit-flex; */
        display: flex;
      }
      #column {
        /* -webkit-flex-direction: column; */
        flex-direction: column;
      }
      #column_reverse {
        /* -webkit-flex-direction: column-reverse; */
        flex-direction: column-reverse;
      }
      .item2 {
        background-color: darkgray;
        border-radius: 10px;
        width: 80px;
        height: 50px;
        /* margin: 10px; */
        color: white;
        font-size: 26px;
        text-align: center;
        line-height: 50px;
      }
    </style>
  </head>
  <body>
    <!-- 플렉서블 레이아웃 스타일은 서로 다른 크기의 화면과 기기에서도
    HTML요소들이 자동으로 재정렬되어, 웹 페이지의 레이아웃을
    언제나 똑같이 유지할 수 있게 해주는 속성이다. -->

    <h1>flex-direction속성을 이용한 row방향 배치</h1>

    <h3>flex-direction의 속성값이 row입니다.</h3>
    <div class="flexbox">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>

      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>

      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>

      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>

      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>

      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>

      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
    </div>

    <h3>flex-direction의 속성값이 row-reverse입니다.</h3>
    <div id="row_reverse" class="flexbox">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
    </div>

    <h1>flex-direction 속성을 이용한 column 방향 배치</h1>
    <h3>flex-direction의 속성값이 column입니다.</h3>
    <div id="column" class="flexbox2">
      <div class="item2">1</div>
      <div class="item2">2</div>
      <div class="item2">3</div>
      <div class="item2">4</div>
      <div class="item2">5</div>
      <!-- <div class="item2">1</div>
      <div class="item2">2</div>
      <div class="item2">3</div>
      <div class="item2">4</div>
      <div class="item2">5</div> -->
    </div>
    <br /><br /><br />

    <h3>flex-direction의 속성값이 column-reverse입니다.</h3>
    <div id="column_reverse" class="flexbox2">
      <div class="item2">1</div>
      <div class="item2">2</div>
      <div class="item2">3</div>
    </div>
  </body>
</html>

justify-content

#start {

-webkit-justify-content: flex-start;

justify-content: flex-start;

}

#center {

-webkit-justify-content: center;

justify-content: center;

#between {

-webkit-justify-content: space-between;

justify-content: space-between;

}

#around {

-webkit-justify-content: space-around;

justify-content: space-around;

}

#end {

-webkit-justify-content: flex-end;

justify-content: flex-end;

}

justify-content

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .flexbox {
        background-color: dimgray;
        width: 400px;
        height: 200px;
        border-radius: 15px;
        display: -webkit-flex;
        display: flex;
      }
      #start {
        -webkit-justify-content: flex-start;
        justify-content: flex-start;
      }
      #center {
        -webkit-justify-content: center;
        justify-content: center;
      }
      #between {
        -webkit-justify-content: space-between;
        justify-content: space-between;
      }
      #around {
        -webkit-justify-content: space-around;
        justify-content: space-around;
      }
      #end {
        -webkit-justify-content: flex-end;
        justify-content: flex-end;
      }
      .item {
        background-color: darkgray;
        border-radius: 10px;
        width: 80px;
        height: 50px;
        color: white;
        font-size: 26px;
        text-align: center;
      }
      .flexbox1 {
        border: 1px solid rgba(255, 0, 0, 0.5);
        border-radius: 15px;
        /* padding:20px 0; */
        height: 100px;
        display: -webkit-flex;
        display: flex;
        -webkit-justify-content: center;
        justify-content: center;
      }
      .item1 {
        background-color: darkgray;
        border-radius: 10px;
        width: 80px;
        height: 50px;
        color: white;
        font-size: 26px;
        text-align: center;
        line-height: 50px;
        margin:auto;
      }
    </style>
  </head>
  <body>
    <h1>justify-content속성을 이용한 수평정렬</h1>
    <h3>justify-content의 속성값이 flex-start입니다.</h3>
    <div id="start" class="flexbox">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
    </div>

    <h3>justify-content의 속성값이 center입니다.</h3>
    <div id="center" class="flexbox">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
    </div>

    <h3>justify-content의 속성값이 flex-end입니다.</h3>
    <div id="end" class="flexbox">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
    </div>

    <h3>justify-content의 속성값이 space-between입니다.</h3>
    <div id="between" class="flexbox">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
    </div>

    <h3>justify-content의 속성값이 space-around.</h3>
    <div id="around" class="flexbox">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
    </div>

    <h3>flex의 기본</h3>
    <div class="flexbox" style="flex-direction: column;">
      <div class="flexbox1">
        <div class="item1">1</div>
        <div class="item1">2</div>
        <div class="item1">3</div>
      </div>
      <div class="flexbox1">
        <div class="item1">1</div>
        <div class="item1">2</div>
        <div class="item1">3</div>
      </div>
    </div>
  </body>
</html>

align-items
#stretch { align-items: stretch; } default
#start { align-items: flex-start; }
#center { align-items: center; }
#end { align-items: flex-end; }

align-items

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>CSS Flexible Box Layout</title>
    <style>
      .flexbox {
        background-color: dimgray;
        width: 400px;
        height: 150px;
        border-radius: 15px;
        /* display: -webkit-flex; */
        display: flex;
      }
      .item {
        background-color: darkgray;
        border-radius: 10px;
        width: 80px;
        /* margin: 10px; */
        color: white;
        font-size: 26px;
        text-align: center;
        line-height: 50px;
      }
      #stretch {
        align-items: stretch;
      }
      #start {
        align-items: flex-start;
      }
      #center {
        align-items: center; 
        justify-content: center;
      }
      #end {
        align-items: flex-end;
      }
    </style>
  </head>
  <body>
    <h1>align-items 속성을 이용한 수직 정렬</h1>

    <h3>align-items의 속성값이 stretch(디폴트)입니다.</h3>
    <div id="stretch" class="flexbox">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
    </div>

    <h3>align-items의 속성값이 flex-start입니다.</h3>
    <div id="start" class="flexbox">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
    </div>

    <h3>align-items의 속성값이 center입니다.</h3>
    <div id="center" class="flexbox">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
    </div>

    <h3>align-items의 속성값이 flex-end입니다.</h3>
    <div id="end" class="flexbox">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
    </div>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>CSS Flexible Box Layout</title>
    <style>
      .flexbox {
        background-color: dimgray;
        width: 400px;
        height: 250px;
        border-radius: 15px;
        display: -webkit-flex;
        display: flex;
        opacity: 0.4;
      }
      .item {
        background-color: darkgray;
        border-radius: 10px;
        width: 80px;
        height: 80px;
        color: white;
        font-size: 26px;
        text-align: center;
        line-height: 50px;
      }
      #centerBox {
        justify-content: center;
      }
      .flexbox:hover {
        opacity: 1;
      }
      #center {
        -webkit-justify-content: center;
        align-items: center;
        justify-content: center;
      }
      .itemDiv {
        background-color: darkgray;
        border-radius: 10px;
        margin: auto 0;
        color: white;
        font-size: 26px;
        text-align: center;
        padding: 7px 35px;
      }
    </style>
  </head>
  <body>
    <h3>justify-content의 속성값이 center입니다.</h3>
    <div id="center" class="flexbox">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
    </div>

    <h3>justify-content의 속성값이 center입니다.</h3>
    <div id="centerBox" class="flexbox">
      <div class="itemDiv">1</div>
      <div class="itemDiv">2</div>
      <div class="itemDiv">3</div>
    </div>
  </body>
</html>

728x90

저작자표시 비영리 변경금지

'[CSS]' 카테고리의 다른 글

[CSS] audio (0)	2024.02.23
[CSS] box-shadow (0)	2024.02.23
[CSS] layout (0)	2024.02.22
[CSS] media (0)	2024.02.22
[CSS] web Font (0)	2024.02.22

allrouvel

[CSS] flexbox, flex, justify, Vendor Prefix

Vendor Prefix

flex

justify-content

align-items

'[CSS]' 카테고리의 다른 글

+ Recent posts

티스토리툴바