flex布局相关用法
/* pages/classic/classic.wxss */ .chunk {
/* 行内元素可设置但是设置了flex,无效了 *//* display: inline-block; */
width: 100px;
height: 100px;
} .colour1 {
background-color: #5fffff;
font-size: 26px;
} .colour2 {
background-color: #9b12eb;
} .colour3 {
background-color: #e65a0a;
} /* 弹性容器 flex,可以把三个色块自动排列一行 */ .container {
display: flex;
/* 设置block是列cloumn排列还是row行排列 ,默认行排列
而column-reverse,倒叙排列,空白不变
在行倒叙中,若有空白,则空白也倒叙占位置,但列倒序不变
是因为容器大小的原因,水平宽>列宽(自适应),可以设置
high:可以是px也可以是百分比
width:可以是px也可以是百分比
*/
flex-direction: row;
width: 200px;
height: 600px;
/* 默认透明 */
background-color: rgba(153, 153, 153, 0.582);
/* 主轴与交叉轴,取决于flex-direction */
/* 改变对齐方向 默认start,其余为center(中间对齐),end,space-between(分散对齐)..
主轴方向上的对齐
*/
justify-content:flex-end; /* 在flex的内,块居中,aligin交叉轴的对齐
stretch块没有设置高度时自动拉伸高度
baseline,块内文字按照第一个块的文字基线(底线)对齐
*/
align-items:flex-start;
/*
自动换行,nowrap-不换行
wrpa-换行,会自动产生与下与上相等间距
方法1:关闭flex容器高度,使其自适应
*/
flex-wrap:wrap; }
flex布局相关用法的更多相关文章
- Flex 布局相关用法
前言: 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中 就不容易实现. 2009年,W3C提出了 ...
- flex布局常见用法小结
1,display:flex 这个在父容器中声明: 2,flex-direction:row / column 默认为横向,也在父容器中设置,定义flex布局的主轴方向:一条轴为主轴,那么另一条轴自然 ...
- 2017.11.13 flex 布局相关问题
一.今日任务:城市体验平台小程序的开发(由于数据还未完善,今天主要是 UI 布局的开发) 二.所遇问题 1. flex 布局问题: html: <view class="flex-sp ...
- flex布局全解析
前言 很长一段时间, 我知道有flex这个布局方式, 但是始终没有去学它. 3点原因: 感觉还比较新, 担心兼容性不好. 普通的布局方式能满足我的绝大多数需求. 好像蛮复杂的. 最近由于开发需要, 学 ...
- flex布局使用方法简要汇总
近期因为使用inline-block,在项目部署后出现了一点小问题,几番解决未果,遂使用flex布局,于是借此机会对flex布局的用法做一个简要的汇总. 遇到的bug如下: 本想两个div使用inli ...
- css3弹性伸缩布局(一)—————flex布局
CSS3弹性伸缩布局简介 2009年,W3C提出了一种崭新的方案—-Flex布局(即弹性伸缩布局),它可以简便.完整.响应式地实现各种页面布局,包括一直让人很头疼的垂直水平居中也变得很简单地就迎刃而解 ...
- 理解CSS3里的Flex布局用法
一.Flex布局是什么? Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为Flex布局. .box{ disp ...
- flex布局以及相关属性
容器的属性: 父元素设置display:flex:子元素即可使用flex布局. flex-direction 决定项目排列方向: .box { flex-direction: row | row-re ...
- 三大Flex布局用法(转载)
Flex布局基础 对于Flex 初学者,在Hello World之后,Flex布局便是下一站学习要的要义.若是从传统的Html转变而来,总希望找到类似于Div/Table/UL等之类的控件,也希望在 ...
随机推荐
- sqoop简单使用
一,通过sqoop将MySQL里面的数据加载到HDFS 先查看有哪些数据库 查看表person sqoop list-databases --connect jdbc:mysql://ly-p2p4: ...
- Maven中添加Jetty服务器配置
<project> <!--其它配置--> <build> <plugins> <plugin> <groupId>org.mo ...
- shell 搜索指定目录下所有 jar 文件生成csv文件
虽说比较简单,但希望分享给大家.按需求改成想找的:例如txt,xls 等. 脚本名 扫描的路径 文件名 testFind.sh / testFind.txt (如果未配置环境变量 ./testFi ...
- django中collectstatic的使用
前言 我最近在琢磨django框架的使用,在上传个人网站服务器上时,再次遇到了找不到静态文件,css.img等样式全无的问题.于是沉下心来,好好研究了django的静态文件到底应该怎么去部署(depl ...
- SOAP、WSDL、 UDDI之间的关系
SOAP(Simple Object Access Protocol) 简单对象访问协议: WSDL(Web Services Description Language) Web服务描述语言: UDD ...
- HTML5 音频播放
代码实例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- Task7.卷积神经网络
卷积定义: 所谓卷积,其实是一种数学运算.但是在我们的学习生涯中,往往它都是披上了一层外衣,使得我们经常知其然不知其所以然.比如在信号系统中,他是以一维卷积的形式出现描述系统脉冲响应.又比如在图像处理 ...
- asp.net中的ORA-12154: TNS: 无法解析指定的连接标识符
本机PL/SQL能正常连接,但是asp.net连接有问题. 临时解决方案: <add key="ConnectString" value="Data Source= ...
- HTML5 游戏引擎的选择
原生手游市场已是红海,腾讯.网易等寡头独霸天下,H5游戏市场或将成为下一个风口.据笔者所知,很多H5游戏开发团队由于选择引擎不慎导致项目甚至团队夭折.如何选择适合团队和项目的引擎,笔者通过学习和项目实 ...
- Intel CPU编号详解
一.概述 Intel(英特尔)是当前最主流的台式机.笔记本.服务器CPU厂商.和英特尔类似的还有AMD厂商的CPU. Intel生产的CPU型号繁多,每个型号的CPU都有对应的编号.这个编号有特定意义 ...