flex布局 | 易学教程

8. react-native-android之----模拟手机百度feed流

阅读更多关于 8. react-native-android之----模拟手机百度feed流

【推荐阅读】微服务还能火多久？>>> 欢迎大家收看react-native-android系列教程，跟着本系列教程学习，可以熟练掌握react-native-android的开发，你值得拥有： http://my.oschina.net/MrHou/blog?catalog=3590216&temp=1466310573630 本章，咱们一起动个手，来模仿一下手机百度的新闻流。学习一样东西，最好在有了一定基础之后，最好照着已有的一些产品，简单的实现一下。 1. 手机百度的feed流样式观察动手之前，我们先来看看手机百度新闻feed流，都由那些元素组成吧，如图1.1：图1.1 我们看到，整体由上方的搜索框+工具条组成，我们暂且叫上方部分为搜索区吧，下方则是由新闻内容区组合而成。下方是由几个工具组成的底部工具栏。在滑动下方新闻feed流过程中，上方的搜索区位置不变。下方的工具栏位置也不变。 2. 设计目录结构及代码书写好了，我们大致的结构分析完了。要coding？别捉急，我们在coding之前还是要好好设计目录结构的。根据上面分析的信息，我们决定先将整个activity拆分为三大块。 1. 搜索区 2. 中间内容区 3. 底部工具栏区 2.1 拆分模块所以，我认为，首先要将三个区块拆为三个模块。我们需要一个static文件夹，然后我们在static文件夹下

响应式布局：flex

阅读更多关于响应式布局：flex

flex-direction属性决定主轴的方向（即项目的排列方向）。 Flex-wrap:一行排不下的时候换行 justify-content属性定义了项目在主轴上的对齐方式。 align-items属性定义项目在交叉轴上如何对齐。 align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。项目属性：order；flex-grow；flex-shrink；flex-basis；flex；align-self Order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。 Flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。 Flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。 Flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。 Flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。 Align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素

多列布局方案整理

阅读更多关于多列布局方案整理

了解 CSS 中属性的值及其特性，透彻分析问题和需求才可以选择和设计最适合的布局解决方案。多列布局在网页中非常常见（例如两列布局），多列布局可以是两列定宽，一列自适应，或者多列不定宽一列自适应还有等分布局等。定宽-自适应有如下布局 <div class="parent"> <div class="left"> <p>left</p> </div> <div class="right"> <p>right</p> <p>right</p> </div> </div> float+margin .left { float: left; width: 100px; } .right { margin-left: 100px /*间距可再加入 margin-left */ } 优点：容易理解缺点：IE6中会有3像素的BUG，解决方法可以在.left 加入 margin-left:-3px 。因为left是浮动元素，right是没有浮动的，如果right内容中有清楚浮动就会产生bug。改进：float + margin + (fix) <div class="parent"> <div class="left"> <p>left</p> </div> /*外层在包裹一个容器*/ <div class="right-fix"> <div class="right"> <p

弹性盒模型(flex)

阅读更多关于弹性盒模型(flex)

