[CSS3] flex-basis 속성 데모
관련 기사:
1. [flex-grow] 속성 설명
2. [flex-shrink] 속성 프레젠테이션
3. [flex-basis] 속성 프레젠테이션
4. [flex] 속성 설명
<html>
<head>
<meta charset="utf-8" />
<title>title>
<style type="text/css">
body {
padding: 0;
margin: 0;
}
.bg {
position: absolute;
min-width: 100%;
min-height: 100%;
background-color: rgb(210, 253, 198);
}
.center {
width: 80%;
margin: 0 auto;
}
.center .title {
text-align: center;
}
/* */
.flex-container {
display: -webkit-flex;
display: flex;
}
.main-content {
-webkit-flex: 0 1 50%;
flex: 0 1 50%;
}
.main-content>h3 {
text-align: center;
}
/* */
.line {
margin: 0 20px;
border: 1px dashed #aaa;
-webkit-flex: 0 1 auto;
flex: 0 1 auto;
}
/* */
.demo {
position: relative;
height: 100px;
background-color: white;
border: 2px solid black;
}
.demo .demo-item {
width: 25%;
}
/* */
.demo.block-container .demo-item {
height: 100%;
background-color: coral;
}
.demo.flex-container .demo-item {
background-color: lightblue;
}
/* */
.demo .output-txt {
position: absolute;
top: 30px;
left: 10px;
font-weight: bold;
color: purple;
}
/* */
/* */
.control .flex-container:first-child,
.control .flex-container:last-child {
margin-top: 10px;
}
.control .flex-container div,
.control .flex-container .btn {
padding: 5px;
font-weight: bold;
-webkit-flex: 0 1 100%;
flex: 0 1 100%;
}
.control .flex-container div:first-of-type,
.control .flex-container div:last-of-type {
-webkit-flex: none;
flex: none;
}
.control .flex-container div input[type="range"] {
width: 100%;
cursor: pointer;
}
.control .flex-container .btn {
position: relative;
overflow: hidden;
font-size: 1.05em;
font-weight: normal;
text-align: center;
text-decoration: none;
color: white;
background-color: rgb(72, 189, 91);
border: 0 none;
border-radius: 10px;
outline: 0 none;
cursor: pointer;
}
.control .flex-container .btn span:after {
display: block;
position: absolute;
left: 0;
bottom: 0;
content: '';
width: 150%;
height: 150%;
background-color: rgb(144, 238, 144);
opacity: 0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.control .flex-container .btn:active span:after {
width: 0;
height: 0;
opacity: 1;
transition: 0s;
-webkit-transition: 0s;
}
/* */
.summary {
padding: 10px;
margin-top: 10px;
background-color: white;
border: 2px dashed #aaa;
border-radius: 14px;
box-shadow: 8px 8px 6px 0px grey;
}
.summary .txt-list {
padding: 15px;
margin: 0;
color: white;
background-color: purple;
border-radius: inherit;
}
.summary .txt-list dd {
line-height: 1.4;
margin-bottom: 10px;
}
.summary .txt-list dd:last-child {
margin-bottom: 0;
}
style>
head>
<body>
<div class="bg">
<div class="center">
<h2 class="title">flex-basis： h2>
<div class="flex-container">
<div class="main-content">
<h3>block h3>
<div class="demo block-container">
<div class="demo-item"> div>
<div class="output-txt">
<div>width: <output class="width">25%output>;div>
<div>flex-basis: <output class="flex-basis">autooutput>;div>
div>
div>
<div class="control">
<div class="flex-container">
<div>width: 0%div>
<div><input type="range" min="0" max="150" value="25" />div>
<div>150%;div>
div>
<div class="flex-container">
<div>flex-basis: 0%div>
<div><input type="range" min="0" max="150" value="25" />div>
<div>150%;div>
div>
<div class="flex-container">
<button class="btn"><span>【 】 flex-basis: auto;span>button>
div>
div>
div>
<div class="line">div>
<div class="main-content">
<h3>flex h3>
<div class="demo flex-container">
<div class="demo-item"> div>
<div class="output-txt">
<div>width: <output class="width">25%output>;div>
<div>flex-basis: <output class="flex-basis">autooutput>;div>
div>
div>
<div class="control">
<div class="flex-container">
<div>width: 0%div>
<div><input type="range" min="0" max="150" value="25" />div>
<div>150%;div>
div>
<div class="flex-container">
<div>flex-basis: 0%div>
<div><input type="range" min="0" max="150" value="25" />div>
<div>150%;div>
div>
<div class="flex-container">
<button class="btn"><span>【 】 flex-basis: auto;span>button>
div>
div>
div>
div>
<div class="summary">
<dl class="txt-list">
<dt> ：dt>
<dd>1. "flex-basis" "width"， ："flex-basis" > "width";dd>
<dd>2. "flex-basis" ， 【 "display: flex"、"display: inline-flex"】;dd>
<dd>3. "width"、"flex-basis（ auto）" ， "flex-basis" ， "width" ;dd>
<dd>4. "width" "flex-basis" ， "flex-basis: auto;"， "width"【 ，"flex-basis" ？】;dd>
<dd>5. 【 】 ，"flex-basis" "width" ："flex-basis: 0;" ，"flex-basis: 999%;" ;dd>
<dd>6. 【 】 "flex-basis: auto;" ， "width" ， ， "width: 0" 0;dd>
<dd>7. 【 】 ， width > 100% ， ;dd>
dl>
div>
div>
div>
<script type="text/javascript">
;(function(doc) {
//
var item = doc.querySelectorAll('.demo .demo-item'),
output_block = doc.querySelectorAll('.main-content:first-of-type output'),
output_flex = doc.querySelectorAll('.main-content:last-of-type output'),
// input button
input_block = doc.querySelectorAll('.main-content:first-child .control input[type="range"], .main-content:first-child .control button.btn'),
input_flex = doc.querySelectorAll('.main-content:last-child .control input[type="range"], .main-content:last-child .control button.btn');
// ，
var input = new Array();
input.push(input_block);
input.push(input_flex);
// input.push(reset);
//
var output = new Array();
output.push(output_block);
output.push(output_flex);
/* - - - - - - - - - - - - - - - - - - - - - - - - IE - - - - - - - - - - - - - - - - - - - - - - - - */
// IE
var IEVersion = (function() {
// userAgent
var userAgent = navigator.userAgent;
// IE<11
var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1;
// IE Edge
var isEdge = userAgent.indexOf("Edge") > -1 && !isIE;
var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf("rv:11.0") > -1;
if (isIE) {
var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
reIE.test(userAgent);
var fIEVersion = parseFloat(RegExp["$1"]);
if(fIEVersion == 7) {
// ，IE5 7
return 7;
} else if (fIEVersion == 8) {
return 8;
} else if (fIEVersion == 9) {
return 9;
} else if (fIEVersion == 10) {
return 10;
} else {
// IE <=7
return 6;
}
} else if (isEdge) {
// edge
return 'edge';
} else if (isIE11) {
// IE11
return 11;
} else {
// ie
return -1;
}
})();
// IE
function addHandler(element, type, handler){
if(element.addEventListener){
element.addEventListener(type, handler, false);
}else if(element.attachEvent){
element.attachEvent('on' + type, handler);
}else{
element['on' + type] = handler;
}
}
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
//
function chgStyle(ele, type, txt) {
// IE "input" ， "change"
if (IEVersion !== -1 && type === 'input') {
type = 'change';
}
for (var i = 0; i < ele.length; i++) {
for (var j = 0; j < ele[i].length; j++) {
// ，
(function(type) {
// button
if (ele[i][j].tagName.toLowerCase() === 'button') {
// （ ）
type = 'click';
}
// console.log(type);
addHandler(ele[i][j], type, function(i, j) {
return function() {
if (j === 0) {
// width
txt[i][j].value = ele[i][j].value + '%';
item[i].style.width = ele[i][j].value + '%';
if (ele[i][0].getAttribute('data-disable') === null) {
// flex-basis: auto; width
ele[i][1].value = ele[i][j].value;
}
} else if (j === 1) {
// flex-basis
txt[i][j].value = ele[i][j].value + '%';
item[i].style.flexBasis = ele[i][j].value + '%';
item[i].style.webkitFlexBasis = ele[i][j].value + '%';
//
ele[i][0].setAttribute('data-disable', 'on');
} else {
// reset-btn
txt[i][1].value = 'auto';
item[i].style.flexBasis = 'auto';
item[i].style.webkitFlexBasis = 'auto';
ele[i][1].value = ele[i][0].value;
ele[i][0].removeAttribute('data-disable');
}
}
}(i, j));
})(type);
}
}
}
/*
// ： ，
function chgStyle(ele, type, txt) {
// IE "input" ， "change"
if (IEVersion !== -1 && type === 'input') {
type = 'change';
}
for (var i = 0; i < ele.length; i++) {
for (var j = 0; j < ele[i].length; j++) {
// ，
var tp = '';
// button
if (ele[i][j].tagName.toLowerCase() === 'button') {
tp = 'click'; //
} else {
if (IEVersion !== -1 && type === 'input') {
tp = 'change';
} else {
tp = type;
}
}
console.log(tp);
addHandler(ele[i][j], tp, function(i, j) {
return function() {
if (j === 0) { // width
txt[i][j].value = ele[i][j].value + '%';
item[i].style.width = ele[i][j].value + '%';
if (ele[i][0].getAttribute('data-disable') === null) {
// flex-basis: auto; width
ele[i][1].value = ele[i][j].value;
}
} else if (j === 1) { // flex-basis
txt[i][j].value = ele[i][j].value + '%';
item[i].style.flexBasis = ele[i][j].value + '%';
item[i].style.webkitFlexBasis = ele[i][j].value + '%';
//
ele[i][0].setAttribute('data-disable', 'on');
} else { // reset-btn
txt[i][1].value = 'auto';
item[i].style.flexBasis = 'auto';
item[i].style.webkitFlexBasis = 'auto';
ele[i][1].value = ele[i][0].value;
ele[i][0].removeAttribute('data-disable');
}
}
}(i, j));
}
}
}
*/
/*
// ： type， ， ，
function chgStyle(ele, txt) {
for (var i = 0; i < ele.length; i++) {
for (var j = 0; j < ele[i].length; j++) {
// ， ， ，
var type = '';
// button
if (ele[i][j].tagName.toLowerCase() === 'button') {
type = 'click'; //
} else {
if (IEVersion !== -1 && type === 'input') {
type = 'change';
} else {
type = 'input';
}
}
console.log(type);
addHandler(ele[i][j], type, function(i, j) {
return function() {
if (j === 0) { // width
txt[i][j].value = ele[i][j].value + '%';
item[i].style.width = ele[i][j].value + '%';
if (ele[i][0].getAttribute('data-disable') === null) {
// flex-basis: auto; width
ele[i][1].value = ele[i][j].value;
}
} else if (j === 1) { // flex-basis
txt[i][j].value = ele[i][j].value + '%';
item[i].style.flexBasis = ele[i][j].value + '%';
item[i].style.webkitFlexBasis = ele[i][j].value + '%';
//
ele[i][0].setAttribute('data-disable', 'on');
} else { // reset-btn
txt[i][1].value = 'auto';
item[i].style.flexBasis = 'auto';
item[i].style.webkitFlexBasis = 'auto';
ele[i][1].value = ele[i][0].value;
ele[i][0].removeAttribute('data-disable');
}
}
}(i, j));
}
}
}
*/
// etc...
function bindEvent() {
chgStyle(input, 'input', output);
}
function init() {
bindEvent();
}
init();
})(document);
script>
body>
html>
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
【Vue 엔지니어가 만든다】 절대 실패하지 않는 CSS 네비게이션 메뉴 정리 13선이 기사에 기재된 디자인 코드는 모두 자유롭게 사용해 주셔서 괜찮습니다 (필자가 작성했기 때문에) 프로젝트에 넣어보다 충실한 디자인으로 해 주면 ○ 움직임은 아래 이미지처럼 느껴집니다 1. 헤더로 사용하기 쉬운 간단...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
