CSS彈性布局FLEX,媒體查詢及移動(dòng)端點(diǎn)擊事件的實(shí)現(xiàn)
發(fā)布時(shí)間：2021-02-24 16:28:13 作者：稀土掘金 
我要評(píng)論
我要評(píng)論這篇文章主要介紹了CSS彈性布局FLEX,媒體查詢及移動(dòng)端點(diǎn)擊事件的實(shí)現(xiàn),本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
flex彈性布局
定義： Flex 布局的元素，稱為 Flex 容器（flex container），簡(jiǎn)稱"容器"。它的所有子元素自動(dòng)成為容器成員，稱為 Flex 項(xiàng)目
容器默認(rèn)存在兩根軸：水平的主軸（ main axis ）和垂直的交叉軸（ cross axis ）。
主軸的開始位置（與邊框的交叉點(diǎn)）叫做 main start ，結(jié)束位置叫做 main end ；交叉軸的開始位置叫做 cross start ，結(jié)束位置叫做 cross end 。
項(xiàng)目默認(rèn)沿主軸排列。單個(gè)項(xiàng)目占據(jù)的主軸空間叫做 main size ，占據(jù)的交叉軸空間叫做 cross size 。
彈性布局如何使用：只需要給容器設(shè)置 display:flex
容器屬性
.box
{
flex-direction: row | row-reverse | column | column-reverse;
}
row row-reverse column column-reverse
<style>
ul:nth-of-type(1){ flex-direction:row;}
ul:nth-of-type(2){ flex-direction:row-reverse;}
ul:nth-of-type(3){ flex-direction:column;}
ul:nth-of-type(4){ flex-direction:column-reverse;}
</style>
.box
{
flex-wrap : nowrap| wrap | wrap-reverse ;
}
nowrap wrap wrap-reverse
<style>
ul:nth-of-type(1){flex-wrap:nowrap;}
ul:nth-of-type(2){flex-wrap:wrap;}
ul:nth-of-type(3){flex-wrap:wrap-reverse;}
</style>
.box
{
justify-content: flex-start | flex-end | center | space-between | space-around;
}
flex-start flex-end center space-between space-around
<style>
ul:nth-of-type(1){justify-content:flex-start;}
ul:nth-of-type(2){justify-content:flex-end;}
ul:nth-of-type(3){justify-content:center;}
ul:nth-of-type(4){justify-content:space-between;}
ul:nth-of-type(5){justify-content:space-around;}
</style>
.box { align-items: flex-start | flex-end | center | baseline | stretch;}
flex-start flex-end center baseline stretch
<style>
ul:nth-of-type(1){align-items:flex-start;}
ul:nth-of-type(2){align-items:flex-end;}
ul:nth-of-type(3){align-items:center;}
ul:nth-of-type(4){align-items:baseline;}
ul li{ height:auto;}
ul:nth-of-type(5){align-items:stretch;}
</style>
align-content 屬性定義了多根軸線的對(duì)齊方式。如果項(xiàng)目只有一根軸線，該屬性不起作用。
.box {align-content: flex-start | flex-end | center | space-between | space-around | stretch;}
flex-start flex-end center space-between space-around stretch
<style>
ul:nth-of-type(1){ flex-wrap:wrap; align-content:flex-start;}
ul:nth-of-type(2){ flex-wrap:wrap; align-content:flex-end;}
ul:nth-of-type(3){ flex-wrap:wrap; align-content:center;justify-content:center;}
ul:nth-of-type(4){ flex-wrap:wrap; align-content:space-between;}
ul:nth-of-type(5){ flex-wrap:wrap; align-content:space-around;}
ul li{ height:auto;}
ul:nth-of-type(6){ flex-wrap:wrap;align-content: stretch; justify-content:center;}
</style>
簡(jiǎn)寫方式：
flex-flow :
flex-flow 屬性是 flex-direction 屬性和 flex-wrap 屬性的簡(jiǎn)寫形式，默認(rèn)值為 row nowrap 。 .
box {flex-flow: <flex-direction> || <flex-wrap>;}
項(xiàng)目屬性
order 屬性定義項(xiàng)目的排列順序。數(shù)值越小，排列越靠前，默認(rèn)為 0 。
.item {order: <integer>;}
<style>
ul li:nth-of-type(3){order:1;}
ul li:nth-of-type(2){order:2;}
ul li:nth-of-type(1){order:3;}
ul li:nth-of-type(5){order:4;}
ul li:nth-of-type(4){order:5;}
</style>
flex-grow 屬性定義項(xiàng)目的放大比例，默認(rèn)為 0 ，即如果存在剩余空間，也不放大。 如果所有項(xiàng)目的 flex-grow 屬性都為 1 ，則它們將等分剩余空間（如果有的話）。如果一個(gè)項(xiàng)目的 flex-grow 屬性為 2 ，其他項(xiàng)目都為 1 ，則前者占據(jù)的剩余空間將比其他項(xiàng)多一倍。
.item { flex-grow: <number>; /* default 0 */}
<style>
ul li:nth-of-type(1){ flex-grow:1;}
ul li:nth-of-type(2){ flex-grow:1;}
</style>
flex-shrink 屬性定義了項(xiàng)目的縮小比例，默認(rèn)為 1 ，即如果空間不足，該項(xiàng)目將縮小。
如果所有項(xiàng)目的 flex-shrink 屬性都為 1 ，當(dāng)空間不足時(shí)，都將等比例縮小。
如果一個(gè)項(xiàng)目的 flex-shrink 屬性為 0 ，其他項(xiàng)目都為 1 ，則空間不足時(shí)，前者不縮小。
負(fù)值對(duì)該屬性無效。
.item { flex-shrink: <number>; /* default 1 */}
<style>
ul li:nth-of-type(1){flex-shrink:0;}
ul li:nth-of-type(2){flex-shrink:1;}
ul li:nth-of-type(3){flex-shrink:2;}
ul li:nth-of-type(4){flex-shrink:3;}
</style>
flex-basis 屬性定義了在分配多余空間之前，項(xiàng)目占據(jù)的主軸空間（ main size ）。瀏覽器根據(jù)這個(gè)屬性，計(jì)算主軸是否有多余空間。它的默認(rèn)值為 auto ，即項(xiàng)目的本來大小。它可以設(shè)為跟width或height屬性一樣的值（比如 350px ），則項(xiàng)目將占據(jù)固定空間。
.item { flex-basis: <length> | auto; /* default auto */}
<style>
ul li:nth-of-type(1){ flex-basis:50%;}
</style>
align-self 屬性允許單個(gè)項(xiàng)目有與其他項(xiàng)目不一樣的對(duì)齊方式，可覆蓋 align-items 屬性。默認(rèn)值為 auto ，表示繼承父元素的 align-items 屬性，如果沒有父元素，則等同于 stretch 。
.item { align-self: auto | flex-start | flex-end | center | baseline | stretch;}
<style>
ul{align-items:flex-start;}
ul li{height: auto}
ul li:nth-of-type(1){ align-self:auto;}
ul li:nth-of-type(2){ align-self:flex-start;}
ul li:nth-of-type(3){ align-self:center; }
ul li:nth-of-type(4){ align-self:flex-end;}
ul li:nth-of-type(5){ align-self:baseline;line-height: 80px;}
ul li:nth-of-type(6){ align-self:stretch;}
</style>
flex 屬性
flex 屬性是 flex-grow , flex-shrink 和 flex-basis 的簡(jiǎn)寫，默認(rèn)值為 0 1 auto 。后兩個(gè)屬性可選。
.item { flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]}
該屬性有兩個(gè)快捷值： auto (1 1 auto) 和 none (0 0 auto) 。
建議優(yōu)先使用這個(gè)屬性，而不是單獨(dú)寫三個(gè)分離的屬性，因?yàn)闉g覽器會(huì)推算相關(guān)值。
媒體查詢
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
<script type="text/javascript">
/*
viewport
定義：viewport就是設(shè)備的屏幕上能用來顯示我們的網(wǎng)頁(yè)的那一塊區(qū)域,css中的1px并不等于設(shè)備的1px：因?yàn)橄袼孛芏炔煌?
layout viewport：布局視口
一般移動(dòng)設(shè)備的瀏覽器都默認(rèn)設(shè)置了一個(gè)viewport元標(biāo)簽，定義一個(gè)虛擬的layout viewport，用于解決早期頁(yè)面手機(jī)上顯示的問題
visual viewport ：可視視口
設(shè)置物理屏幕的可視區(qū)域，屏幕顯示的物理像素，同樣的屏幕，像素密度大的設(shè)備，可現(xiàn)實(shí)的像素會(huì)更多
ideal viewport ：理想視口
通過metab標(biāo)簽來得到理想視口
示例：<meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1.0">
* 移動(dòng)端布局
* meta標(biāo)簽的content屬性的值
* width=device-width,height=device-height,讓當(dāng)前的viewport寬度，高度等于設(shè)備的寬度，高度，也可以設(shè)置一個(gè)固定的值，盡量不使用height
* initial-scale=1.0;初始化縮放比例：0.25-1.0
* maximum-sacle=1.0;設(shè)置最大縮放比例：0.25-1.0
* minimum-scale=1.0;設(shè)置最小縮比例：0.25-1.0
* user-scalable=no;是否允許用戶縮放，默認(rèn)為yes,如果設(shè)置為no:那么minimax-scale,與maximum-scale將被忽略，因?yàn)椴辉试S縮放
* 實(shí)例:
* <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
* 移動(dòng)端手勢(shì)事件
* 與pc端事件差異對(duì)比
* pc端的mousemove,mouseup,mousedown，在移動(dòng)端會(huì)失效或者不正常
* pc端的click事件可以使用，| 不要說300ms問題 | 但是會(huì)有300ms延遲問題：手機(jī)早期：用于斷定是否是雙擊放大縮小
*
* 移動(dòng)端事件
* touchstart：手指按下觸發(fā)
* touchmove：手指移動(dòng)時(shí)觸發(fā)
* touched：手指離開時(shí)觸發(fā)
* touchcancel：事件被打斷是觸發(fā)
*
* 移動(dòng)端事件執(zhí)行順序：touchstart->touchmove->touched->click
*
* touchEvent 對(duì)象與pc端事件的差異對(duì)比，多了三個(gè)TouchList屬性
* touches 位于當(dāng)前屏幕上的所有手指的一個(gè)列表
* targetTouches 位于當(dāng)前DOM對(duì)象上的手指的一個(gè)列表
* changedTouhes 保存狀態(tài)改變的手指對(duì)象的一個(gè)列表
*
* 每個(gè)TouchList中有多個(gè)對(duì)象，每個(gè)Touch對(duì)象的對(duì)象屬性
* screenX 相對(duì)屏幕左邊的距離
* screenY 相對(duì)屏幕上邊的距離
* clientX 相對(duì)瀏覽器左邊的距離
* clientY 相對(duì)瀏覽器上邊的距離
* pageX 相對(duì)頁(yè)面左邊的距離
* pageY 相對(duì)頁(yè)面上邊的距離
* target 觸摸的當(dāng)前元素
* identifier 當(dāng)前觸摸對(duì)象的id,用于辨別手指
* radiusX, radiusY 手指觸摸的范圍
*/
</script>
<style type="text/css">
/*媒體查詢一*/
* {
margin: 0;
padding: 0;
}
body {
background-color: pink;
}
/*使用@media query可以實(shí)現(xiàn)響應(yīng)式布局效果，會(huì)根據(jù)不同的條件，去設(shè)置不同的樣式*/
/*screen表示屏幕，min-width：1200px 表示寬度最小值是1200px換句話說就是當(dāng)屏幕寬度大于等于1200px的時(shí)候是什么樣式*/
@media only screen and (min-width:1200px) {
/*這里寫樣式*/
body {
background-color: red;
}
}
/*當(dāng)屏幕寬度，大于800，小于1199顯示的樣式*/
@media only screen and (min-width: 800px) and (max-width:1199px) {
body {
background-color: aqua;
}
}
/*當(dāng)屏幕寬度，大于400，小于640顯示的樣式*/
/*//如果在媒體查詢中沒有銜接上的部分，會(huì)顯示默認(rèn)部分*/
@media only screen and (min-width: 400px) and (max-width: 640px) {
body {
background-color: yellow;
}
}
</style>
<!--
媒體查詢二
<meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1.0">
<link rel="stylesheet" href="css/m320.css" media="only screen and (max-width:320px)">
<link rel="stylesheet" href="css/m375.css" media="only screen and (min-width:321px) and (max-width:375px)">
<link rel="stylesheet" href="css/m414.css" media="only screen and (min-width:376px) and (max-width:414px)">
-->
</html>
移動(dòng)端點(diǎn)擊事件
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
<script type="text/javascript">
// 移動(dòng)端手勢(shì)
var box = document.querySelector('#box')
//pc端的click事件
box.addEventListener('click', function(e) {
console.log('===========click============');
console.log(e);
});
//手指按下
box.addEventListener('touchstart', function(e) {
console.log('===========touchstart============');
// Fn(e);
})
//手指移動(dòng)
box.addEventListener('touchmove', function(e) {
console.log('==========touchmove===========');
Fn(e);
})
//手指抬起
box.addEventListener('touchend', function() {
console.log('============touchend==========');
});
//被打斷后出發(fā)
box.addEventListener('touchcancel', function() {
alert('============被打斷了================');
})
var touchesH1 = document.querySelector('#box h1:nth-of-type(1)');
var targettouchesH1 = document.querySelector('#box h1:nth-of-type(2)');
var changetouchesH1 = document.querySelector('#box h1:nth-of-type(3)');
function Fn(e) {
touchesH1.innerHTML = 'touches' + e.touches.length;
targettouchesH1.innerHTML = 'targettouches' + e.targetTouches.length;
changetouchesH1.innerHTML = 'changetouches' + e.changedTouches.length;
}
// 使用touch庫(kù)（移動(dòng)端）
$('#box').tap(function() {
console.log('====tap====')
})
$('#box').longTap(function() {
console.log('====long tap====')
})
$('#box').doubleTap(function() {
console.log('====double tap====')
})
$('#box').swiperLeft(function() {
console.log('====left tap====')
})
// 使用zepto庫(kù)（移動(dòng)端）
$("#box").tap(function() {
console.log('======tap=========');
})
$("#box").singleTap(function() {
console.log('======singleTap=========');
})
$("#box").doubleTap(function() {
console.log('======doubleTap=========');
})
$("#box").longTap(function() {
console.log('======longTap=========');
})
$("#box").swipe(function() {
console.log('======swipeTap=========');
})
// 自定義Touch事件庫(kù)
//封裝自定義的touch事件庫(kù)
//注意:這里前面一個(gè)分號(hào)，是為了防止引用其他庫(kù)的時(shí)候，那個(gè)庫(kù)沒有分號(hào)結(jié)尾，以后代碼壓縮的話容易出問題
;
(function(window, undefined) {
var query = function(selector) {
return query.fn.init(selector);
};
query.fn = query.prototype = {
//初始化方法，就是模擬獲取元素的方法，但這里獲取的不是真正的元素，真正的元素存取在與整個(gè)對(duì)象的element屬性中
init: function(selector) {
if (typeof selector == 'string') {
this.element = document.querySelector(selector);
return this;
}
},
//單擊，handler是回調(diào)函數(shù)，就是單擊之后做出的響應(yīng)功能
tap: function(handler) {
this.element.addEventListener('touchstart', touchFn);
this.element.addEventListener('touchend', touchFn);
//用來區(qū)分和長(zhǎng)按的時(shí)間變量，做一個(gè)時(shí)間差判斷
var startTime, endTime;
function touchFn(e) {
switch (e.type) {
case 'touchstart':
//按下的時(shí)候記錄一個(gè)時(shí)間
startTime = new Date().getTime();
break;
case 'touchend':
//離開的事件記錄一個(gè)時(shí)間
endTime = new Date().getTime();
if (endTime - startTime < 500) {
//在手勢(shì)離開的時(shí)候，回調(diào)
handler();
}
break;
}
}
},
//長(zhǎng)按
longTap: function(handler) {
this.element.addEventListener('touchstart', touchFn);
this.element.addEventListener('touchend', touchFn);
//這個(gè)移動(dòng)事件是為了解決與其他事件沖突問題
this.element.addEventListener('touchmove', touchFn);
var timeId;
function touchFn(e) {
switch (e.type) {
case 'touchstart':
//按下達(dá)到500ms，我們認(rèn)為是長(zhǎng)按
clearTimeout(timeId);
timeId = setTimeout(function() {
handler();
}, 500);
break;
case 'touchend':
//離開的時(shí)候清空定時(shí)器
clearTimeout(timeId);
break;
case 'touchmove':
//一旦移動(dòng)了就清空長(zhǎng)按定時(shí)器
clearTimeout(timeId);
break;
}
}
},
//雙擊
doubleTap: function(handler) {
this.element.addEventListener('touchstart', touchFn);
this.element.addEventListener('touchend', touchFn);
//記錄次數(shù)
var tapCount = 0,
timeId;
function touchFn(e) {
switch (e.type) {
case 'touchstart':
//按下的時(shí)候記錄一次
tapCount++;
//剛進(jìn)來的時(shí)候，就清空一下定時(shí)器
clearTimeout(timeId);
timeId = setTimeout(function() {
//如果達(dá)到500ms，我們認(rèn)為就不是雙擊，要把tapCount清零
tapCount = 0;
}, 500);
break;
case 'touchend':
//離開的時(shí)候清空定時(shí)器
if (tapCount == 2) {
//當(dāng)按下2次的時(shí)候，才算雙擊
handler();
//觸發(fā)雙擊之后，點(diǎn)擊次數(shù)清零
tapCount = 0;
//清空定時(shí)器
clearTimeout(timeId);
}
break;
}
}
},
//左滑
swiperLeft: function(handler) {
this.element.addEventListener('touchstart', touchFn);
this.element.addEventListener('touchend', touchFn);
//手勢(shì)觸發(fā)的坐標(biāo)
var startX, startY, endX, endY;
function touchFn(e) {
switch (e.type) {
case 'touchstart':
//按下的時(shí)候記錄起始的坐標(biāo)
startX = e.targetTouches[0].pageX;
startY = e.targetTouches[0].pageY;
break;
case 'touchend':
//離開的時(shí)候記錄下終止坐標(biāo)
endX = e.changedTouches[0].pageX;
endY = e.changedTouches[0].pageY;
//判斷是否是左右滑&& //判斷具體是左滑，還是右滑
if (Math.abs(endX - startX) >= Math.abs(endY - startY) && (startX - endX) >= 25) {
handler();
}
break;
}
}
},
}
query.fn.init.prototype = query.fn;
window.$ = window.query = query;
}(window, undefined))
</script>
</html>
到此這篇關(guān)于CSS彈性布局FLEX,媒體查詢及移動(dòng)端點(diǎn)擊事件的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)CSS彈性布局內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了css flex 彈性布局詳解的相關(guān)資料,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-04-02- 下面小編就為大家?guī)硪黄狢SS彈性盒模型flex在布局中的應(yīng)用詳解。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-05-24
CSS 彈性布局Flex詳細(xì)講解(Flex 屬性詳解、場(chǎng)景分析)
Flex 是 Flexible Box 的縮寫，意為"彈性布局"，用來為盒狀模型提供最大的靈活性，這篇文章主要介紹了Css 彈性布局Flex詳細(xì)介紹(Flex 屬性詳解、場(chǎng)景分析),需要2023-02-28
