flexbox의 기본 사용법

11333 단어 CSSflexboxCSS3
확실한 CSS의 이해가 부족했기 때문에 요소의 옆 및 float나 관리 화면등에서는 Bootstrap의 그리드 레이아웃에 의지하고 있었기 때문에 유행의 flexbox의 개요를 확인해 본 내용의 기억.

상위 요소보다 큰 하위 요소를 10개 준비



부모의 테두리를 넘어서는 10개의 div 태그를 준비해, 알기 쉽게 하기 위해서 색을 붙인다

index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <title>flexbox</title>
</head>
<body>
    <div class="container">//親要素
　　　　　//子要素10個
        <div class="sample1">1</div>
        <div class="sample2">2</div>
        <div class="sample3">3</div>
        <div class="sample4">4</div>
        <div class="sample5">5</div>
        <div class="sample6">6</div>
        <div class="sample7">7</div>
        <div class="sample8">8</div>
        <div class="sample9">9</div>
        <div class="sample10">10</div>
    </div>
</body>
</html>

CSS는 요소 하나 하나에 색을 붙였기 때문에 CSS가 중복되어 버렸지만, 마지막 .container와 .sample (n)의 height에 주목해 주면 OK

style.css

/* ここは背景色を指定しているだけ */
.sample1 {
    background-color: red;
}
.sample2 {
    background-color: blue;
}
.sample3 {
    background-color: aqua;
}
.sample4 {
    background-color: yellow;
}
.sample5 {
    background-color: greenyellow;
}
.sample6 {
    background-color: palevioletred
}
.sample7 {
    background-color: gray;
}
.sample8 {
    background-color: royalblue;
}
.sample9 {
    background-color: lightseagreen;
}.sample10 {
    background-color :violet;
}
/* heightが400pxしかない親要素*/
.container {
    width: 98%;
    height: 400px;
    background-color: papayawhip;
} 
/*重なれば親のheightを遥かに超えていく子要素たち*/
.sample1 ,.sample2 ,.sample3 ,.sample4 ,.sample5 ,.sample6 ,.sample7 ,.sample8 ,.sample9, .sample10 {
    width: 100px;
    height: 100px;
    font-size: 400%;
}

index.html의 화면 표시를 확인하면 당연히 400px의 부모 요소(배경색이 피부색)에는 100px의 자식 요소가 4개밖에 들어가지 않고, 그보다 많은 div 요소는 테두리에서 튀어나와 버리고 있다.


부모 요소의 CSS 속성에 display: flex; 추가



드디어 부모 요소의 "container"에 flexbox 속성 추가

style.css
...
.container {
    width: 98%;
    height: 400px;
    background-color: papayawhip;
    display: flex;/*これを追加！*/
} 
...

브라우저를 확인하면,,,
아이 요소가 늘어서 있었다! ! !

나는 지금까지 float: left;나 Bootstrap의 col,row를 사용해 가로 줄을 실현하고 있었습니다만 앞으로는 css에 한 줄 더하는 것만으로 좋을 것 같습니다.

덧붙여서 이번 블록 요소의 div에 대해서이므로 display 프로퍼티에 대해서 "flex"로 설정했습니다만, p태그등의 인라인 요소에 대해서는 "inline-flex"라고 지정할 수 있는 것 같습니다.
그 경우 inline-block + flex와 같은 효과가 된다고 합니다. (죄송합니다, 시도하지 않습니다.)

또 화면 사이즈를 줄여 봐도 부모 요소의 폭에 대응해 마음대로 축소해 준다.


또한 부모 요소에 flex-direction 속성을 설정해 봅니다.



row-reverse (오른쪽에서 왼쪽으로 가로 일렬로 정렬)



style.css
...
.container {
    width: 98%;
    height: 400px;
    background-color: papayawhip;
    display: flex;
    flex-direction: row-reverse;
} 
...

↓

늘어선 순서가 거꾸로 되었다.
flex-direction에 지정하는 프로퍼티에는 다음과 같은 것이 있다.

・row(초기값:왼쪽에서 오른쪽으로 가로 일렬로 늘어놓는다)
・column-reverse(오른쪽에서 왼쪽으로 가로 일렬로 늘어놓는다)
・column(위에서 아래로 세로 일렬로 늘어선)
・column-reverse(아래에서 위로 세로 일렬로 늘어선)

또한 부모 요소에 flex-wrap 속성을 설정해 봅니다.



style.css
...
.container {
    width: 98%;
    height: 400px;
    background-color: papayawhip;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;/*これを追加*/
} 
...

↓

자식 요소의 크기는 줄어들지 않고 부모 요소의 프레임 내에 맞지 않으면 개행됩니다.



※화상은 브라우저 사이즈 축소시


flex-wrap에 지정하는 프로퍼티에는 이하와 같은 것이 있다.

・no-wrap(초기값:개행하지 않는다)
・wrap(부모 요소에 들어갈 수 없는 경우는 개행한다)
・wrap-reverse(　〃　아래에서 위로 개행한다)

마지막으로



이러한 조작은 어디까지나 기본적인 부분의 촉감이라고 생각하기 때문에, 응용적인 사용법에 대해서는 별도, 실천으로 사용하는 중에서 추기해 가고 싶습니다.
Vue.js에서 OS 및 사이트 내에서 어두운 모드 설정
Vue.js로 업무 메일을 효율화해보기

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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