flex布局

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 上一篇文章 介绍了Flex布局的语法，今天介绍常见布局的Flex写法。 你会看到，不管是什么布局，Flex往往都可以几行命令搞定。 我只列出代码，详细的语法解释请查阅 《Flex布局教程：语法篇》 。我的主要参考资料是 Landon Schropp 的文章和 Solved by Flexbox 。 一、骰子的布局 骰子的一面，最多可以放置9个点。 下面，就来看看Flex如何实现，从1个点到9个点的布局。你可以到 codepen 查看Demo。 如果不加说明，本节的HTML模板一律如下。 <div class="box"> <span class="item"></span> </div> 上面代码中，div元素（代表骰子的一个面）是Flex容器，span元素（代表一个点）是Flex项目。如果有多个项目，就要添加多个span元素，以此类推。 1.1 单项目 首先，只有左上角1个点的情况。Flex布局默认就是首行左对齐，所以一行代码就够了。 .box { display: flex; } 设置项目的对齐方式，就能实现居中对齐和右对齐。 .box { display: flex; justify-content: center; } .box { display: flex; justify-content:

来喽来喽，来学习喽 关于Flex 容器属性 项目属性 关于Flex Flex “弹性布局”，任何一个容器都可以指定为Flex 布局。 .box{ display:flex; } 采用 Flex 布局的元素，称为Flex容器（flex container），简称“容器”。它的所有子元素自动成为容器成员，成为flex项目（flex item），简称“项目”。 设为flex布局以后，子元素的float、clear和vertical-align属性将失效. 容器默认存在两根轴：水平的 主轴 （main axis）和垂直的 交叉轴 （cross axis）。 主轴的开始位置叫做main start，结束位置叫做main end； 交叉轴的开始位置叫做cross start，结束位置叫做cross end。 项目默认沿主轴排列。 单个项目占据的主轴空间叫做main size， 占据的交叉轴空间叫做cross size。 容器属性 flex-direction:row | row-reverse | column | column-reverse; 属性规定灵活项目的方向 row(默认): 主轴为水平方向，起点在左端，正序 row-reverse: 主轴为水平方向，起点在右端，相反的顺序 column: 主轴为垂直方向，起点在上沿 column-reverse:主轴为垂直方向，起点在上沿

这里是修真院前端小课堂，每篇分享文从 【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】 八个方面深度解析前端知识/技能，本篇分享的是：【 flex 布局】 大家好，我是 IT 修真院上海分院的王恒，一枚正直纯洁善良的王恒程序员。 今天给大家分享一下，修真院官网 web （职业）任务 5 ，深度思考中的知识点 ——flex布局 （1）背景介绍： 网页布局（ layout ）是 CSS 的一个重点应用。布局的传统解决方案，基于盒状模型，依赖 display 属性 + position 属性 + float 属性。它对于那些特殊布局非常不方便 2009 年， W3C 提出了一种新的方案 ----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。 （ 2 ）知识剖析： 什么是flex flex 是 Flexible Box 的缩写，意为 " 弹性布局 " ，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 Flex 布局。块级元素只需要 display 属性为 flex 即可。行内元素也可以使用 Flex 布局。 .box{ display: inline-flex ; } 。 Webkit 内核的浏览器，必须加上 -webkit 前缀。 2.

CSS优化界面 CSS选择器：（C3） ①id选择器②类选择器③标签选择器 ④通配符选择器⑤伪类选择器:（链接伪类a:link/visited/hover/active，结构伪类E:frist-child/E:last-child/E:nth-child(n)，目标伪类:target） ⑥复合选择器 ⒈交集选择器[既标签又类名，连写] ⒉并集选择器[逗号] ⒊后代选择器[空格] ⒋子元素选择器[＞] ⑦属性选择器 ⑴E[attr] （attr是属性值） ⑵E[attr=val]（全等） ⑶E[attr^=val]（属性值以val开头）⑷E[attr$=val]（属性值以val结尾）⑸E[attr*=val]（任意位置包含val） ⑧伪元素选择器:: E::frist-letter，E::frist-line，E::selection，E::before，E::after。（前/后添加content）类选择、伪类选择器就是选取对象，而伪元素选择器本质是插入一个行内元素（盒子）审查不到标签却能显示盒模型，要伪元素不占位要用绝对定位。 CSS简写： ①background:url(images/x.png) no-repeat fixed center -25px,url(images/x.png) no-repeat scroll center -25px #000;颜色最后加

介绍： css3 的Flex弹性盒的布局是一个用于页面布局的全新CSS3模块功能。它可以把列表放在同一个方向（从左到右或从上到下排列），并且让这些列表能延伸到占用可用的空间。较为复杂的布局可以通过嵌套一个伸缩容器（flex container）来辅助实现。 Flexbox可以简单快速的创建一个具有弹性功能的布局，当在一个小屏幕上显示的时候，Flexbox可以让元素在容器（伸缩容器）中进行自由扩展和收缩，从而容易调整整个布局。它的目的是使用常见的布局模式，比如说三列布局，可 以非常简单的实现。 css3引入的flex布局优缺点 ： 优点在于其容易上手，根据flex规则很容易达到某个布局效果。 缺点是：浏览器兼容性比较差，只能兼容到ie9及以上。 属性 ： display: flex; // 弹性盒，定义给父盒子让子元素在一排横向显示 值： flex 或 inline-flex将其定义为弹性容器。弹性容器内包含了一个或多个弹性子元素。 direction ： rto; //属性为 rtl (right-to-left),弹性子元素的排列方式也会改变，页面布局也跟着改变:从右向左排列 flex-direction : //属性指定了弹性子元素在父容器中的位置。 值： row：横向从左到右排列（左对齐），默认的排列方式。 row-reverse：反转横向排列（右对齐，从后往前排

Flex布局 相对定位和绝对定位 弹性盒模型 display flex-direction flex-wrap ：nowrap（不换行）/ wrap（换行，第一行在上方）/ wrap-reverse（换行，第一行在下方） justify-content align-items flex-flow： flex-direction ，flex-warp的缩写 flex-grow　　　　　　　　　　　　　　flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。 　　　　　　　　　　　　　　　　　　如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。 flex-shrink　　　　　　　　　　　　　 flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。 　　　　　　　　　　　　　　　　　　如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。负值对该属性无效。 flex-basis　　　　　　　　　　　　　　flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size

ui布局基础 一、flex布局 1、flex的容器和元素 2、flex容器属性详解 1>flex-direction不仅设置元素的排列方向，还设置主轴和交叉轴如下图主轴是由上到下 2>flex-wap决定元素如何换行（排列不下时） flex-wap：wap flex-wap：nowap flex-wrap: wrap-reverse 3>flex-flow 是flex-direction和flex-wap的简写 4>justify-content元素再主轴上的对齐方式 justify-content: flex-end justify-content: flex-start justify-content: center justify-content: space-around(在主轴上所占的空间是一样的) justify-content: space-between（两端对齐，中间的间隔是一样的） 5>aligin-items元素再交叉轴的对齐方式 align-items: flex-start align-items: flex-end align-items: center align-items: stretch（不设置高度时，自动使每个item占满整个容器的高度） align-items: baseline（让元素以元素里面的一行文字的基线对齐） Index.wxml

一、flex布局基础 二、相对定位和绝对定位 flex的容器和元素 主轴（左-右），交叉轴（上-下） flex容器属性详解 flex-direction 决定元素的排列方向（默认row column） flex-wrap 决定元素如何换行（排列不下时） （nowrap不换行 wrap换行 wrap-reverse反转） flex-flow flex-direction 和flex-wrapde 的简写 justify-content 元素在主轴上的对其方式 （flex-start flex-end center space-around space-between） align-items 元素在交叉轴的对其方式 ( flex-start flex-end center stretch baseline ) flex元素属性详解 flex-grow 当有多余空间时，元素的放大比例 默认是1，等比缩小 0，保持不变，不被压缩 10 压缩10倍 flex-shrink 当空间不足时，元素的缩小比例 flex-basis 元素在主轴上占据的空间 250px 写rpx不解析 flex 是grow、shrink、basis的简写 order 定义元素的排列顺序 order: 4 2 3 1 align-self 定义元素自身的对其方式 align-selft: flex-end; 来源：

1、1rpx = 0.5px = 1物理像素 2、开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准 3、在较小的屏幕上不可避免的会有一些毛刺，请在开发时尽量避免这种情况 4、样式导入 使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。 例： @import "common.wxss"; .middle-p { padding:15px; } 5、style：静态的样式统一写到 class 中。style 接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度。 例： <view style="color:{{color}};" /> 6、class：用于指定样式规则，其属性值是样式规则中类选择器名(样式类名)的集合，样式类名不需要带上.，样式类名之间用空格分隔。 <view class="normal_view" /> 7、定义在 app.wxss 中的样式为全局样式，作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 app.wxss 中相同的选择器。 ****************** 关于flex布局 1、flex-direction 决定元素的排列方向 2、flex-wrap 决定元素如何换行（排列不下时）

弹性盒属相文档详细介绍 display:flex; 声明本元素是弹性盒 容器 如果目标元素是行内元素 使用 display:inline-flex; flex-direction 取值 描述 row 默认值 ,弹性盒子元素按X轴方向顺序排列 row-reverse 弹性盒子元素按照X轴风向逆序排列 column 弹性盒子元素按照Y轴方向顺序排列 column-reverse 弹性盒子元素按照Y轴方向逆序排列 flex-wrap 取值 描述 nowrap 默认值，flex子元素只会单行显示，flex子元素过多会 溢出 容器，不会开始新行 wrap flex子元素可以显示多行，超出的部分会放到新行 wrap-reverse flex子元素可以显示多行，只不过会 反转 显示（不是 逆序 ） justify-content 设置子元素在X轴方向的排列 取值 描述 flex-start 弹性盒子元素以起始元素对齐（类似与不改变子元素顺序的 左 浮动） flex-end 弹性盒子元素以结束位置对齐（类似与不改变子元素顺序的 右 浮动） center 弹性盒子元素向行中间位置显示 space-between 弹性盒子元素平均的分布在行里，第一个与起始位置边界对其，最后一个以结束位置边界对齐 space-around 弹性盒子元素会平均的分布在行里，两端保留了子元素与子元素之间距离大小的一半