CSS Flex布局属性整理
Flex布局
display: flex;
将对象作为弹性伸缩盒展示,用于块级元素display: inline-flex;
将对象作为弹性伸缩盒展示,用于行内元素
注意兼容问题:
- webkit内核浏览器应使用前缀
-webkit
- IE浏览器,可以很好的兼容IE11+版本,对于IE10只有部分可以兼容,且使用时需增加
-ms
,IE10浏览器中容器定义成弹性伸缩盒时,需使用display: -ms-flexbox
示例的dom结构:
<div class="box"> <!--容器-->
<div class="item">1</div> <!--子项-->
<div class="item">2</div>
<div class="item">3</div>
</div>
基础样式设计:
.box {
width: 200px;
height: 200px;
background-color: #58a;
}
.item {
width: 50px;
height: 50px;
margin: 2px;
background-color: #fb3;
}
Flex 作用于Box容器上的6个属性介绍
1、flex-direction
用于指定Flex主轴的方向,继而决定 Flex子项在Flex容器中的位置
取值:row | row-reverse | column | column-reverse
- row:默认值,表示水平方向从左到右排列,此时水平方向轴线为主轴
- row-reverse:与row相反
- column:表示垂直方向从上到下排列,此时垂直方向轴线为主轴
- column-reverse:与column相反
flex-direction
四种取值的效果图如下:
row.png
column.png
2、flex-wrap
用于指定Flex子项是否换行
取值:nowrap | wrap | wrap-reverse
- nowrap:默认值,表示不换行,Flex子项可能会溢出
- wrap:表示换行,溢出的Flex子项会被放到下一行
- wrap-reverse:表示反方向换行
flex-wrap
三种取值的效果图如下:
wrap.png
从示例图中不难发现,换行以后两行之间产生了很大的间距,这个问题,在后面介绍的 align-content
属性中可以得到很好的解决。
3、flex-flow
复合属性,是flex-direction
和 flex-wrap
的简写属性,是用于指定Flex子项的排列方式
4、justify-content
用于指定主轴(水平方向)上Flex子项的对齐方式
取值:flex-start | flex-end | center | space-between | space-around
- flex-start:默认值,表示与行的起始位置对齐
- flex-end:表示与行的结束位置对齐
- center:表示与行中间对其
- space-between:表示两端对齐,中间间距相等。要注意特殊情况,当剩余空间为负数或者只有一个项时,效果等同于
flex-start
- space-around:表示间距相等,中间间距是两端间距的2倍。要注意特殊情况,当剩余空间为负数或者只有一个项时,效果等同于
center
justify-content
的前三种取值的效果图如下:
justify-content.png
justify-content
取值为 space-between
的效果图如下(注意特殊情况下效果等同于flex-start):
space-between.png
justify-content
取值为 space-around
的效果图如下(注意特殊情况下效果等同于center):
space-around.png
5、align-items
用于指定侧轴(垂直方向)上Flex子项的对齐方式
取值:stretch | flex-start | flex-end | center | baseline
- stretch:默认值,当Flex子项未设置高度或者高度值为auto时,stretch起作用,将Flex子项高度设置为行高度。这里需要注意,在只有一行的情况下,行的高度为容器的高度,即Flex子项高度为容器的高度
- flex-start:表示与侧轴开始位置对齐
- flex-end:表示与侧轴的结束位置对齐
- center:表示与侧轴中间对其
- baseline:表示基线对齐,当行内轴与侧轴在同一线上,即所有Flex子项的基线在同一线上时,效果等同于
flex-start
align-items
取值为 stretch
的效果图如下:
stretch.png
align-items
取值为 flex-start flex-end center
的效果图如下:
align-items.png
align-items
取值为 baseline
的效果图如下:
baseline.png
6、align-content
该属性只作用于多行的情况下,用于多行的对齐方式
取值:stretch | flex-start | flex-end | center | space-between | space-around
- stretch:默认值,当Flex子项未设置高度或者高度值为auto时,stretch起作用,将Flex子项高度设置为行高度。
- flex-start:表示各行与侧轴开始位置对齐,第一行紧靠侧轴开始边界,之后的每一行都紧靠前面一行
- flex-end:表示各行与侧轴的结束位置对齐,最后一行紧靠侧轴结束边界,之后的每一行都紧靠前面一行
- center:表示各行与侧轴中间对其
- space-between:表示两端对齐,中间间距相等。要注意特殊情况,当剩余空间为负数时,效果等同于
flex-start
- space-around:表示各行之间间距相等,中间间距是两端间距的2倍。要注意特殊情况,当剩余空间为负数时,效果等同于
center
再次强调:该属性只作用于多行的情况,在只有一行的Flex容器上无效,另外该属性可以很好的处理,换行以后相邻行之间产生的间距。
align-content
各个取值的效果图如下:
align-content.png
Flex 作用于子项上的6个属性介绍
1、order
该属性用来指定Flex子项的排列顺序,数值越小,越靠前,可以为负数
取值:数值,默认值为0
2、flex-grow
用来指定Flex子项的扩展比例,不可以为负数,Flex容器会根据Flex子项设置的扩展比例作为比率来分配剩余空间
取值:数值,默认值为0,表示即使存在剩余空间,Flex子项也不会扩展
如下图中,按照1:3分配剩余空间:
grow.png
3、flex-shrink
用来指定Flex子项的收缩比例,不可以为负数,Flex容器会根据Flex子项设置的收缩比例作为比率来收缩各个Flex子项
取值:数值,默认值为1,表示所有子项在剩余空间为负数时,等比例收缩
注意:flex-shrink
只能在不换行的情况下使用
如下图中,按照1:3收缩:
shrink.png
4、flex-basis
用来指定Flex子项的占据的空间,不可以为负数
取值:auto | length | percentage | content
- auto:默认值,计算规则:检索Flex子项是否设置了width值(或者height值,取决于flex-direction),如果设置了非auto的值,则使用width值(或者height值),若没有则使用content
- length:用长度值定义宽度,不可为负数
- percentage:使用百分比定义宽度,不可为负数
如下图中,为Item设置 flex-basis: 50%;
,在按照1:3分配剩余空间:
grow.png
容器宽度为200px,Item1原始宽度为50px,设置 flex-basis: 50%;
后宽度变成100px,扩展后宽度为110.5px;而Item2原始宽度为50px,扩展后为81.5px,比例正好是1:3
注意:
设置
flex-grow
进行分配剩余空间,或者使用flex-shrink
进行收缩都是在flex-basis的基础上进行的;当
flex-basis
的值以及width(或者height)的值均为非auto时,- 1)若content长度同时大于
flex-basis
的值以及width(或者height)的值,此时以flex-basis
与width(或者height)中值大的为准 ,但是,如果子项设置了overflow: hidden;
或者overflow: auto;
,此时以flex-basis
值为准; - 2)若content长度同时小于
flex-basis
的值以及width(或者height)的值,此时以flex-basis
值为准; - 3)若content长度小于
flex-basis
的值,大于width(或者height)的值,此时以flex-basis
值为准; - 4)若content长度大于
flex-basis
的值,小于width(或者height)的值,此时以content自身长度值为准;
- 1)若content长度同时大于
当width(或者height)的值为auto时,且内容的长度大于
flex-basis
设置的值,此时以content自身长度值为准,且不能进行flex-shrink收缩。相反如果内容的长度小于flex-basis
设置的值,则会使用flex-basis
设置的值;- 当存在最小值
min-width
(min-height
)时,且flex-basis
的值小于最小值时,宽度以最小值为准,当flex-basis
的值大于最小值时,以flex-basis
的值为准
5、flex
复合属性,是flex-grow
、 flex-shrink
和 flex-basis
的简写属性,用来指定Flex子项如何分配空间
取值:none | 各拆分项属性
- none:0 0 auto
- auto:1 1 auto
- 1:1 1 0%
- 0 auto 或 initial:0 1 auto 即初始值
注意:
- flex-grow:默认值为0,若省略则被默认为1
- flex-shrink:默认值为1,省略时默认为1
- flex-basis:默认值为auto,省略时默认为0%
6、align-self
用来单独指定某Flex子项的对齐方式
取值:auto | flex-start | flex-end | center | baseline | stretch
- auto:默认值,查找父元素的
align-items
值,如果没有则取值为stretch
- 其他值同
align-items
如果想了解更多关于Flex布局的内容,可以查看Flex布局应用
CSS Flex布局属性整理的更多相关文章
- CSS常见布局问题整理
实现div的水平居中和垂直居中 多元素水平居中 实现栅格化布局 1. 实现div的水平居中和垂直居中 实现效果: 这大概是最经典的一个题目了,所以放在第一个. 方法有好多, 一一列来 主要思路其实就是 ...
- flex布局笔记整理
flex布局笔记整理 了解-webkit-box 利用postcss进行css代码的向后兼容时,display:flex兼容后的代码常会带有display:-webkit-box. 部分移动端内核较低 ...
- CSS flex 布局快速入门
以前已经学过flex了,一直没做笔记,现在做下笔记再回忆下. 首先,flex布局的迷之属性们,如果一知半解,机械记忆的话,那不到半个月基本忘光光.先感受一下这12个flex布局属性,是不是很“迷”人. ...
- CSS Flex布局完全指南 #flight.Archives002
Title/CSS Flex布局完全指南 #flight.Archives002 序(from Ruanyf) : 网页布局(layout)是 CSS 的一个重点应用. 布局的传统解决方案,基于盒状模 ...
- CSS Flex布局整理
Flex布局 display: flex; 将对象作为弹性伸缩盒展示,用于块级元素 display: inline-flex; 将对象作为弹性伸缩盒展示,用于行内元素 注意兼容问题: webkit内核 ...
- 弹性布局(Flex布局)整理
一. 弹性布局 一个好的网站都有让用户看上去很舒服的布局,一个网站的布局也会或多或少影响到它的浏览量,看完阮大神的博客,就想把弹性布局整理一下. 在平时的我们常用的布局类型有以下几种: 1.浮动+定 ...
- 轻轻松松学CSS:Flex布局
Flex布局就是"弹性布局",它可以简便.完整.响应式地实现各种页面布局.引入弹性布局的目的,当页面需要适应不同的屏幕大小确保元素拥有恰当的布局方式,对一个容器中的子元素进行排列 ...
- css flex布局
关于flex布局的一些简单用法 效果(下图) 实现代码: <!--html--> <div class="wrap"> <div class=&quo ...
- CSS网页布局垂直居中整理
一.使用CSS3处理垂直居中方式 1.使用Flex布局处理(推荐),简单好用 body,html{ width:100%; height:100%; } .out { width: 20%; heig ...
随机推荐
- sqlserver sp_spaceused用法
sp_spaceused显示行数.保留的磁盘空间以及当前数据库中的表所使用的磁盘空间,或显示由整个数据库保留和使用的磁盘空间. 语法sp_spaceused [[@objname =] 'objnam ...
- python 多线程删除MySQL表
一.需求分析 在<python 统计MySQL表信息>这篇博客中,链接如下: https://www.cnblogs.com/xiao987334176/p/9901692.html 已经 ...
- 经典面试题:n个数字(0,1,…,n-1)形成一个圆圈
题目: n个数字(0,1,…,n-1)形成一个圆圈,从数字0开始, 每次从这个圆圈中删除第m个数字(第一个为当前数字本身,第二个为当前数字的下一个数字). 当一个数字删除后,从被删除数字的下一个继续删 ...
- HTML5练习2
1.邮箱注册网页 主要代码: <!doctype html> <html> <meta charset="utf-8"> <title&g ...
- Kylin使用笔记-0: kylin介绍
APACHE KYLIN™ 概览 Apache Kylin™是一个开源的分布式分析引擎,提供Hadoop之上的SQL查询接口及多维分析(OLAP)能力以支持超大规模数据,最初由eBay Inc. 开发 ...
- oracle中vsize和length
其实LENGTH与VSIZE这两个函数联系不大,区别很大.虽然都是“取长度”,但是LENGTH函数结果是“有多少个字符”,VSIZE结果是“需要多少bytes”.简单看一下这两个函数. 1.创建表T并 ...
- 8-4 Fabled Rooks uva11134
题意:你的任务是在n*n的棋盘上放 n 小于5000 个车 使得任意两个车不互相攻击 且第i个车在一个给定的矩形ri之内 给出该矩形左上角坐标和右下角坐标四个点 必须满足放车的位置在矩形内 边上 ...
- 安卓逆向之基于Xposed-ZjDroid脱壳
http://bbs.pediy.com/thread-218798.htm 前言 之前介绍了普通常见的反编译模式 但对于使用了 360加固 棒棒 爱加密 等等的加固应用就没办法了. 你会发现 ...
- nodejs mongoose populate 多层模型
参考地址:http://ronaldroe.com/populating-multiple-fields-and-levels-with-mongoose/ 文字版本 Mongoose, the po ...
- 解决命令行运行python文件,出现No module named *** 报错问题
有时候在一个项目中运行的时候,可能是之前已经mark成sources root 你自己忘记了, 于是就在命令行也执行python文件,然后就出现 No module named *** 等 相关你认为 ...