flex布局justify-content属性和align-items属性设置
前言：
flex最常用的就是justify-content和align-items了，这里把这两个属性介绍下，大家更多关于flex布局可以查看阮一峰的日志，写的非常清楚！
阮一峰flex布局的日志：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
1、justify-content（在父元素设置）
设置弹性盒子元素在主轴（横轴）的对齐方式。
取值：
- justify-content: flex-start | flex-end | center | space-between | space-around;
flex-start: 弹性盒子元素将向行起始位置对齐。第一个元素与左起始边界对齐，后面的元素接着第一个元素进行排列。
flex-end: 弹性盒子元素将向行结束位置对齐。整体靠着行结束的位置排列。
center：整体居中显示。
space-between: 弹性盒子元素均匀分布。第一个元素的边界与行的主起始位置的边界对齐，同时最后一个元素的边界与行的主结束位置的边距对齐，而剩余的伸缩盒项目则平均分布，并确保两两之间的空白空间相等。
space-around: 弹性盒子元素均匀分布。两端保留子元素与子元素之间间距大小的一半。
2、align-items, align-self
设置弹性盒子元素在垂直方向上（纵轴）的对齐方式。其中align-items属性用于弹性容器，而align-self用于弹性项目。
- align-items: flex-start | flex-end | center | baseline | stretch;
- align-self: auto | flex-start | flex-end | center | baseline | stretch;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>flex布局justify-content属性</title>
<style rel="text/stylesheet">
.box {
display: -webkit-flex;
display: flex;
width: 400px;
height: 100px;
margin: 0;
padding: 0;
border-radius: 5px;
list-style: none;
background-color: #eee;
} .box li {
margin: 5px;
padding: 10px;
border-radius: 5px;
background: #aaa;
text-align: center;
} #box {
-webkit-justify-content: flex-start;
justify-content: flex-start;
} #box2 {
-webkit-justify-content: flex-end;
justify-content: flex-end;
} #box3 {
-webkit-justify-content: center;
justify-content: center;
} #box4 {
-webkit-justify-content: space-between;
justify-content: space-between;
} #box5 {
-webkit-justify-content: space-around;
justify-content: space-around;
}
</style>
</head>
<body>
<h2>justify-content: flex-start</h2>
<ul id="box" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul> <h2>justify-content: flex-end</h2>
<ul id="box2" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul> <h2>justify-content: center</h2>
<ul id="box3" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul> <h2>justify-content: space-between</h2>
<ul id="box4" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul> <h2>justify-content: space-around</h2>
<ul id="box5" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</body>
</html>
3、flex的兼容性
兼容性检测网址：www.caniuse.com
- 兼容IE10以上，但是要加前缀 -ms-
- Edge全部支持
- firfox 版本28以上，低版本要加 -moz-
- chrome 21以上，低版本要加 -webkit-
微信小程序中经常使用flex布局非常方便：
弹性盒子布局：
1、 首先找到使用弹性盒子布局的容器元素view,首先将他变成一个flex
a) display:flex; //设置完后默认的每个元素都是从左往右放置的
b) 目标一：每个元素独占一行，自上而下放置
flex-direction: column;
c) 目标二：自上而下放置时在垂直方向上均匀分布；元素在垂直方向上间隔一致，而且第一个和最后一个元素离顶部和底部都有一定的间距；
justify-content: space-around;
d) 目标三：元素在水平方向上居中
align-items: center;
弹性盒子布局优点：
.container {
background-color: #eee;
height: 100vh;
// 下面是弹性盒子布局
display: flex;
flex-direction: column; // 纵向排列
justify-content: space-around;
align-items: center;
// flex-wrap: wrap; // 一行显示不了可以换行,用于pc端多个item排列时
}
- 就算下面再增加几个text，依然会自动垂直，水平居中
- 比较直观，只需要在容器中设置，一目了然
- 非常高效，灵活的应对页面结构的变化
flex布局justify-content属性和align-items属性设置的更多相关文章
- 深入理解 flex 布局以及计算_Flexbox, Layout
起因 对于Flex布局,阅读了 大漠老师和其他老师写的文章后,我还是不太理解Flexbox是如何弹性的计算子级项目的大小以及一些其他细节.在大漠老师的帮助下,我去查阅Flexbox 的 W3C 规范文 ...
- FreeMusic项目优化（一）——flex布局学习记录
参考博客:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html flex布局是w3c于09年提出的,用于简便,整洁,响应式地解决布局问题的手 ...
- 浅析flex 布局
Flex基本概念: 容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis).主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end: ...
- CSS中的flex布局
1.flex 布局的概念 Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性.任何一个容器都可以指定为 Flex 布局,行内元素也可以通过 ...
- 谈谈flex布局实现水平垂直居中
我们在这要谈的是用flex布局来实现水平和垂直居中.随着移动互联网的发展,对于网页布局来说要求越来越高,而传统的布局方案对于实现特殊布局非常不方便,比如垂直居中.所以09年,W3C 提出了一种新的方案 ...
- Flex 项目属性：flex 布局示例
flex属性: flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto.后两个属性可选. 该属性有两个快捷值:auto (1 1 auto ...
- CSS Flex布局属性整理
Flex布局 display: flex; 将对象作为弹性伸缩盒展示,用于块级元素 display: inline-flex; 将对象作为弹性伸缩盒展示,用于行内元素 注意兼容问题: webkit内核 ...
- Flex布局 Flexbox属性具体解释
原文:A Visual Guide to CSS3 Flexbox Properties Flex布局官方称为CSS Flexble Box布局模型是CSS3为了提高元素在容器中的对齐.方向.顺序,甚 ...
- Flex布局教程及属性速查
一.Flex布局介绍 伸缩盒模型(flexbox)是一个新的盒子模型,意为"弹性布局",用来为盒状模型提供最大的灵活性,主要优化了UI布局.Flexbox的功能主要包手:简单使用一 ...
随机推荐
- C#版 - 小红书后台开发面试题: 二维数组中的查找
二维数组中的查找 热度指数:24274 时间限制:1秒 空间限制:32768K 本题知识点: 查找 在线提交网址: http://www.nowcoder.com/practice/abc3fe2 ...
- 《HelloGitHub月刊》第 10 期
前言 这一年感谢大家的支持,小弟这里给大家拜年了! <HelloGitHub月刊>会一直做下去,欢迎大家加入进来提供更多的好的项目. 最后,祝愿大家:鸡年大吉- <HelloGitH ...
- Flow 常用知识点整理
Flow入门初识 Flow是facebook出品的JavaScript静态类型检查工具. 由于JavaScript是动态类型语言,它的灵活性也会造成一些代码隐患,使用Flow可以在编译期尽早发现由类型 ...
- angr进阶（6）绕过反调试
angr绕过反调试,一个是通过之前的方式,使用从特定位置开始测试的方法,还有一种通过hook进行反调试的方法. 其原理就在于angr能够符号化表示函数tumctf2016_zwiebe p.hook_ ...
- Zabbix监控原理及架构
什么是Zabbix? Zabbix是一个用于网络,操作系统和应用程序的开源监控软件,它旨在监视和跟踪各种网络服务,服务器和其他网络硬件的状态. 为什么需要对各类系统进行监控? 在系统构建时的正常流程中 ...
- springboot(五)过滤器和拦截器
前言 过滤器和拦截器二者都是AOP编程思想的提现,都能实现诸如权限检查.日志记录等.二者有一定的相似之处,不同的地方在于: Filter是servlet规范,只能用在Web程序中,而拦截器是Sprin ...
- Oracle闪回表
Oracle闪回技术 场景:测试环境数据库的表数据被误删除. 解决思路:使用闪回表技术 原理 闪回技术是Oracle强大数据库备份恢复机制的一部分,在数据库发生逻辑错误的时候,闪回技术能提供快速且最小 ...
- Creating a ROS msg and srv
msg: msg files are simple text files that describe the fields of a ROS message. They are used to gen ...
- iOS 循环引用讲解（中）
谈到循环引用,可能是delegate为啥非得用weak修饰,可能是block为啥要被特殊对待,你也可能仅仅想到了一个weakSelf,因为它能解决99%的关于循环引用的事情.下面我以个人的理解谈谈循环 ...
- 重写（override）和重载（overload）的区别
override(重写): 是进行基类中函数的重写,是面向对象的概念 重载(overload):是方法的名称相同,参数或参数类型不同,进行多次重载以适应不同的需要.overload 是面向对象的概念.