flex布局 flex全解 flex
一、Flex布局是什么?
Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为Flex布局。
.box{display: flex;
}
行内元素也可以使用Flex布局。
.box{display: inline-flex;
}
Webkit内核的浏览器,必须加上-webkit前缀。
.box{display: -webkit-flex; /* Safari */display: flex;
}
注意,设为Flex布局以后,子元素的
float
、clear
和vertical-align
属性将失效。
二、基本概念
采用Flex布局的元素,称为Flex容器(flex container),简称”容器”。它的所有子元素自动成为容器成员,称为Flex项目(flex item),简称”项目”。
容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。
三、容器的属性
以下6个属性设置在容器上。
- flex-direction 决定主轴的方向
- flex-wrap 控制换行
- flex-flow flex-flow:
<flex-direction> <flex-wrap>;
- justify-content 主轴上的对齐方式 (横)
- align-items 项目在交叉轴上如何对齐 (竖)
- align-content 多根轴线的对齐方式 (如果项目只有一根轴线,该属性不起作用)
具体如下:
3.1 flex-direction属性
flex-direction属性决定主轴的方向(即项目的排列方向)。
.box {flex-direction: row | row-reverse | column | column-reverse;
}
它可能有4个值。
- row(默认值): 主轴为水平方向,起点在左端。
- row-reverse: 主轴为水平方向,起点在右端。
- column: 主轴为垂直方向,起点在上沿。
- column-reverse: 主轴为垂直方向,起点在下沿。
3.2 flex-wrap属性
默认情况下,项目都排在一条线(又称”轴线”)上。flex-wrap属性定义,如果一条轴线排不下,如何换行。
.box{flex-wrap: nowrap | wrap | wrap-reverse;
}
它可能取三个值。
(1)nowrap(默认):不换行。
(2)wrap:换行,第一行在上方。
(3)wrap-reverse:换行,第一行在下方。
3.3 flex-flow
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。
.box {flex-flow: <flex-direction> <flex-wrap>;
}
3.4 justify-content属性
justify-content属性定义了项目在主轴上的对齐方式。
.box {justify-content: flex-start | flex-end | center | space-between | space-around;
}
它可能取5个值,具体对齐方式与轴的方向有关。下面假设主轴为从左到右。
- flex-start(默认值):左对齐
- flex-end:右对齐
- center: 居中
- space-between:两端对齐,项目之间的间隔都相等。
- space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。
3.5 align-items属性
align-items属性定义项目在交叉轴上如何对齐。
.box {align-items: flex-start | flex-end | center | baseline | stretch;
}
它可能取5个值。具体的对齐方式与交叉轴的方向有关,下面假设交叉轴从上到下。
- flex-start:交叉轴的起点对齐。
- flex-end:交叉轴的终点对齐。
- center:交叉轴的中点对齐。
- baseline: 项目的第一行文字的基线对齐。
- stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。
3.6 align-content属性
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。
.box {align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
该属性可能取6个值。
- flex-start:与交叉轴的起点对齐。
- flex-end:与交叉轴的终点对齐。
- center:与交叉轴的中点对齐。
- space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
- space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
- stretch(默认值):轴线占满整个交叉轴。
四、项目的属性
以下6个属性设置在项目上。
- order 项目的排列顺序。数值越小,排列越靠前,默认为0。
- flex-grow 定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。
- flex-shrink 定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。
- flex 是flex-grow, flex-shrink 和 flex-basis的简写
- align-self 许单个项目有与其他项目不一样的对齐方式
- flex-basis 具体如下
具体如下:
4.1 order属性
order属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。
.item {order: <integer>;
}
4.2 flex-grow属性
flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。
.item {flex-grow: <number>; /* default 0 */
}
如果所有项目的flex-grow属性都为1,则它们将等分剩余空间(如果有的话)。如果一个项目的flex-grow属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。
4.3 flex-shrink属性
flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。
.item {flex-shrink: <number>; /* default 1 */
}
如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。
负值对该属性无效。
4.4 flex-basis属性
flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。
.item {flex-basis: <length> | auto; /* default auto */
}
它可以设为跟width或height属性一样的值(比如350px),则项目将占据固定空间。
4.5 flex属性
flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。
.item {flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
该属性有两个快捷值:auto (1 1 auto) 和 none (0 0 auto)。
建议优先使用这个属性,而不是单独写三个分离的属性,因为浏览器会推算相关值。
4.6 align-self属性
align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。
.item {align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
该属性可能取6个值,除了auto,其他都与align-items属性完全一致。
来源: https://www.runoob.com/w3cnote/flex-grammar.html
来源: http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
最后
希望大家及时补充, 咱们可以一起优化把这个知识点 更加通俗的表达.
flex布局 flex全解 flex相关推荐
- 关于Flex布局属性详解
一.Flex布局是什么? Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为Flex布局. .box{ disp ...
- W3C推荐的新布局模式 【CSS Flex布局】详解
本文目录 概述 属性 弹性容器的属性(父级) display flex-direction flex-wrap flex-flow justify-content align-items align- ...
- flex布局(详解)
目录 前言 一.何为Flex布局 二.基本概念 三.容器的属性 3.1 flex-direction属性 3.2 flex-wrap属性 3.3 flex-flow 3.4 justify-conte ...
- flex布局单独一行_CSS3 Flex布局(伸缩布局盒模型)
CSS3引入了一种新的布局模式--Flexbox布局,即伸缩布局盒(Flexible Box)模型,此布局对于设计比较复杂的页面非常有用,特别是"垂直居中"布局,非常容易实现. 一 ...
- Flex布局实战详解
Flex布局详解 1. 父项属性 flex-direction:设置主轴的方向 justify-content:设置主轴上的子元素排列方式 flex-wrap:设置子元素是否换行 align-cont ...
- 【Flex布局案例】使用Flex布局搭建静态页面
最近整理自己零散的知识点,把以前刚学写的小demo放上来,这个页面是自己刚学flex布局写的页面. html部分: <!DOCTYPE html> <html lang=" ...
- 网页HTML5制作flex布局骰子,css利用flex布局画骰子的六个面
主要是利用flex的一些特性来写的,掌握好flex基础,写出筛子的几个页面不是问题. 推荐去我写的一个博客中有flex的小练习 线上练习flex布局 html css .shaizi { width: ...
- 好用的前端flex布局,通用的flex布局CSS代码
我的社交恐惧症,主要来自于,收入低??? 今天看到一个图,真是人间真实: 不知道大家上班之后有没有经常写前端,反正身为后端的我是经常写前端的,尤其是调样式调的人痛不欲生,最烦人的是,还要一个像 ...
- Android控件布局属性全解(一看就会)
Android有太多的布局属性繁琐又晦涩,下面结合了网上很多资料汇总. 内容太多,可以Ctrl+F进行搜索 第一类:属性值为true或false android:layout_centerHrizon ...
最新文章
- java 选择 颜色的控件_JavaFX颜色选择器(ColorPicker)
- idea自动生成方法注释(含参数及返回值)
- kompozer+mysql_KompoZer for mac下载_KompoZer for mac版V0.8b3下载(暂未上线)_预约_飞翔下载...
- jar 反编译_Java加密jar包流程
- 网游类似魔兽世界的服务器维护都是在干嘛?
- golang小程序试验(二)
- 汉寿县智慧城市建设PPP项目成功签约
- java7和java8切换_仍不切换到Java 8的6个理由
- oo0ooo0ooo0oo_OoO的完整形式是什么?
- Visual Studio 2010 调试 C 语言程序
- 信息学奥赛一本通 1138:将字符串中的小写字母转换成大写字母 | OpenJudge NOI 1.7 13
- 获取本机IP和MAC地址
- eclipse运行java快捷键,eclipse常用快捷键
- Java写txt—读txt—清空txt文件
- 【嵌入式系统设计师笔记】——什么是嵌入式?
- Uniapp或H5之ORC识别与自定义照相机
- Unity 3D游戏十一:坦克大战
- android cta 权限,[Android][Framework]PackageManagerService处理应用权限流程
- 夜深人静写算法(三十四)- 逆元
- Ubuntu卸载firefox浏览器安装google浏览器
热门文章
- 从计算机应用的角度进行分类,计算机考试文档
- 通过搭建MySQL掌握k8s(Kubernetes)重要概念(下):参数配置
- 网易163企业邮箱注册申请,有什么优惠活动
- [福大软工] Z班 团队作业——随堂小测(同学录) 作业成绩
- A nice speech——王强 at 36 Kr
- ERP系统类毕业论文文献都有哪些?
- App性能优化(布局优化,线程优化,app瘦身优化,页面切换优化,App启动优化,内存优化)
- 经销商转型为什么要选择移动订货平台?
- Android Studio : Unfortunately you can't have non-Gradle Java modules and Android-Gradle modules
- Swift - 第三方图表库Charts使用详解23(雷达图)