본문 바로가기
Front-End/CSS

[CSS] flex

by 김뚱 2018. 12. 12.

1. order :  flex 항목의 순서를 지정합니다.


<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
align-items: stretch;
background-color: #f1f1f1;
}

.flex-container>div {
background-color: DodgerBlue;
color: white;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>The order Property</h1>

<p>Use the order property to sort the flex items as you like:</p>

<div class="flex-container">
<div style="order: 3">1</div>
<div style="order: 2">2</div>
<div style="order: 4">3</div>
<div style="order: 1">4</div>
</div>

</body>
</html>




2. flex-grow :  flex 항목이 다른 flex 항목에 비해 얼마나 커질 것인지 지정합니다.


<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
align-items: stretch;
background-color: #f1f1f1;
}

.flex-container > div {
background-color: DodgerBlue;
color: white;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>The flex-grow Property</h1>

<p>Make the third flex item grow eight times faster than the other flex items:</p>

<div class="flex-container">
<div style="flex-grow: 1">1</div>
<div style="flex-grow: 1">2</div>
<div style="flex-grow: 8">3</div>
</div>

</body>
</html>




3. flex-shrink :  flex 항목이 나머지 flex 항목 부분에 상대적으로 얼마나 축소할 것인지 지정합니다. 


- 값은 숫자여야 하며, 기본값은 1 입니다.

- flex 항목이 다른 flex 항목처럼 줄어들지 않게 지정하려면 0 값을 주면 된다.


<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
align-items: stretch;
background-color: #f1f1f1;
}

.flex-container>div {
background-color: DodgerBlue;
color: white;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>The flex-shrink Property</h1>

<p>Do not let the third flex item shrink as much as the other flex items:</p>

<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex-shrink: 0">3</div>
<div>4</div>
<div>5</div>
</div>

</body>
</html>




4. flex-basis :  flex 항목의 초기 길이를 지정합니다. 


<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
align-items: stretch;
background-color: #f1f1f1;
}

.flex-container > div {
background-color: DodgerBlue;
color: white;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>The flex-basis Property</h1>

<p>Set the initial length of the third flex item to 200 pixels:</p>

<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex-basis:200px">3</div>
<div>4</div>
</div>

</body>
</html>




5. flex property :  flex 속성에 대한 약식 속성 입니다. 


- flex-grow, flex-shrink 및 flex-basis 특성


<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
align-items: stretch;
background-color: #f1f1f1;
}

.flex-container>div {
background-color: DodgerBlue;
color: white;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>The flex Property</h1>

<p>Make the third flex item not growable (0), not shrinkable (0), and with an initial length of 200 pixels:</p>

<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex: 0 0 200px">3</div>
<div>4</div>
</div>

</body>
</html>




6. align-self :  flexible container안에서 선택한 flex 항목의 정렬을 지정합니다. 


<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
height: 200px;
background-color: #f1f1f1;
}

.flex-container > div {
background-color: DodgerBlue;
color: white;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>The align-self Property</h1>

<p>The "align-self: flex-start;" aligns the selected flex item at the top of the container.</p>
<p>The "align-self: center;" aligns the selected flex item in the middle of the container:</p>
<p>The "align-self: flex-end;" aligns the selected flex item at the bottom of the container.</p>

<div class="flex-container">
<div>1</div>
<div style="align-self: flex-start">2</div>
<div style="align-self: center">3</div>
<div style="align-self: flex-end">4</div>
<div>5</div>
</div>

<p>The align-self property overrides the align-items property of the container.</p>

</body>
</html>





7. css flex property :  내용에 관계없이 항목의 길이를 동일하게 설정합니다.


[css 구문] flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;


<!DOCTYPE html>
<html>
<head>
<style>
#main {
width: 300px;
height: 300px;
border: 1px solid black;
display: -webkit-flex; /* Safari */
display: flex;
}

#main div {
-webkit-flex: 1; /* Safari 6.1+ */
-ms-flex: 1; /* IE 10 */
flex: 1;
}
</style>
</head>
<body>
<h1>The flex Property</h1>

<div id="main">
<div style="background-color:coral;">RED</div>
<div style="background-color:lightblue;">BLUE</div>
<div style="background-color:lightgreen;">Green div with more content.</div>
</div>

<p><b>Note:</b> Internet Explorer 9 and earlier versions do not support the flex property.</p>

<p><b>Note:</b> Internet Explorer 10 supports an alternative, the -ms-flex property. IE11 and newer versions fully support the flex property (do not need the -ms- prefix).</p>

<p><b>Note:</b> Safari 6.1 (and newer) supports an alternative, the -webkit-flex property.</p>

</body>
</html>




[javascript 구문] object .style.flex = "1"


<!DOCTYPE html>
<html>
<head>
<style>
#main {
width: 250px;
height: 100px;
border: 1px solid #c3c3c3;
display: -webkit-flex; /* Safari */
display: flex;
}

#main div {
-webkit-flex: 0 0 50px; /* Safari 6.1+ */
flex: 0 0 50px;
}
</style>
</head>
<body>
<h1>Change flex with JavaScript</h1>

<div id="main">
<div style="background-color:coral;">Red DIV</div>
<div style="background-color:lightblue;" id="myBlueDiv">Blue DIV</div>
</div>

<p>Click the "Try it" button to set the value of the flex property to "200px" for the blue div element</p>

<button onclick="myFunction()">Try it</button>

<p><b>Note:</b> Internet Explorer 10 and earlier versions earlier versions do not support the flex property.</p>
<p><b>Note:</b> Safari 6.1 (and newer) supports an alternative, the WebkitFlex property.</p>

<script>
function myFunction() {
document.getElementById("myBlueDiv").style.WebkitFlex = "0 0 200px"; // Safari 6.1+
document.getElementById("myBlueDiv").style.flex = "0 0 200px";
}
</script>

</body>
</html>






728x90
반응형

'Front-End > CSS' 카테고리의 다른 글

[CSS] 무료 이미지 다운로드 사이트 정리  (0) 2019.12.27
[CSS] spinner 참고 사이트  (0) 2019.05.23
[CSS] Flexbox  (0) 2018.12.11

관련글

댓글

티스토리툴바