<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style> /*--flex模型不需要加浏览器前缀(IE10+, Chrome21+, Firefox22+)--*/ /*--Flex布局，子元素的float、clear和vertical-align属性将失效--*/ * { margin: 0px; padding: 0px; } div.box { width: 300px; height: 300px; border: 1px solid gray; margin: 30px auto; display: flex; /*--让容器成为弹盒(flex针对块级元素, inline-flex针对行内元素)--*/ flex-direction: row; /*--flex-direction属性决定主轴的方向, 即项目的排列方向(row/row-reverse/column/column-reverse)--*/ flex-wrap: wrap; /*--默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行(nowrap/wrap/wrap-reverse)--*/ flex-flow: row wrap; /*-

居中的css:完全指南(翻译)

阅读更多关于居中的css:完全指南(翻译)

这里主要参考的是CHRIS COYIER写的一篇的文章( 点击查看 )，主要讲了关于css水平、垂直居中的一些方法,每个方法后面都有一个demo，可以在线查看效果。 1 水平水平居中有行内元素和块元素，行内元素有文字、图片、链接等；块元素主要是div、p等block元素。 1.1 行内元素对于行内元素可以使用如下实现水平居中( 在线查看demo )： .blocklist1_1 { text-align: center; } 这种方法对于inline，inline-block，inline-table等都有效。 1.2 块元素对于一个块元素，可以设置其margin-left和margin-right自动，就像这样( 在线查看demo )： .blocklist1_2 .div1 { margin: 0px auto; } 无论块元素的宽度是否已知，都可以实现水平居中。 1.3 多个块元素如果有多个块元素需要水平居中时，有两种办法可以实现。一种是借助inline-block，另一种是借助flex。对于第一种方法可以使用如下方式( 在线查看demo )，设置块元素display:inline-block,其父元素水平居中： ..blocklist1_3 .div1 { text-align: center; } .blocklist1_3 .div1 div { display

flex布局简析

阅读更多关于 flex布局简析

最近开始对 flex 布局进行一个重新的认识。首先。 flex 布局适用于所有元素但是注意一点的就是，一旦父级元素设定 flex 布局的时候，子元素的传统布局属性 , float,clear,vertical-align 属性都会失效的。一 . 父容器的属性 1.flex-direction 是决定元素主轴的方向 row: 默认值，由左到右正序。 row-reverse: 有右到左的逆序 column: 有上倒下的正序 column-reserve: 由下到上的逆序 2.flex-wrap 是否换行 nowrap: 默认值，不换行 ( 当元素数量和宽度超出父级，就会缩短自身宽度 ) wrap: 换行 ( 保留当前宽度，换行。且行高等于父级元素的一半 ) wrap-reverse: 由下向上换行，同 wrap 一样，但如果父级宽度过低，那行高就为 1 3.justify-content 定义元素在父级 X 轴对齐方式 flex-start: 默认值，元素左对齐。 flex-end: 元素右对齐 center: 元素中间对齐 space-between: 元素等分两边对齐 space-around: 元素等分，两边有间隔。且间隔是元素之间间隔的一半 4.align-items 定义元素在父级 y 轴对齐的方式 flex-start: 元素上对齐 flex-end: 元素下对其

响应式网站

阅读更多关于响应式网站

我们的眼睛在看东西时会自然地遵循一定的模式。通常从左上开始，然后从左到右，再从上到下。很多网页都是基于网格设计的，这说明网页是按列来布局的。响应式网格视图通常是 12 列，宽度为100%，在浏览器窗口大小调整时会自动伸缩。为什么是12列呢，因为12可以被2、3、4、6整除，能2、3、4、6等分。创建网格视图 CSS.css * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;}* { border: 1px solid red !important;}.row{ width:100%; display: flex; flex-wrap: wrap; text-align: center;}.col-1{ width:8.3%;}.col-2{ width:16.6%;}.col-3{ width:25%; padding: 0.5%;}.col-4{ width:33.33%;}.col-5{ width:41.66%;}.col-6{ width:50%;}.col-7{ width:58.33%;}.col-8{ width:66.66%;}.col-9{ width:75%; padding

flex布局垂直居中

阅读更多关于 flex布局垂直居中

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box{ display: flex; display: -webkit-flex; border: 1px solid #0000FF; height: 200px; width: 400px; align-items:center; justify-content:center; } .item{ width: 50px; height: 40px; border: 1px solid #00C1B3; } </style> </head> <body> <div id="box"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> </div> </body> </html> 来源： https://www.cnblogs.com/xm666/p/11053220.html

【前端面试CSS】—垂直水平居中终极版

阅读更多关于【前端面试CSS】—垂直水平居中终极版

前言：居中元素一直是前端ers绕不过去的坎儿，各种面试中经常出现，一起做一个总结，欢迎补充~ 以下分别会介绍水平居中，垂直居中，还有水平垂直居中各种办法，思维导图如下：一、水平居中 1.行内元素水平居中利用 text-align: center 可以实现在块级元素内部的行内元素水平居中。此方法对inline、inline-block、inline-table和inline-flex元素水平居中都有效。 .parent{//在父容器设置 text-align:center; } 此外，如果块级元素内部包着也是一个块级元素，我们可以先将其由块级元素改变为行内块元素，再通过设置行内块元素居中以达到水平居中。 <div class="parent"> <div class="child">Demo</div> </div> <style> .parent{ text-align:center; } .child { display: inline-block; } </style> 2.块级元素的水平居中这种情形可以有多种实现方式: ①将该块级元素左右外边距margin-left和margin-right设置为auto .child{ width: 100px;//确保该块级元素定宽 margin:0 auto; } ②使用table+margin

关于移动端开发的一些总结

阅读更多关于关于移动端开发的一些总结

1、 piexl 像素知识 640 * 1136的图片能不能在iphone5上完全展示？ iphone5分辨率640*1136 逻辑像素与物理像素的关系 px逻辑像素：浏览器使用的抽象单位 dp，pt物理像素：设备无关像素 dpr：设备像素缩放比计算公式：1px = (dpr)^2 * dp iphone5的 dpr = 2； DPI:打印机每英寸可以喷的墨汁点（印刷行业） PPI:屏幕每英寸的像素数量，即单位英寸内的像素密度目前，在计算机显示设备参数描述上，二者意思一致计算公式：以iphone5为例：ppi = √（1136^2 + 640^2）/4 = 326ppi（视网膜retina屏）注意：单位为硬件像素（物理像素），非px PPI越高，像素数越高，图像越清晰。但可视度月低（小），系统默认缩放比越大。 retina屏（高清屏）：dpr都是>=2。 2、 viewport 手机浏览器默认为我们做了两件事情： ① 页面渲染在一个980px（ios）的viewport ② 缩放为什么要有viewport？一个300多像素的屏幕，放一个1000多像素的页面，会混乱，所以要先虚拟一个980像素的页面，然后进行缩放。度量|视口 visual viewport ==== 窗口缩放scale 布局 layout viewport 设计移动web

订阅 flex布局