flex布局，父元素加上如下代码即可： display: flex; justify-content: center; align-items :center;Flex布局将成为未来布局的首选方案。 Flex 是 Flexible Box 的缩写，意为“弹性布局”，用来为盒装模型提高最大的灵活性。任何一个容器都可以指定为 Flex 布局，需要设置 display: flex;
转载
2023-07-24 13:59:45
539阅读
一、order属性order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。二、flex-grow属性flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。三、flex-shrink属性f
转载
2017-10-23 23:00:56
757阅读
使用css3的flex模型实现一个居中布局
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <title>flex居中布局</title>
6 <style type="text/css">
转载
2021-02-11 17:20:00
245阅读
2评论
一、flex-direction属性row（默认值）：主轴为水平方向，起点在左端。row-reverse：主轴为水平方向，起点在右端。column：主轴为垂直方向，起点在上沿。column-reverse：主轴为垂直方向，起点在下沿。<style>
.box{
background: #0074D9;
&
转载
2017-10-23 21:55:56
941阅读
这是笔者读完阮一峰的《ES6标准入门》的总结，可称为《ES6标准入门的入门》，总结的知识点都比较通俗易懂，可为想大概了解ES6但没有时间阅读全书的人做一个参考。1.let 和 const暂时性死区 (Temporal Dead Zone)let和const命令声明的变量无变量提升，且都会被锁定在声明的代码块中，在let和const命令执行前，使用该变量都将报错，这一部分称为“暂时性死区”。var
阮一峰的网络日志click去阮一峰的网络日志flex布局教程页面
原创
2022-11-18 00:04:50
1037阅读
编程风格块级作用域字符串解构赋值对象数组函数Map结构Class模块ESLint的使用 本章探讨如何将ES6的新语法，运用到编码实践之中，与传统的JavaScript语法结合在一起，写出合理的、易于阅读和维护的代码。多家公司和组织已经公开了它们的风格规范，具体可参阅jscs.info，下面的内容主要参考了Airbnb的JavaScript风格规范。块级作用域 § ⇧
（1）let 取代 varE
转载
2023-12-27 09:02:20
47阅读
CSS3 Flex Box（弹性盒子） 一、简介 弹性盒子是 CSS3 的一种新的布局模式。 CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一
转载
2018-07-24 11:13:00
199阅读
2评论
动画(CSS3)动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。语法格式：animation:动画名称 动画时间 运动曲线（linear 匀速动画） 何时开始 播放次数 是否反方向;/*动画名称是自己定义的 go google*//*一般情况下，我们就用前2个 animation: go 2s*/ /*@keyfram...
原创
2021-09-02 09:50:02
305阅读
css3 flex弹性布局详解
原创
精选
2023-12-06 20:18:42
308阅读
很久不写博文，之前的长时间不上都关闭了，但随着工作时间长越来越长，对知识的积累和总结还真的是很重要的。所以奉劝码农们每天都还是要抽出来一点时间总结点东西，以后对你受益匪浅！！今天还是变谈CSS3里的flex怎么处理兼容的flex是个非常好用的属性，如果说有什么可以完全代替 float 和 position ，那么肯定是非它莫属了，虽然现在低版本浏览器不支持，可是对于移动来说兼容性不是问题，可是在安
原创
2016-06-27 23:00:56
2894阅读
一、说明 1.在以往的布局方案中，都是基于盒装模型，依赖display属性+position属性+float属性等。 他对于那些特殊布局非常不方便，比如，垂直居中等。 并且不同浏览器的盒模型还有些差异，需要考虑兼容等问题。 2.CSS Flexbox Flex布局，可以简便、完整、响应式实现各种页面
转载
2017-05-26 15:52:00
113阅读
2评论
1、ES6简介Node.js 是 JavaScript 的服务器运行环境（runtime）。它对 ES6 的支持度更高。除了那些默认打开的功能，还有一些语法功能已经实现了，但是默认没有打开。Babel 是一个广泛使用的 ES6 转码器，可以将 ES6 代码转为 ES5 代码，从而在老版本的浏览器执行。@babel/register模块改写require命令，为它加上一个钩子。此后，每当使
转载
2024-02-24 23:27:15
80阅读
弹性盒子是 CSS3 的一种新的布局模式。CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。一、浏览器支持表格中的数字表示支持该属性的第一个浏览器的版本号。紧跟在数字后面的 -webkit- 或 -...
转载
2020-02-10 11:15:00
148阅读
2评论
前言这篇文章主要是探究 Promise 的实现原理，对于使用方法，这里不做过多概述，如果还有对 Promise 使用方式不太了解的，Promise 是什么,为什么会出现 Promise？抽象表达：
Promise 是一门新的技术（ES6规范）Promise 是js 中进行异步变成的新解决方案,在没有 Promise 之前，旧方案是单纯使用回调函数具体表达：
从语法上来说： promis
转载
2023-09-30 22:51:05
383阅读
相关术语容器：包裹项目的标签，也是flex布局的空间项目：容器里的直接子元素，flex布局就是对项目的排列主轴：表示项目排列的方向，默认是x轴，即水平方向。项目永远排列在主轴的正方向侧轴：默认是y轴，表示项目在垂直方向的排列富裕空间管理： 表示当容器中存在富裕空间时，项目应该如何摆放弹性空间管理：表示当容器中存在富裕空间时，项目该如何充满空间属性解析容器属性display: flex; 将标签声明为弹性盒子flex-direction: row|row-reverse|column|co
原创
2021-07-09 10:50:31
217阅读
弹性盒子(伸缩盒)
注意，本篇会很长，非常长， 因为弹性盒子的知识点比较多
搜索 弹性盒子的属性 ctrl + F 如果觉得图太小， ctrl + +键
主要的属性有： (主要分两部分讲， 一部分讲 设置在父元素上的属性，一部分讲 设置在子元素上的属性， 还有最后一些简单的应用)
flex
flex-grow
flex-shrink
flex-basis
flex
转载
2021-07-23 17:47:07
155阅读
css3系列之弹性盒子 flex
原创
2021-07-26 16:40:53
277阅读
弹性盒子(伸缩盒)
注意，本篇会很长，非常长， 因为弹性盒子的知识点比较多
搜索 弹性盒子的属性 ctrl + F 如果觉得图太小， ctrl + +键
主要的属性有： (主要分两部分讲， 一部分讲 设置在父元素上的属性，一部分讲 设置在子元素上的属性， 还有最后一些简单的应用)
flex
flex-grow
flex-shrink
flex-basis
flex
原创
2021-07-26 17:14:28
127阅读
flex 容器 CSS 设定 display:flex 或者设定 display:inline-flex 时，就将当前盒子设置成容器了，容器有 6 个属性 属性 说明 flex-direction 主轴的方向 flex-warp 排不下时的换行方式 flex-flow 是flex-direction
原创
2021-07-30 14:11:26
146阅读
