flex布局

flex布局 转自阮一峰老师：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 Flex 布局。 基本概念 使用flex布局的元素称为“容器”（flex container），子元素称为”项目“（flex item） 语法 .box { display : flex ; } 特殊的，Webkit 内核的浏览器，必须加上 -webkit 前缀。 .box { display : -webkit-flex ; display : flex ; } 用一张图来展示一个使用flex布局的元素 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BD06GS8t-1583728198671)(C:\Users\杜广楠\Desktop\bg2015071004.png)] 容器中有两根轴，水平的主轴（main axis）和垂直的交叉轴（cross axis） 主轴开始的位置为 main start ，结束的位置为 main end 交叉轴开始的位置为cross start ，结束的位置为 cross end 项目中水平的称为main size，垂直的称为cross size

** 关于flex定位讲解 ** 首先我们要知道flex是我们移动端常用布局，当然pc端也可以，接下来我们了解一下flex： 整体分为两部分： 一般情况下语法添加在父容器，即display：flex 默认情况下，在弹性盒子元素中元素容器左右排列，即flex-direction：row 还有就是写在子元素里 接下来我们了解听他的每一个属性 display：flex，这个属性就是改变我们正常盒模型变成弹性盒模型 flex-direction： 这个属性是用来子项的整体布局方向，默认值是row 从左到右排列，当值为column 这个代表列 从上到下排列 flex-war：warp 换行值，默认nowrap 不换行。 justify-content：决定主轴方向上子项对齐和分布方式，一般常用值space-around：就是每个flex两侧都环绕互不相干，spac-evenly：代表flex两侧空白间距相同，默认值是flex-start，子项都在起始位置对齐。 align-items，flex子项相对于flex容器在侧轴相对方式，也可理解为flex垂直居中的方式，取值：center居中对齐 ，flex-end底对齐，flex-start，默认值子项拉伸。 align-content：这个值和justify-content相反的操作，并且最小需要两行才能看出效果，值和justify

