在使用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布局-常用布局的更多相关文章

  1. css 常用布局

    「前端那些事儿」③ CSS 布局方案 我们在日常开发中经常遇到布局问题,下面罗列几种常用的css布局方案 话不多说,上代码! 居中布局 以下居中布局均以不定宽为前提,定宽情况包含其中 1.水平居中 a ...

  2. ExtJs常用布局--layout详解(含实例)

    序言: 笔者用的ExtJs版本:ext-3.2.0 ExtJs常见的布局方式有:border.form.absolute.column.accordion.table.fit.card.anchor ...

  3. Css布局常用 1.盒子内容局中 2. 物理一像素 3.倒三角形 绘制

    布局 对象属性 new Person('') 原型链 (创建对象.使用对象中的属性,如果没有那么就去原型找) new Person()      Person{   name:'', getname( ...

  4. 【Android自学日记】五大布局常用属性

    线性布局(LinearLayout)常用属性: android:orientation="vertical"--决定子类控件的排布方式(vertical垂直:horizontal水 ...

  5. Flex box弹性布局 及 响应式前端设计的优化

    Flex box弹性布局 Flex box是CSS3新添加的一种模型属性,它的出现有力的打破了我们常常使用的浮动布局.实现垂直等高.水平均分.按比例划分,可以实现许多我们之前做不到的自适应布局.如果你 ...

  6. python:页面布局 后台管理页面之常用布局

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  7. Android常用布局

    FrameLayout(框架布局):从屏幕的左上角开始显示对象,一个覆盖一个,主要用于选项卡视图和图像切换器.# 所有的组件都放在屏幕的左上角,并且以层叠进行显示. LinearLayout(线性布局 ...

  8. [Irving]Android 常用布局之RelativeLayout

    RelativeLayout相对布局 相对布局 RelativeLayout 允许子元素指定它们相对于其父元素或兄弟元素的位置,这是实际布局中最常用的布局方式之一. 它灵活性大很多,当然属性也多,操作 ...

  9. 常用布局,div竖直居中

    常用两列布局,多列布局和div竖直居中 body { margin:; padding:; } .w200 { width: 200px; } .mar-left200 { margin-left: ...

  10. 跟我学android-android常用布局介绍

    在上一章我们曾经谈到,Android平台的界面 是使用XML的方式设计的,然后在上一章我们只做了一个简单的界面,在这章,我们将介绍如何使用常用的控件设计实用的界面. Android中的视图都是继承Vi ...

随机推荐

  1. oracle Clob类型转换成String类型

    转载:https://www.cnblogs.com/itmyhome/p/4131339.html Clob类型转换成String类型 oracle中表结构如下: create table GRID ...

  2. Eclipse + Git + 码云

    1. 进入码云个人首页 点击自己的名称即可 2. 添加一个项目 3. 在Eclipse中创建一个本地Git Eclipse不建议git目录创建在项目的目录下,因此另选一个目录作为本地Git目录 选择一 ...

  3. 记录CentOS7.X版本下安装MySQL5.7数据库

    记录CentOS7.X版本下安装MySQL5.7数据库  设置rpm下载目录在/opt目录下新建一个目录存放mysql cd /opt sudo mkdir mysql12  下载MySQL的源 wg ...

  4. 移动测试之appium+python 入门代码(四)

    最近工作中想要做自动化回归测试,想法是将每个测试用例都做自动截图,然后将最近的稳定版本和当前测试的版本的两张截图去对比,也要将两个版本的截图都放到测试报告中方便人工来进行验证.最初想法是通过HTMLT ...

  5. Centos6.10搭建Hadoop三节点分布式

    (一)安装JDK 1. 下载JDK,解压到相应的路径 2.  修改 /etc/profile 文件(文本末尾添加),保存 sudo vi /etc/profile # 配置 JAVA_HOME exp ...

  6. ubuntu安装软件依赖解决

    sudo apt-get install -f zsh@zsh:~/Downloads/dist$ sudo dpkg --install Kitematic_0.17.3_amd64.deb (正在 ...

  7. git使用笔记-基础篇

    git使用手册:https://git-scm.com/book/zh/v1/ 一.分支 1.查看所有本地分支 git branch 2.查看所有本地分支和远程分支 git branch -a 3.查 ...

  8. NASM在Ubuntu上的安装与简单使用

    一 .安装NASM 1. 下载安装文件 地址是:http://www.nasm.us/pub/nasm/releasebuilds/2.11.08/ 2.解压(具体命令要根据压缩包的类型来选用) 3. ...

  9. 基础7 面向对象进阶与socket编程

    1.静态方法(用得少)(解除某个函数跟类的关联,加了静态方法后,类便不能将类的参数传给静态方法函数了) class Dog(object): def __init__(self,name): @sta ...

  10. 【ubuntu】安装之后要安装的一些东西

    问题1: ubuntu默认没有安装vim,出现: root@evelyn-virtual-machine:~# vim /etc/ssh/sshd_config The program 'vim' c ...