FLEX | 易学教程

4、flex布局容器六⼤属性之justify-content

阅读更多关于 4、flex布局容器六⼤属性之justify-content

justify-content justify-content属性设置⼦项⽬在主轴上的对⻬⽅式。值描述示例 flex-start 默认值。左对⻬ 1 flex-end 右对⻬ 2 center 居中 3 space-between 两端对⻬，⼦项⽬之间间隔⼀样 4 space-around 每个⼦项⽬两侧的间隔⼀样 5 源码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>justify-content</title> </head> <style> .flexTest { display: flex; width: 100wh; border: 1px solid red; /* 默认值。左对⻬ */ justify-content:flex-start; /* 右对⻬ */ justify-content:flex-end; /* 居中 */ justify-content:center; /* 两端对⻬，⼦项⽬之间间隔⼀样 */ justify-content:space-between; /* 每个⼦项⽬两侧的间隔⼀样 */

微信小程序开发- 3

阅读更多关于微信小程序开发- 3

微信小程序开发-开发流程和开发基础 - 1 微信小程序开发-2- 生命周期、事件、原生组件微信小程序开发- 3 - 原生组件(一) 微信小程序开发- 4 - 原生API 微信小程序开发- 5 - 开放功能微信小程序官方文档地址 https://developers.weixin.qq.com/miniprogram/dev/component/movable-view.html 小程序开发框架 - 组件类型视图容器基础内容表单组件导航组件地图组件媒体组件开放能力画布视图容器 view 容器组件 scroll-view 滚动组件 swiper 轮播组件 swiper-item 仅可放置在swiper组件中，宽高自动设置为100%。 movable-area 可移动区域 movable-view 支持移动和缩放的组件 cover-view 容器组件与view不同是可以覆盖在原生组件之上，如canvas、video cover-image 覆盖在原生组件之上的图片视图。可覆盖的原生组件同cover-view，支持嵌套在cover-view里。 view组件属性名默认值说明 hover-class node 指定按下去的样式类；值为none，没有点击态效果 hover-stop-propagation false 指定是否阻止本节点的祖先节点出现点击态

CSS

阅读更多关于 CSS

我的页面结构如下： <div class="parent"> <div class="child-left floatLeft"> </div> <div class="child-right floatLeft"> </div> </div> 现在， child-left DIV将有更多内容，因此 parent DIV的高度根据孩子DIV增加。但问题是 child-right 身高不会增加。我怎样才能使它的高度等于它的父母？ #1楼请将parent div设置为 overflow: hidden 然后在子div中你可以为padding-bottom设置很大的数量。例如 padding-bottom: 5000px margin-bottom: -5000px 然后所有子div都将是父级的高度。当然，如果你试图将内容放在父div中（在其他div之外），这将无法工作 .parent{ border: 1px solid black; overflow: hidden; height: auto; } .child{ float: left; padding-bottom: 1500px; margin-bottom: -1500px; } .child1{ background: red; padding-right: 10px; } .child2{ background

Linux | 文件的时间属性

阅读更多关于 Linux | 文件的时间属性

在我们进行系统运维的时候，会需要去查看系统下文件的一些时间属性，如创建时间、修改时间等，比如查看一个应用的配置文件的修改时间，用于初步判断该文件是否被篡改过。那么本文就针对Linux系统下的文件的时间属性来做一个介绍。文件的时间属性在Linux系统下，文件的时间属性主要分为三种：访问时间 atime：也就是Access time。读一次文件的内容，该文件的atime就会更新。比如常见的使用more、cat对该文件进行查看时，其atime将更新。修改时间 mtime：也就是Modify time。对该文件进行内容上的修改，该文件的mtime就会更新。比如常见的使用vi、vim对文件进行修改后保存，其mtime将更新。文件属性变更时间 ctime：也就是Change time。对该文件的属性状态进行修改，改文件的ctime就会更新。比如文件名、内容、大小、权限、所属组等改变时，其ctime将更新。 ll命令查看文件时间属性使用ll或ls -l命令查看的就是mtime：使用ll --time=atime或ls -lu查看的就是atime：使用ll --time=ctime或ls -lc查看的就是ctime：当然，我们还可以使用stat命令来同时查看文件的三种时间属性：触发更新时间的几个命令效果使用cat命令来触发其atime更新：

十年开发经验告诉你需要掌握哪些核心技能

阅读更多关于十年开发经验告诉你需要掌握哪些核心技能

把编程吃透程序员（英文 Programmer）是从事程序开发、程序维护的专业人员。那么作为一名拥有 10 年开发经验的老鸟，我认为程序员最核心的生存技能当然是熟练地掌握一门编程语言。这也是编程初学者最应该注意的，但往往会被忽视。别的编程语言我不太懂，Java 我是懂的。假如你想把 Java 这门编程语言吃透，我建议你这么做。轻松驾驭 IDE，比如 Eclipse 和 IDEA。快速查阅 Javadoc。掌握流程控制语句。理解类和对象。掌握三大特性：封装、继承和多态。会用接口。懂得泛型。掌握异常处理。熟悉 java.util 和 java.lang 包下的类。略懂 lambda 表达式和 Stream API。掌握 IO 流。会用 Socket 编程。掌握并发编程。懂得性能优化。会用 Junit 等单元测试工具。会用 Log4J 等日志工具。熟悉 Mybatis、MySql 和 Spring。入门 SpringBoot。熟悉设计模式。熟练地掌握一门编程语言，就是程序员的立命之本。知道了自己是靠什么吃饭的，就应该在这方面狠下功夫。 2 、巧用数据结构和算法说起数据结构和算法，我就觉得不好意思，脸上泛起难为情的红晕。但为什么我还要说呢？因为我深受其苦。我是一个农村走出来的娃，体会过其中的酸甜苦辣，所以我会奉劝各位

flex分列布局

阅读更多关于 flex分列布局

.flex-row { display: flex; } .flex-row::after { display: none } .flex-row-justify-center { -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center } .flex-row-justify-end { -webkit-box-pack: end; -webkit-justify-content: flex-end; justify-content: flex-end } .flex-row-justify-space-between { -webkit-box-pack: justify; -webkit-justify-content: space-between; justify-content: space-between } .flex-row-justify-space-around { -webkit-justify-content: space-around; justify-content: space-around } .flex-row-align-center { -webkit-box-align: center; -webkit-align-items:

戏说前端之CSS编码规范

阅读更多关于戏说前端之CSS编码规范

前言项目启动时 css 应该注意哪些问题文件名规范文件名建议用小写字母加中横线的方式。为什么呢？因为这样可读性比较强，看起来比较清爽，像链接也是用这样的方式，例如 // 地址: github的地址 https://github.com/wangjeaf/ckstyle-node 那为什么变量名不用小写字母加小划线的方式，如：family_tree，而是推荐用驼峰式的familyTree？C语言就喜欢用这种方式命名变量，但是由于因为下划线比较难敲(shift + -)，所以一般用驼峰式命名变量的居多。引入CSS文件的link可以不用带type=“text/css”，如下代码： <link rel="stylesheet" href="test.css"> 因为link里面最重要的是rel这个属性，可以不要type，但是不能没有rel。 JS也是同样道理，可以不用type，如下代码： <script src="test.js"></script> 没有兼容性问题。属性书写顺序属性的书写顺序对于浏览器来说没有区别，除了优先级覆盖之外。但是如果顺序保持一致的话，扫一眼可以很快地知道这个选择器有什么类型的属性影响了它，所以一般要把比较重要的属性放前面。比较建议的顺序是这样的：你可能会觉得我平时差不多就是这么写的，那么说明你有一个比较好的素养。并且我觉得规则不是死，有时候可以灵活

自学前端不用慌张！零基础学习前端必备手册，学成月薪12K

阅读更多关于自学前端不用慌张！零基础学习前端必备手册，学成月薪12K

随着互联网的深入发展，前端开发工程师一跃成为市场上非常抢手的人才。很多同学，包括以前做UI的、Java的、或者对于IT完全零基础的同学都想学习前端。下图是网上流传甚广的一张前端学习思维导图，很多初学者表示看到这些密密麻麻的知识点就已经晕了。确实，前端是一门涵盖面很广的学科。但是想学前端的你也不用慌张，内容虽多但有迹可循，只要循序渐进就不怕学不好前端！那么对于零基础的一个学员该怎么学习前端呢？工具篇工欲善其事，必先利其器，所以在开始之前选择一个合适好用的编辑器是很重要的，工具不再多，在于好用就行，除了编辑器，我们也要掌握其他的一些工具，才能够让我们在学习的道路上更加的顺畅。 WebStorm 不必多说，前端最强大的编辑器，特别是那无敌的智能提示，但是它的缺点在于如果项目多于大时，出现的卡顿让很多人苦恼。 Google 在使用「Google」之前必须学会***，不然无法访问，学会使用搜索可以帮助我们解决很多问题，一个人的知识是有限的，掌握了搜索的技巧才能以不变应万变，很多时候百度出来的东西重复性很大，最重要的是垃圾信息很多，在百度找不到的答案，在这里很容易找到，Google 是我的必备搜索。 Github 全球最大的「同性」开源交流社区，没有账号的赶紧注册，在这有很多优秀的资源项目，各种大神。观摩优秀代码是我们学习的很好路径。另外在开发过程中，很多时候任务重、时间紧

ie11 flex兼容问题

阅读更多关于 ie11 flex兼容问题

在ie11 下 flex: 1 解析为1 1 0, 而不是其他浏览器的1 1 auto, 所以这时还要对flex: 1进行修改，使用flex-grow: 1 .content-wrapper { display : flex ; flex-grow : 1 ; /* flex:1 改变成flex-grow: 1 */ } 来源： oschina 链接： https://my.oschina.net/carbenson/blog/3168372

为什么互联网大厂如此重视web前端工程师？你知道吗？

阅读更多关于为什么互联网大厂如此重视web前端工程师？你知道吗？

为什么新浪、搜狐、网易、腾讯、阿里巴巴等在内的各种规模的IT企业，都对web前端越来越重视了呢？ 1、web前端的由来以前会Photoshop和Dreamweaver就可以制作网页。随着时代web前端设计的发展，现在只掌握这些已经远远不够了。无论是开发难度上，还是开发方式上，现在的网页制作都更接近传统的网站后台开发，所以现在不再叫网页制作，而是叫Web前端开发。 Web前端开发在产品开发环节中的作用变得越来越重要，而且需要专业的前端设计师才能做好，这方面的专业人才近两年来倍受青睐。Web前端开发是一项很特殊的工作，涵盖的知识非常广，既有具体技术，又有抽象的理念。简单地说，它的主要职能是把网站的界面更好的呈现给用户。前端设计师是一个很新的职业，在国内乃至国际上真正开始受到重视的时间不超过5年。但是，随着Web2.0概念的普及和W3C组织的推广，网站重构的影响力正以惊人的速度增长。XHTML+CSS布局、DHTML和Ajax像一阵旋风，铺天盖地地席卷而来，包括新浪、搜狐、网易、腾讯、阿里巴巴等在内的各种规模的IT企业都对自己的网站进行了重构。 2、web前端核心技术有哪些？随着人们对用户体验的要求越来越高，前端开发的技术难度越来越大，前端设计师这一职业开发技术包括三个要素:HTML、CSS和JavaScript，但随着RIA的流行和普及，Flash/Flex

订阅 FLEX