flex布局

flex布局 flex布局 也叫作 弹性盒子布局 ，可以简便、完整、响应式的实现各种页面布局，同时也支持所有的浏览器。父级元素设置css样式为：display:flex。内容的位置用justify-content来控制，常用的属性有： space-between 、 space-around 、 center 、 left 、 right 。(注释：类名为father的盒子中写了4个类名为son的盒子) 一共有6个属性是添加给父级的，分别有： flex-direction 、 flex-wrap 、 flex-flow 、 justify-content 、 align-items 、 align-content 。 flex-direction 用来决定主轴的方向，默认值为row，所以默认横向排列。row|row-reserve|column|column-reserve。 flex-wrap 来决定换行，nowrap不能换行；wrap换行，多余的自动在左下方；wrap-reserve换行，多余的自动在左上方，默认值为nowrap。 flex-flow 是flex-direction和flex-wrap的简写，默认值为row nowrap。 .father { width: 500px; height: 150px; display: flex; justify-content

Flex-Layout Demostration [前言] “年味”在今天算是彻底散去了，大家记得吃元宵，元宵节快乐！ 从今天开始恢复周更，每周一篇 深入探索，技术深耕 ，大家一起加油吧! [导读] 闲来无事重新拾起 H.C.J (Html, CSS, Javascript),想要夯实自己的基础。年前的项目中不管是从大的框架还是小的实现细节，最终落地的时候总会因为基础不扎实而导致整个开发流程不是很 “顺畅” ，所以才会在闲暇时间啃啃书，来内观自己。 Page Layout - 谈到布局大脑里总会反射出几个关键词**“position, float , clear” -(令人咂舌的东西)，页面元素采用 合适的布局 会让你的页面给人的直观感受产生质的飞跃。 合适的布局**不仅仅由独特的美感，而且对于信息的展示更是锦上添花，同时对越代码的书写也会起到正向引导。 本篇文章主要谈的是 Flex ，利用Flex来对页面进行需要的布局，如何来操作，如何依照Flex的操作流程复现或是实现自己想要实现的页面效果。 [关键词] 布局(Layout)，Flex，Grid，响应式设计(Responsive Design) [提问] Flex到底是何物？ 如何使用Flex来复现你所见到的网页布局？ 如何使用Flex轻松的来完成你自己网页布局？ [正文] 一. CSS - Flex Flex

meta基础知识 H5页面窗口自动调整到设备宽度，并禁止用户缩放页面 <meta name=”viewport” content=”width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no” /> 忽略将页面中的数字识别为电话号码 <meta name=”format-detection” content=”telephone=no” /> 忽略Android平台中对邮箱地址的识别 <meta name=”format-detection” content=”email=no” /> 当网站添加到主屏幕快速启动方式，可隐藏地址栏，仅针对ios的safari <meta name=”apple-mobile-web-app-capable” content=”yes” /> <!– ios7.0版本以后，safari上已看不到效果 –> 将网站添加到主屏幕快速启动方式，仅针对ios的safari顶端状态条的样式 <meta name=”apple-mobile-web-app-status-bar-style” content=”black” /> <!– 可选default、black、black-translucent –> viewport模板

1、先手写代码 //写闭包 var cal = counter(); cal(); //num=? cal(); //num=? var cal2 = counter(); cal(); //num=? cal2(); //num=? function counter () { var num = 0 ; function add () { return num++; } return add; } 说一下每次的num，并解释原因。 2、说一下继承 写一个并进行讲解 我写的是组合构造式继承，并且改进，这个缺点主要是构造函数new了两次，改成组合寄生式，并且说了其优点。 Object.create()，自己手动实现，不用api。 3、说一下布局 水平和垂直方向居中 我说了两个，一个是利用flex局部，一个是利用transform，这两个都是针对高宽不确定的进行水平和垂直居中。 4、接着进行布局： float有什么值，作用是什么？ 一个inline的元素，一个block的元素，怎么实现让他俩一行。 5、接着谈布局 文字水平垂直居中text-align，line-heightyiji base-line的用法。 6、接着说flex 三个块元素，flex-grow分别设置为1、2、3，会怎么样展示。 把中间元素宽度设置为固定宽度为200px，那么剩余的空间怎么分配的？ flex:1

###组件的宽和高 基本跟CSS一样使用，但要注意是放在style中的对象中，即{{}}。 import React, { Component } from 'react'; import { AppRegistry, View } from 'react-native'; class FixedDimensionsBasics extends Component { render() { return ( <View> <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} /> <View style={{width: 100, height: 100, backgroundColor: 'skyblue'}} /> <View style={{width: 150, height: 150, backgroundColor: 'steelblue'}} /> </View> ); } }; AppRegistry.registerComponent('AwesomeProject', () => FixedDimensionsBasics); 同时提供了动态的比例模式，尽量填充可用区域。 flex: 1 基于父节点大小使用。如果父节点大小为0，则无法使用。 import React, {

最近项目中更多的用到了flex布局，以前不太会用，记录一下尝试过程和心得。 定义方法与简单使用 display: flex;（块标签）/display:inline-flex;（行内标签） 给某一标签添加上述样式后，即可将此标签设置为flex布局（弹性布局），任何一个容器都可以被指定为flex 布局； 常用的弹性布局分两大种，第一种是横向弹性布局（row），另一种是竖向弹性布局（column），使用的方法是给标签添加如下样式： flex-direction: row/column; 注意：如果是webkit内核的浏览器，必需加上-webkit前缀 display: -webkit-flex; 视图 根据图示理解： 主轴（main axis） 交叉轴（cross axis） 容器（被设置flex的标签）中所有的项目（子标签）都沿着主轴排列。 属性 容器的属性 flex-direction flex-direction决定的是主轴的方向（即项目排列的方向）。 值有row（水平主轴左端为起点）、row-reverse（水平主轴右端为起点）、column（垂直主轴上端为起点）、column-reverse（垂直主轴下端为起点），排列方式如下图： lex-wrap flex-flow justify-content align-items align-content 暂时还没用到，以后再补充

兼容性前缀： 谷歌：webkit 火狐：moz ie：ms 欧鹏：o选择器： 属性选择器： * = 包含 {href * = 'www'} ^ = 以什么开头 $ = 以什么结尾 伪类选择器： 第一个：first-of-type 最后一个：last-of-type 第几个：nth-of-type（） 选中前n个：nth-of-type（-n） 选中后5个：nth-of-type（n + 5） 第4个到第8个：:nth-of-type（-n + 8）:nth-of-type（n + 4） 奇数个：nth-of-type（2n + 1）odd 偶数：nth-of-type（2n）even子级： child:first-child :last-child :nth-child 空的元素：empty 除了：not() 可用的：:not(:disabled) / :enabled 禁用的：:disabled 获得焦点：:focus 当前激活元素：:target选项卡实例：<a href="#p1">123123</a><a href="#p2">123123</a><a href="#p3">123123</a><p id="p1">sadadsada23</p><p id="p2">3123123123</p><p id="p3">31asfegerg123</p> 同级 后一个：+

效果图 实现分析 从效果图上分析，书籍详情是通过点击首页的 item 后进入。 进入详情页之后页面顶部显示书籍的相关信息，同时判断用户是否登录，未登录则弹出一个授权登录窗口。 点击登录之后即可加载出用户评论信息。 通过上图我们可以分析出静态页面的主要结构如下： 书籍信息 左侧布局是图书图片 中间布局从上到下是：名称、作者、出版社 右侧布局是收藏 icon 登录提示弹窗 上部分是提示文本 下部分是登录按钮 评论列表 左侧是评论人头像 右侧上部分是评论人名字 右侧中间部分是评论信息 右侧下部分是评论时间 评论按钮 固定在底部的一个按钮 ps：如果不想看代码可直接跳过了，下面都是具体的代码实现了 具体实现 具体实现主要从 wxml ， wxss ， js 这三个文件去介绍。 wxml 实现了页面的绘制，然后通过 wxss 美化页面的样式，最后通过 js 文件获取数据并将数据填充 wxml 。 顶部书籍信息实现 wxml 规定了各个组件的摆放顺序。 <view class="book-container bg-white"> <view class="book-info"> // 书籍图片 <image class="book-image" mode="scaleToFill" src="{{bookInfo.bkcover}}"></image> // 书籍文字信息 <view

1.截出来的图会有白边 看了很多代码，感觉有点麻烦，后来灵机一动，直接把画布缩小了一点，白边就直接不显示了，不过这个方法比较投机 $("#save").click(function() { var width = $('.box').width() - 1; //截出来图片有白边，把画布减少一点， var height = $('.box').height() - 1; html2canvas($('.box')[0], { width: width, height: height, useCORS: true, //跨域图片 }).then(function(canvas) { var img = new Image() img.src = canvas.toDataURL('image/jpeg') img.style.cssText = 'position:absolute;width:70%;left:15%;top:4%;z-index:9999;' $('.mask2').append(img) console.log("生成图片了") }) 2.微信头像截图时好时坏，截出的文字有些会有偏移 一开始以为是跨域图片的问题，搞了挺久，后来网上看到说这个插件 对flex的布局兼容比较差，并且最好不要用rem来设置字体，后来试了一下，果然是flex布局的问题

一、什么是flex布局 Flexible Box 模型，通常被称为 flexbox，是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。 flexbox 是一种一维的布局，是因为一个 flexbox 一次只能处理一个维度上的元素布局，一行或者一列。简单来说，flex布局就是一种新的盒装布局方式。 二、基本概念 采用了flex布局的容器就是flex中的”容器“，而它的子代元素默认就是flex中的项目。在flex布局中有两个重要的概念：主轴和交叉轴。   主轴的默认是横向的，与主轴垂直的就是交叉轴。 三、容器属性 来源： https://www.cnblogs.com/tidemode/p/11947279.html