Flex Flex layout
Definition: Elements of a Flex layout are called Flex containers, or “containers” for short. All of its child elements automatically become container members, called Flex projects
The container has two axes by default: a horizontal main axis and a vertical cross axis.
The starting position of the spindle (where it intersects with the border) is called main start and the ending position is called main end; The starting position of the intersecting axis is called cross start and the ending position is called cross end.
By default, items are arranged along the main axis. The main axis space occupied by a single project is called main size, and the cross axis space occupied is called cross size.
How to use an elastic layout: just set up the containerdisplay:flex
Container attribute
.box { flex-direction: row | row-reverse | column | column-reverse; }row(Default) : The main axis is horizontal and the starting point is on the left.row-reverse: The main axis is horizontal and the starting point is at the right end.column: The main axis is vertical, and the starting point is on the upper edge.column-reverse: The main axis is vertical and the starting point is down.
<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>Copy the code
.box { flex-wrap : nowrap| wrap | wrap-reverse ; }nowrap(Default) : no line breaks.wrap: newline, first line above.wrap-reverse: newline, first line below.
<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>Copy the code
.box {justify-content: flex-start | flex-end | center | space-between | space-around; }flex-start(Default) : Left-justifiedflex-end: the right alignment,centerCenter:space-between: Align both ends with equal spacing between items.space-around: Equal spacing on both sides of each item. As a result, the spacing between items is twice as large as the spacing between items and the border.
<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>Copy the code
.box { align-items: flex-start | flex-end | center | baseline | stretch; }flex-start: Aligns the starting point of the cross axis.flex-end: Aligns the ends of the intersecting axes.center: Midpoint alignment of cross axes.baseline: Baseline alignment of the first line of the project.stretch(Default) : If the item is not set to height or is set to Auto, it will fill the entire container height.
<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>Copy the code
The align-content property defines the alignment of multiple axes. This property has no effect if the project has only one axis.
.box {align-content: flex-start | flex-end | center | space-between | space-around | stretch; }flex-start: aligns with the starting point of the crossing axis.flex-endAlign with the endpoint of the intersecting axis.centerAlign with the midpoint of the intersecting axis.space-between: Aligned with both ends of the cross axes, the spacing between axes is evenly distributed.space-aroundThe spacing on both sides of each axis is equal. Therefore, the spacing between axes is twice as large as the spacing between axes and borders.stretch(Default) : Axis takes up the entire cross axis.
<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>Copy the code
Abbreviations:
flex-flow:flex-flowAttributes areflex-directionProperties andflex-wrapProperty. The default value isrow nowrap..box {flex-flow: <flex-direction> || <flex-wrap>; }
The project properties
orderProperty defines the order in which items are sorted. The smaller the value is, the higher the rank is. The default value is0..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>Copy the code
flex-growProperty defines the zoom scale of the project, default is0, that is, if there is spare space, do not enlarge. If all the projectsflex-growAttributes are1, they divide the remaining space equally (if any). If a project offlex-growProperties for2, other items are1, the remaining space occupied by the former term will be twice as much as the other terms..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>Copy the code
flex-shrinkProperty defines the reduction scale of the project, default to1That is, if there is insufficient space, the project will shrink.- If all the projects
flex-shrinkAttributes are1When the space is insufficient, it will be equally scaled down. If a project offlex-shrinkProperties for0, other items are1, the former does not shrink when the space is insufficient. - Negative values have no effect on this property.
.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>Copy the code
flex-basisProperty defines the amount of principal space that the project occupies before allocating excess space (main size). Based on this property, the browser calculates whether the main axis has extra space. Its default value isauto, the original size of the project. It can be set to the same value as the width or height attribute (e.g350px), the project will occupy a fixed space..item { flex-basis: <length> | auto; /* default auto */}
<style>
ul li:nth-of-type(1) {flex-basis:50%; } </style>Copy the code
align-selfProperty to allow a single item to have a different alignment than other items and be overriddenalign-itemsProperties. The default value isautoIs inherited from the parent elementalign-itemsProperty, if there is no parent elementstretch..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>Copy the code
flexattributeflexAttributes areflex-grow.flex-shrink和flex-basisShort for, the default value is0 1 auto. The last two attributes are optional..item { flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]}- This property has two shortcut values:
auto (1 1 auto)和none (0 0 auto). - It is recommended to use this attribute in preference to writing three separate attributes, as the browser will infer related values.
Media queries
<! DOCTYPEhtml>
<html>
<head>
<title></title>
</head>
<body>
</body>
<script type="text/javascript"></script>
<style type="text/css">
/* Media query a */
* {
margin: 0;
padding: 0;
}
body {
background-color: pink;
}
/* You can use @media Query to achieve a responsive layout effect, depending on the conditions, to set different styles */
/*screen width: 1200px; min-width: 1200px
@media only screen and (min-width:1200px) {
/* Write the style */
body {
background-color: red; }}/* When the screen width is greater than 800, less than 1199 display the style */
@media only screen and (min-width: 800px) and (max-width:1199px) {
body {
background-color: aqua; }}/* When the screen width is greater than 400, less than 640 display the style */
/*// If there is no connection part in the media query, the default part */ will be displayed
@media only screen and (min-width: 400px) and (max-width: 640px) {
body {
background-color: yellow; }}</style>
<! <meta name="viewport" content="width=device-width, <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>
Copy the codeMobile click event
<! DOCTYPEhtml>
<html>
<head>
<title></title>
</head>
<body>
</body>
<script type="text/javascript">
// Mobile gestures
var box = document.querySelector('#box')
// PC side click event
box.addEventListener('click'.function(e) {
console.log('===========click============');
console.log(e);
});
// Press your finger down
box.addEventListener('touchstart'.function(e) {
console.log('===========touchstart============');
// Fn(e);
})
// Move your finger
box.addEventListener('touchmove'.function(e) {
console.log('==========touchmove===========');
Fn(e);
})
// Raise your finger
box.addEventListener('touchend'.function() {
console.log('============touchend==========');
});
// Start after being interrupted
box.addEventListener('touchcancel'.function() {
alert('============ interrupted ================');
})
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;
}
// Use the touch library (mobile)
$('#box').tap(function() {
console.log('====tap===='The $()})'#box').longTap(function() {
console.log('====long tap===='The $()})'#box').doubleTap(function() {
console.log('====double tap===='The $()})'#box').swiperLeft(function() {
console.log('====left tap====')})// Use zepto library (mobile)
$("#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=========');
})
// Customize the Touch event library
// Encapsulates a custom touch event library
// Note: the first semicolon is used to prevent references to other libraries that do not end with a semicolon, which may cause problems in future code compression
;
(function(window.undefined) {
var query = function(selector) {
return query.fn.init(selector);
};
query.fn = query.prototype = {
// The initialization method simulates the method of getting an element, but this is not the real element. The real element is stored in the element property of the whole object
init: function(selector) {
if (typeof selector == 'string') {
this.element = document.querySelector(selector);
return this; }},// Click. Handler is a callback function that responds to a click
tap: function(handler) {
this.element.addEventListener('touchstart', touchFn);
this.element.addEventListener('touchend', touchFn);
// Use to distinguish and long press the time variable, do a time difference judgment
var startTime, endTime;
function touchFn(e) {
switch (e.type) {
case 'touchstart':
// Record a time when pressed
startTime = new Date().getTime();
break;
case 'touchend':
// The left event records a time
endTime = new Date().getTime();
if (endTime - startTime < 500) {
// When the gesture leaves, the callback
handler();
}
break; }}},/ / long press
longTap: function(handler) {
this.element.addEventListener('touchstart', touchFn);
this.element.addEventListener('touchend', touchFn);
// This movement event is intended to resolve conflicts with other events
this.element.addEventListener('touchmove', touchFn);
var timeId;
function touchFn(e) {
switch (e.type) {
case 'touchstart':
// Press to 500ms, we consider it a long press
clearTimeout(timeId);
timeId = setTimeout(function() {
handler();
}, 500);
break;
case 'touchend':
// Empty the timer when leaving
clearTimeout(timeId);
break;
case 'touchmove':
// Clear the long press timer once it is moved
clearTimeout(timeId);
break; }}},/ / double
doubleTap: function(handler) {
this.element.addEventListener('touchstart', touchFn);
this.element.addEventListener('touchend', touchFn);
// Record times
var tapCount = 0,
timeId;
function touchFn(e) {
switch (e.type) {
case 'touchstart':
// Record once when pressed
tapCount++;
// When you first come in, empty the timer
clearTimeout(timeId);
timeId = setTimeout(function() {
// If 500ms is reached, we think it is not double-click, we want to clear the tapCount to zero
tapCount = 0;
}, 500);
break;
case 'touchend':
// Empty the timer when leaving
if (tapCount == 2) {
// Double click when pressed twice
handler();
// After triggering the double click, the number of clicks is cleared to zero
tapCount = 0;
// Empty the timer
clearTimeout(timeId);
}
break; }}},/ / left smooth
swiperLeft: function(handler) {
this.element.addEventListener('touchstart', touchFn);
this.element.addEventListener('touchend', touchFn);
// Gesture triggered coordinates
var startX, startY, endX, endY;
function touchFn(e) {
switch (e.type) {
case 'touchstart':
// Record the starting coordinates when pressed
startX = e.targetTouches[0].pageX;
startY = e.targetTouches[0].pageY;
break;
case 'touchend':
// Record the end coordinates when leaving
endX = e.changedTouches[0].pageX;
endY = e.changedTouches[0].pageY;
// Check whether it is left or right && // check whether it is right or left
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>
Copy the code