2week-flex

김졍·2023년 1월 14일

CSS 수업정리

수업내용정리

목록 보기

2/7

부모속성에 쓸수있는것

-display:flex 필수!!

justify-content(가로축 이동)

flex-start:요소들을 컨테이너 왼쪽으로 정렬
flex-end:요소들을 컨테이너 오른쪽으로 정렬
flex-center:요소들을 컨테이너 중앙으로 정렬
space-between:요소 사이에 동일한 간격
space-around:요소들 주위에 동일한 간격

align-items(세로축 이동)

flex-start:요소들을 컨테이너의 꼭대기로 정렬
flex-end:요소들을 컨테이너 바닥으로 정렬
center:요소들을 컨테이너 세로선 상 가운데로 정렬
space-between:요소들을 컨테이너 시작 위치에 정렬
space-around:요소들을 컨테이너에 맞도록 늘린다.

flex-direction(방향설정)

row:요소들을 텍스트의 방향과 동일하게 정렬
row-reverse:요소들을 텍스트의 반대 방향으로 정렬
column:요소들을 위에서 아래로 정렬
column-reverse:요소들을 아래에서 위로 정렬

order 태그의 순서를 바꿀 수 있다.(1,-1)

align-self 개개인 상하축 이동

flex-wrap!

flex는 무조건 한줄에 나오려한다(자식 위드 넘쳐도)

nowrap: 모든 요소들을 한 줄에 정렬
wrap: 요소들을 여러 줄에 걸쳐 정렬(떨어뜨린다)
wrap-reverse: 요소들을 여러 줄에 걸쳐 반대로 정렬

align-content

flex-start:여러 줄들을 컨테이너의 꼭대기에 정렬
flex-end:여러 줄들을 컨테이너의 바닥에 정렬
center:여러 줄들을 세로선 상의 가운데에 정렬
space-between:여러 줄 사이에 동일한 간격을 둔다
space-around:여러 줄 주위에 동일한 간격을 둔다
stretch:여러 줄들을 컨테이너에 맞게 늘린다.

display:flex;
justify-content: ;
align-content: ;
align-items: ;

자식속성에만 쓸수있는것

flex-grow: ; 자라나다~/증가될때의 비율
flex-shrink: ; 줄어들다~/줄어들때의 비율
flex-basis: ; 중심축기준 위드 높이

flex-grow: ;
flex-shrink: ;
flex-basis: ;
flex: ;

수업내용 정리

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./reset.css">
</head>
<body>
  <style>
    main{
      width: 800px;
      margin: 0 auto;
    }

    .box1{
      display: flex;
      gap: 10px;
    }
    .box1 div{
      flex: 1;
      height: 100px;
      background: #ccc;
    }
  </style>
  <main>
    <!-- gap : 부모에게 -->
    <div class="box1">
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </div>

    <style>
      .box2{
        display: flex;
      }
      .box2>*{
        flex: 1;
        background: #f00;
        height: 100px;
      }
      .box2>*+*{
        margin-left: 10px;
      }
    </style>

    <!-- 올빼미선택자 -->
    <div class="box2">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>1</div>
      <div>2</div>
    </div>

    <style>
      .box3{
        display: flex;
        padding: 10px;
        background: #ccc;
        /* jcsb */
        justify-content: space-between;
      }
      .box3 div{
        width: calc(50% - 5px);
        height: 100px;
        background: #f00;
      }
    </style>

    <!-- 스페이스비트 -->
    <div class="box3">
      <div>1</div>
      <div>2</div>
    </div>
  </main>
</body>
</html>

  <style>

    header{
      position: relative;
      height: 200px;
      background: #000;
      display: flex;
      justify-content: space-between;
    }
    header h1{
      position: absolute;
      top: 50%;left: 50%;
      transform: translate(-50%, -50%);
    }
    header h1 a{
      width: 150px;
      height: 50px;
      background: #fff;
      display: block;
      text-align: center;
      line-height: 50px;
    }

    header .sns, .login{
      width: 50px;
      height: 50px;
      background: #fff;
      text-align: center;
      line-height: 50px;
    }

    
.pagination{
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
    }
.pagination span{
  width: 30px;
  height: 30px;
  background: #fff;
  /* float를 줘야지 붙이면서 width,높이까지 들어간다면
  flex는 부모한테만 줘도 할수있다 */
}

  </style>

  <header>
    <h1><a href="">logo</a></h1>
    <div class="sns">sns</div>
    <div class="login">login</div>


    <div class="pagination">
      <span>1</span>
      <span>2</span>
      <span>3</span>
    </div>
  </header>

    <style>
      main{width: 800px;margin: 0 auto;}

      .box1{
        padding: 10px;
        background: #ccc;
        margin: 10px 0;
      }
      .box1 .top{
        height: 100px;
        background: #fff;
        margin-bottom: 10px;
      }
      .box1 .bottom{
        padding: 10px;
        background: #fff;
        display: flex;

      }

      .box1 .left{
        background: #00f;
        flex: 1;
        margin-right: 10px;
        display: flex;
        flex-wrap: wrap;
        /* wrap이 있어서 갭쓰면 초과되어서 제대로 정렬이 안되기 때문에
        자식요소의 위드는 calc로 계산해야하는 불편함이 있다 +
        gap값 변경할 경우 또 대응하기 힘든 단점*/
        gap: 10px;
      }
      .box1 .left li{
        width: calc((100% - 20px)/3);
        height: 100px;
        background: #f00;
      }

      .box1 .right{
        width: 150px;
        background: #f00;
      }
    </style>

 <style>
    .box1{
      width: 800px;
      margin: 0 auto;
    }
    .box1 ul{
      display: flex;
      gap: 10px;
    }
    .box1 ul li{
      /* 각 사진의 비율이 달라 
      사진이 정확하게 n등분이 되지 않는 경우도 있으니 이런 경우 flex : 1 사용해서
      li의 등분은 1: 1:1로 틀을 잡아줘야한다  */
      flex: 1;
    }
    .box1 ul a{
      display: block;
      background: #ccc;
      padding: 10px;
    }
    .box1 ul img{
      width: 100%;
      height: 200px;
      object-fit: cover;
    }
    .box1 ul p{
      padding: 10px;
      margin-top: 10px;
      background: #fff;
    }
  </style>

  <div class="box1">
    <ul>
      <li>
        <a href="">
          <img src="./img1.jpg" alt="">
          <p>aaa</p>
        </a>
      </li>
      <li>
        <a href="">
          <img src="./img2.jpg" alt="">
          <p>vvvv</p>
        </a>
      </li>
      <li>
        <a href="">
          <img src="./img3.jpg" alt="">
          <p>bbbb</p>
        </a>
      </li>
    </ul>
  </div>