flex布局

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

非 Y 不嫁゛ 提交于 2020-04-16 08:05:22
【推荐阅读】微服务还能火多久?>>> 欢迎大家收看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

我们两清 提交于 2020-04-08 07:51:44
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属性,如果没有父元素

多列布局方案整理

|▌冷眼眸甩不掉的悲伤 提交于 2020-04-07 17:25:16
了解 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)

ぐ巨炮叔叔 提交于 2020-04-07 02:38:24
<!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:完全指南(翻译)

二次信任 提交于 2020-04-06 17:27:26
这里主要参考的是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布局简析

社会主义新天地 提交于 2020-04-03 02:43:34
最近开始对 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: 元素下对其

响应式网站

ぃ、小莉子 提交于 2020-03-28 07:43:20
我们的眼睛在看东西时会自然地遵循一定的模式。通常从左上开始,然后从左到右,再从上到下。 很多网页都是基于网格设计的,这说明网页是按列来布局的。 响应式网格视图通常是 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布局垂直居中

旧街凉风 提交于 2020-03-26 17:44:05
<!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】—垂直水平居中终极版

允我心安 提交于 2020-03-26 16:59:08
前言: 居中元素一直是前端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

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

南楼画角 提交于 2020-03-26 13:25:45
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