1.Row 该组件中的子元素以水平排列 2.Column 该组件中的子元素以垂直排列 在这两个组件中，都可以用mainAxisAlignment来设置主轴中子元素的排列效果。用crossAxisAlignment来设置次轴的排列效果。 3.当我们需要等比排列子元素时，可以用Expand来实现。 4.当我们需要设置边距时，可以用Padding或者SizedBox来实现。 示例代码： class RandCTest extends StatelessWidget{ @override Widget build(BuildContext context) { // TODO: implement build return Padding( padding: EdgeInsets.all(10), child: Column( children: <Widget>[ Container( color: Colors.black, height: 200, ), SizedBox( height: 10, ), Container( height: 100, child: Row( children: <Widget>[ Expanded( flex: 2, child: Image.network( "https://ss1.bdstatic.com/70cFuXSh

为什么要持续学习呢？ 大学之道，在明明德，在亲民，在止于至善。知止而后有定，定而后能静，静而后能安，安而后能虑，虑而后能得。物有本末，事有终始，知所先后，则近道矣。 男人的极大幸运在于，他，不论在成年还是在小时候，必须踏上一条极为艰苦的道路，不过这是一条最可靠的道路；女人的不幸则在于被几乎不可抗拒的诱惑包围着；她不被要求奋发向上，只被鼓励滑下去到达极乐。当她发觉自己被海市蜃楼愚弄时，已经为时太晚，她的力量在失败的冒险中已被耗尽。 关于小程序配置 app.json 文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab [底部或顶部菜单]等。 app.json中不能添加任何注释，key和value必须用双引号引起来，否则会报错。 pages 接受一个数组，每一项都是字符串，来指定小程序由哪些页面组成。每一项代表对应页面的【**路径+目录名+文件名(不包含后缀名)】**信息，数组的第一项代表小程序的初始页面(首页)。小程序中新增/减少页面，都需要对 pages 数组进行修改。 注：数组的第一项为小程序初始页面 概述 从事过网页编程的人知道，网页编程采用的是 HTML + CSS + JS 这样的组合，其中 HTML 是用来描述当前这个页面的结构，CSS 用来描述页面的样子，JS 通常是用来处理这个页面和用户的交互。 同样道理

首先明确一点是， flex 是 flex-grow 、 flex-shrink 、 flex-basis 的缩写。故其取值可以考虑以下情况： flex 的默认值是以上三个属性值的组合。假设以上三个属性同样取默认值，则 flex 的默认值是 0 1 auto。同理，如下是等同的： .item {flex: 2333 3222 234px;} .item { flex-grow: 2333; flex-shrink: 3222; flex-basis: 234px; } 当 flex 取值为 none ，则计算值为 0 0 auto，如下是等同的： .item {flex: none;} .item { flex-grow: 0; flex-shrink: 0; flex-basis: auto; } 当 flex 取值为 auto ，则计算值为 1 1 auto，如下是等同的： .item {flex: auto;} .item { flex-grow: 1; flex-shrink: 1; flex-basis: auto; } 当 flex 取值为一个非负数字，则该数字为 flex-grow 值， flex-shrink 取 1， flex-basis 取 0%，如下是等同的： .item {flex: 1;} .item { flex-grow: 1; flex-shrink:

flex布局是一种可以完美的解决响应的布局，非常的美妙。关于flex布局的属性太多太多了。但是我们掌握最关键，常见的布局，就是可以的了。 flex布局包括两个东西，一个叫做 容器 ，还有一个叫做 flex项目 ,这样子说起来好累，我们还是上代码 <div class="box"> // 这个box就是容器　　<div class="item"></div>　　<div class="item"></div> //里面的内容就是flex项目</div> 我们操作flex布局，只需要在容器上面，添加一个属性 display : flex ，如下面的代码 <div class="box"> 　　<div class="item"></div> 　　<div class="item"></div> 　　<div class="item"></div> 　　<div class="item"></div> </div> .box{ 　　width: 500px; 　　 display: flex; } .box .item{ 　　width: 100px; 　　height: 100px; 　　margin: 10px; 　　background: red; } 没有给里面的flex项目添加任何属性，仅仅是设置了一下显示的长宽的颜色，就可以实现排列布局。 当然，这个显示就是一个默认的样式

CSS代码中常见这样的写法：flex:1 这是 flex 的缩写： flex-grow 、 flex-shrink 、 flex-basis ，其取值可以考虑以下情况： 1. flex 的默认值是以上三个属性值的组合。假设以上三个属性同样取 默认值 ，则 flex 的默认值是 0 1 auto。同理，如下是等同的： .item {flex: 2333 3222 234px;} .item { flex-grow: 2333; flex-shrink: 3222; flex-basis: 234px; } 2. 当 flex 取值为 none ，则计算值为 0 0 auto，如下是等同的： .item {flex: none;} .item { flex-grow: 0; flex-shrink: 0; flex-basis: auto; } 3. 当 flex 取值为 auto ，则计算值为 1 1 auto，如下是等同的： .item {flex: auto;} .item { flex-grow: 1; flex-shrink: 1; flex-basis: auto; } 4. 当 flex 取 值为一个非负数字 ，则该数字为 flex-grow 值， flex-shrink 取 1， flex-basis 取 0%，如下是等同的： .item {flex: 1;}

使footer保持在页面的底部，是常见的需求，之前面试的时候也遇见了一个这样的问题，今天在这里记录下css实现的方式。 使footer保持在页面的底部，需要考虑header+content部分不够多的情况，在页面下方会留出部分的空白，如： 方法一：采用绝对定位方式。 html代码： <body> <div class="container"> <header>header</header> <section>content</section> <footer>footer</footer> </div> </body> css代码： body,html{ height: 100%; } .container{ position:relative; padding-bottom:150px; //此次为footer的高度或大于footer的高度 width:100%; min-height: 100%; box-sizing: border-box; } header{ width: 100%; height: 100px; } section{ width: 100%; height: 300px; } footer{ position:absolute; width:100%; height: 150px; left: 0; bottom: 0; } 方法二：flex布局 注意

1.说一下css盒子模型 Css盒子本质上是一个盒子，封装周围的HTML元素，它包括：外边距，边框，内边距和内容。Css盒子模型包括IE盒子模型标准的W3C盒子模型。这两种盒子模型都包含margin，border，padding，和content。不同的是，标准W3C盒子模型中content不包含任何内容，而IE盒子模型中content包含border和padding，在标准盒子模型中width指content部分的宽度，而IE盒子模型中width=content+padding+border这三个部分的宽度，故使得计算整个何止的宽度时存在差异： 标准的盒子模型的盒子宽度是：左右border+左右padding+width IE盒子模型中盒子宽度：width 在CSS3中引入的border-sizing属性，border-sizing：center-box表示标准盒子模型，border-box表示IE盒子模型，padding-box表示这个属性值的宽度包含了左右的padding+width 2.画一条0.5px的线 （1）采用mwta viewport的方式 <meta name="viewport" content="width=device-width,initial-scale=0.5,user-scalable=0"> Initial-scale设置页面初始缩放值为0.5

　　之前就想学习一下微信小程序，只不过前段时间在学习Java中的一些线程的知识，拖了很久也没有实行这个目标，今天终于从网上找了一个完整的视频，来从头学习完整的开发流程，现在逐渐有一种想法，就是自己构建项目，开发项目完成的一整套流程，想弄的特别熟悉，没事的时候，有什么好的想法的时候，可以自己开发一个项目，从今天起，重视项目的构建，独立开发！这次是跟着视频讲解来做一下笔记！ 一、构建项目 微信小程序的开发需要借助微信提供的生态，到微信公众平台上去申请账号，得到appId，做一些开发小程序的准备工作，具体网站是： https://mp.weixin.qq.com/ 1、新建项目 我用的开发者工具是微信官方提供的开发者工具，下载的是：稳定版 Stable Build (1.02.1904090)，用起来还是挺好用的，哈哈，第一次使用，还是不错的，可能也是因为没有用过其他的吧，进入正题吧！ （1）创建一个空白的项目，也可以是官方提供的有一些基本的文件的项目，这里选择的是把一些文件都删除掉，只剩下pages文件夹以及project.config.json，这个是项目的配置文件，然后从头开始新建文件以及文件夹，需要新建的文件以及文件夹如下： app.json 注意：这个文件中是需要写一些代码的，不然后面没办法新建page模块，只需要写如下代码：{}大括号，代表的是一个对象， 官方app