CSS FLEXBOX - 스타터 키트

4889 단어 htmlfrontendwebdevcss
학습자 여러분, 프론트엔드 개발을 배우고 싶나요???🤩🤩
ㅋㅋㅋㅋㅋㅋㅋㅋㅋ
그렇다면 CSS는 여러분과 같은 개발자가 배우고 구현하는 데 많은 시간을 할애하는 도구 중 하나입니다 🤕🤒

따라서 Flexbox를 시작하려면 먼저 Flexbox가 무엇인지 알아야 합니다.

CSS Flexbox는 항목이나 요소를 교차축(상하)과 주축(좌우)으로 정렬하는 데 도움이 될 뿐만 아니라 많은 유연성을 제공하는 1차원 모델 또는 구조입니다. 요소 사이의 간격을 제어하기 위해😲😲

이 이미지가 Flexbox의 다양한 구성 요소에 대한 기본 아이디어를 제공하기를 바랍니다.
모든 자식 Flex 항목이 배열된 부모 Flex 컨테이너가 있습니다.

CSS Flexbox 컨테이너의 속성은 다음과 같습니다.


  • 디스플레이
  • 플렉스 방향
  • 플렉스 플로우
  • 플렉스 랩
  • 정당화-콘텐츠
  • 정렬 항목
  • 콘텐츠 정렬

    • 표시하다



    Display 속성은 Flex Container를 만드는 데 사용됩니다. display 속성의 값은 flex 또는 inline-flex로 설정됩니다. 다음 코드 스니펫은 6개의 Flex 항목이 포함된 Flex 컨테이너를 생성합니다.

    index.html



    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <<link rel="stylesheet" href="style.css">
        <title>CSS Flexbox</title>
</head>

<body>
    <div class="container">
        <div class="flex-items fruit-1">Apple</div>
        <div class="flex-items fruit-2">Orange</div>
        <div class="flex-items fruit-3">Banana</div>
        <div class="flex-items fruit-4">Strawberry</div>
        <div class="flex-items fruit-5">Cherry</div>
        <div class="flex-items fruit-6">Guava</div>
    </div>

</body>

</html>

    스타일.css



    .container {
    border: 5px solid black;
    display: flex;
}

.flex-items {
    color: #800000;
    font-size: 2rem;
    text-align: center;
}

.fruit-1 {
    background-color: #ff1a1a;
}

.fruit-2 {
    background-color: #ff9933;
}

.fruit-3 {
    background-color: #ffff00;
}

.fruit-4 {
    background-color: #ffb3b3;
}

.fruit-5 {
    background-color: #e60000;
}

.fruit-6 {
    background-color: #66ff66;
}



    표시 값을 flex로 설정하면 기본적으로 항목이 왼쪽 정렬되므로 끝에 공백이 생깁니다.
    디스플레이 값을 inline-flex로 설정하고 어떻게 되는지 봅시다!!!🤔

    .container {
    border: 5px solid black;
    display: inline-flex;
}



    여분의 공간을 없앨 수 있습니다. 컨테이너는 자식(플렉스 아이템)을 수용하는 데 필요한 만큼의 공간만 차지합니다🤘🎉

    플렉스 방향



    Flex-direction 속성은 Flex-container 내부에 Flex-item이 배치되는 방식을 제어합니다.

    flex-direction 속성의 가능한 값은 다음과 같습니다.
  • 행: 항목을 왼쪽에서 오른쪽으로 정렬합니다(기본 케이스)
  • row-reverse: 항목을 오른쪽에서 왼쪽으로 정렬합니다
    • .
  • 열: 항목을 위에서 아래로 정렬합니다
    • .
  • column-reverse: 항목을 아래에서 위로 정렬합니다
    • .

    이러한 각 속성을 적용하고 실제로 적용해 봅시다!!

    열



    .container {
    border: 5px solid black;
    display: flex;
    flex-direction: row;
}



    행 반전



    .container {
    border: 5px solid black;
    display: flex;
    flex-direction: row-reverse;



    열



    .container {
    border: 5px solid black;
    display: flex;
    flex-direction: column;
}



    열 반전



    .container {
    border: 5px solid black;
    display: flex;
    flex-direction: column-reverse;
}



    Flexbox👩‍💻를 시작하는 방법에 대한 기본 아이디어를 얻었기를 바랍니다.
    계속 배우세요!!🤘✌️
    UNP 학습: 기본 소켓 프로그래밍
    Lvs+keepalived 설치 배포

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage