在使用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. Problem07 处理字符串

    题目:输入一行字符,分别统计出其中英文字母.空格.数字和其它字符的个数. 程序分析:利用while 语句,条件为输入的字符不为'\n'. import java.util.*; public clas ...

  2. vue 中的 ... (三个点的用法)

    这个是扩展运算符. 扩展语法.对数组和对象而言,就是将运算符后面的变量里东西每一项拆下来.这个东西可以在函数定义的地方使用,比如使用func(...args)将函数传入的参数都放到args数组里.

  3. 创建有关hbase数据库的项目时所遇到的问题

    1.在以前使用其他数据库时,经常会使用id自增来做主键,但是hbase数据库中不知道怎么来设置自增主键,所以我打算不要id自增主键.然后删除原来的表,重新创建表. 删除表语句: 用drop命令可以删除 ...

  4. Python数据操作

    列表操作 保存matrix或者保存ndarray 数据类型转换 读取CSV某列 numpy数组写入到csv pandas to_csv 最左边 多一列 的问题 DataFrame对象操作

  5. 封装RateLimiter 令牌桶算法

    自定义注解封装RateLimiter.实例: @RequestMapping("/myOrder") @ExtRateLimiter(value = 10.0, timeOut = ...

  6. React.js 小书 Lesson2 - 前端组件化(一):从一个简单的例子讲起

    作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson2 转载请注明出处,保留原文链接和作者信息. 很多课程一上来就给大家如何配置环境.怎么写 Re ...

  7. ios 开发常用函数

    rand() ----随机数 abs() / labs() ----整数绝对值 fabs() / fabsf() / fabsl() ----浮点数绝对值 floor() / floorf() / f ...

  8. PHP迭代器 Iterator

    Iterator是PHP自带的迭代器接口. 实现该接口的类必须实现该接口的方法,以便能够使用foreach进行输出迭代后的数据. interface Iterator extends Traversa ...

  9. UIWindow及程序启动的过程

    1.   UIWindow才有自发显示的功能, 一个程序之所以能显示东西,是因为有window !//  [self.window makeKeyAndVisible]; 2.   任何view的显示 ...

  10. count group by 组合用法

    1 需求是 求订单表1个月内 订单累计费用超过500的有多少人 根据题意 最先写出的sql是这样的 SELECT SUM(totalfee)AS n FROM sendorder WHERE `add ...