flex布局-常用布局
在使用flex布局,老是需要去查资料,很多常用的,知道大概,可还是需要去过一遍,这里记录一下几个常用的flex布局
一个div,内容垂直居中
html
<div className='topHead'>
<img src='/images/highLevel.png'/>
</div>
css
.topHead {
width: 100%;
height: 100px;
display: flex;
align-items: center;
}
注意:这个高度是一定要的,不然没有下效果
一个div,内容既要垂直居中,也要左右居中
html
<div className='topHead'>
<img src='/images/highLevel.png'/>
</div>
css
.topHead {
width: 100%;
height: 100px;
display: flex;
align-items: center;
justify-content: center
}
一个div,内容两块,往两边靠
这种场景经常出现在设置里面,左边一个内容,右边一个内容
html
<div className='bothSides'>
<span className='ml10'>客服QQ</span>
<div className='mr10'>
<span>123456</span>
<Icon type="copy" />
</div>
</div>
css
.bothSides{
height: 50px;
display: flex;
align-items: center;
justify-content: space-between;
}
.ml10{
margin-left:10px;
}
.mr10{
margin-right:10px;
}
一个页面,有上下两个元素,垂直水平居中
第一种差在 flexDirection:column 指定在垂直方向
html
<div style={styles.emptyPage}>
<img src={empty} alt='empty png' style={styles.emptySize} />
<div className='fs18 mt10 lightGrayText'>{this.props.text}</div>
</div>
css
emptySize:{
width:'60%'
},
emptyPage:{
width:100%;
height:500px;
backgroundColor:#F2F3F7; display:flex;
flexDirection:column;
alignItems:center;
justifyContent:center;
}
一个div,里面有3个元素,这三个元素的排列方式以左,中,右的方式排列
.mainDiv{
display: flex;
flex-direction: row;
justify-content: space-between;
}
一个div,里面有两个元素,像左对齐,第一个元素宽度固定,第二个元素自适应
.mainDiv{
display: flex;
flex-direction: row;
justify-content: flex-start;
}
.firstDiv{
width: 80px;
text-align: right;
color:#999999;
flex-shrink:;
}
flex布局-常用布局的更多相关文章
- css 常用布局
「前端那些事儿」③ CSS 布局方案 我们在日常开发中经常遇到布局问题,下面罗列几种常用的css布局方案 话不多说,上代码! 居中布局 以下居中布局均以不定宽为前提,定宽情况包含其中 1.水平居中 a ...
- ExtJs常用布局--layout详解(含实例)
序言: 笔者用的ExtJs版本:ext-3.2.0 ExtJs常见的布局方式有:border.form.absolute.column.accordion.table.fit.card.anchor ...
- Css布局常用 1.盒子内容局中 2. 物理一像素 3.倒三角形 绘制
布局 对象属性 new Person('') 原型链 (创建对象.使用对象中的属性,如果没有那么就去原型找) new Person() Person{ name:'', getname( ...
- 【Android自学日记】五大布局常用属性
线性布局(LinearLayout)常用属性: android:orientation="vertical"--决定子类控件的排布方式(vertical垂直:horizontal水 ...
- Flex box弹性布局 及 响应式前端设计的优化
Flex box弹性布局 Flex box是CSS3新添加的一种模型属性,它的出现有力的打破了我们常常使用的浮动布局.实现垂直等高.水平均分.按比例划分,可以实现许多我们之前做不到的自适应布局.如果你 ...
- python:页面布局 后台管理页面之常用布局
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- Android常用布局
FrameLayout(框架布局):从屏幕的左上角开始显示对象,一个覆盖一个,主要用于选项卡视图和图像切换器.# 所有的组件都放在屏幕的左上角,并且以层叠进行显示. LinearLayout(线性布局 ...
- [Irving]Android 常用布局之RelativeLayout
RelativeLayout相对布局 相对布局 RelativeLayout 允许子元素指定它们相对于其父元素或兄弟元素的位置,这是实际布局中最常用的布局方式之一. 它灵活性大很多,当然属性也多,操作 ...
- 常用布局,div竖直居中
常用两列布局,多列布局和div竖直居中 body { margin:; padding:; } .w200 { width: 200px; } .mar-left200 { margin-left: ...
- 跟我学android-android常用布局介绍
在上一章我们曾经谈到,Android平台的界面 是使用XML的方式设计的,然后在上一章我们只做了一个简单的界面,在这章,我们将介绍如何使用常用的控件设计实用的界面. Android中的视图都是继承Vi ...
随机推荐
- oracle Clob类型转换成String类型
转载:https://www.cnblogs.com/itmyhome/p/4131339.html Clob类型转换成String类型 oracle中表结构如下: create table GRID ...
- Eclipse + Git + 码云
1. 进入码云个人首页 点击自己的名称即可 2. 添加一个项目 3. 在Eclipse中创建一个本地Git Eclipse不建议git目录创建在项目的目录下,因此另选一个目录作为本地Git目录 选择一 ...
- 记录CentOS7.X版本下安装MySQL5.7数据库
记录CentOS7.X版本下安装MySQL5.7数据库 设置rpm下载目录在/opt目录下新建一个目录存放mysql cd /opt sudo mkdir mysql12 下载MySQL的源 wg ...
- 移动测试之appium+python 入门代码(四)
最近工作中想要做自动化回归测试,想法是将每个测试用例都做自动截图,然后将最近的稳定版本和当前测试的版本的两张截图去对比,也要将两个版本的截图都放到测试报告中方便人工来进行验证.最初想法是通过HTMLT ...
- Centos6.10搭建Hadoop三节点分布式
(一)安装JDK 1. 下载JDK,解压到相应的路径 2. 修改 /etc/profile 文件(文本末尾添加),保存 sudo vi /etc/profile # 配置 JAVA_HOME exp ...
- ubuntu安装软件依赖解决
sudo apt-get install -f zsh@zsh:~/Downloads/dist$ sudo dpkg --install Kitematic_0.17.3_amd64.deb (正在 ...
- git使用笔记-基础篇
git使用手册:https://git-scm.com/book/zh/v1/ 一.分支 1.查看所有本地分支 git branch 2.查看所有本地分支和远程分支 git branch -a 3.查 ...
- NASM在Ubuntu上的安装与简单使用
一 .安装NASM 1. 下载安装文件 地址是:http://www.nasm.us/pub/nasm/releasebuilds/2.11.08/ 2.解压(具体命令要根据压缩包的类型来选用) 3. ...
- 基础7 面向对象进阶与socket编程
1.静态方法(用得少)(解除某个函数跟类的关联,加了静态方法后,类便不能将类的参数传给静态方法函数了) class Dog(object): def __init__(self,name): @sta ...
- 【ubuntu】安装之后要安装的一些东西
问题1: ubuntu默认没有安装vim,出现: root@evelyn-virtual-machine:~# vim /etc/ssh/sshd_config The program 'vim' c ...