一,啥是flex?

1、Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。

.box{
display:flex;
}

webkit内核的浏览器,必须加上-webkit- 前缀

.box{
display:flex;
-webkit-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。

三、容器的属性

1、flex direction

解释:决定主轴的方向,即项目的排列方向。

.box {
flex-direction: row | row-reverse | column | column-reverse;
}

1.1、四个值的意思如下:

  • row(默认值):主轴为水平方向,起点在左端
  • row-reverse:主轴为水平方向,起点在右端
  • column:主轴为垂直方向,起点在上
  • column-reverse:主轴为垂直方向,起点在下

举个栗子:这里我将值设为row-reverse

.box ul{
display:flex;
flex-direction:row-reverse;
}
.box ul li{
width:200px;
height:200px;
background: pink;
text-align: center;
line-height: 200px;
font-size: 24px;
margin:10px;
}

效果:

这里自动成了一行,主轴的起点在右边。

2、flex-wrap

解释:默认情况下,项目都在一条线上(又称轴线),flex-wrap属性就是定义,如果一条轴线排不下,如何换行。

.box{
flex-wrap: nowrap | wrap | wrap-reverse;
}

三个值的意思如下:

  • nowrap(默认):不换行,排不下的情况压缩项目的宽度
  • wrap:换行,第一行在上方
  • wrap-reverse:换行,第一行在下方

这里分别举俩个栗子:

nowrap:

.box ul{
display:flex;
flex-wrap:nowrap;
}

效果:

我是设置成子元素的宽度为200,但排不下,被压缩成了91。

wrap-reverse:

.box ul{
display:flex;
flex-wrap:wrap-reverse;
}

效果:

3、flex-flow

解释:这个属性是flex-direction和flex-wrap的简写方式,默认值是flex-flow:row nowrap;

4、justify-content

解释:定义了项目在主轴的对齐方式

.box {
justify-content: flex-start | flex-end | center | space-between | space-around;
}

5个值的意思如下,具体对齐方式与主轴的方向有关系,下面举栗主轴方向从左到右:

  • flex-start(默认):左对齐
  • flex-end:右对齐
  • center:居中
  • space-between:俩端对齐,项目之间的间距都相等
  • space-around:每个项目俩侧的间距相等,所以,俩个项目之间的间隔比俩端项目分别与边框的距离大一倍。

这里,我觉得space-between这个值比较常用,举栗:

.box ul{
display:flex;
justify-content:space-between;
}

效果:

5、align-item

解释:定义项目在交叉轴上如何对齐

.box {
align-items: flex-start | flex-end | center | baseline | stretch;
}

5个值得意思如下:

  • flex-start:交叉轴的起点对齐
  • flex-end:交叉轴的终点对齐
  • center:交叉轴的中点对齐
  • stretch(默认值):如果项目未设置高度或者设置为auto,将占满整个容器的高度
  • baseline:项目的第一行文字的基线对齐

个人觉得flex-start较常用,举栗:

.box ul{
display:flex;
justify-content:space-between;
align-item:flex-start;
}

效果:

6、align-content

解释:定义了多根轴线的对齐方式,如果项目只有一根轴线,该属性不起作用

.box {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
  • flex-start:与交叉轴的起点对齐。
  • flex-end:与交叉轴的终点对齐。
  • center:与交叉轴的中点对齐。
  • space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
  • space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
  • stretch(默认值):轴线占满整个交叉轴。

四、项目属性

1、order

定义项目的排列顺序,数值越小,排列越靠前,默认为0。

举栗三个内容分别为1、2、3的盒子设置order后的排列顺序:

.item:nth-child(1){
order:;
}
.item:nth-child(2){
order:;
}
.item:nth-child(3){
order:-1;
}

效果:

2、flex-grow

定义项目的放大比例,默认为0,就是如果有剩余空间,也不放大。

语法:

.item {
flex-grow: <number>; /* default 0 */
}

栗子:

.item:nth-child(1){
flex-grow:;
}

效果:

如果所有项目的flex-grow属性都为1,则它们将等分剩余空间(如果有的话)。如果一个项目的flex-grow属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。

3、flex-shrink

定义了项目的缩小比例,默认为1,就是如果空间不足,该项目将缩小。

语法:

.item {
flex-shrink: <number>; /* default 1 */
}

如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。负值对该属性无效。

4、align-self

允许单个项目与其他项目不一样的对齐方式,可覆盖align-item属性,默认值为auto,表示继承父元素的align-item属性,如果没有父元素,则等同于stretch。

.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

举栗:

.item:nth-child(2){
height:100px;
align-self:flex-end;
}

效果:

这里三个元素父盒子的align-item属性我是设置flex-start的,但第二个项目我设置了flex-end,所以他沿交叉轴下沿对齐。

该属性可能取6个值,除了auto,其他都与align-items属性完全一致。

flex布局的更多相关文章

  1. Flex 布局教程:语法篇

    作者: 阮一峰 网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便 ...

  2. Flex 布局教程:实例篇

    该教程整理自 阮一峰Flexible教程 今天介绍常见布局的Flex写法.你会看到,不管是什么布局,Flex往往都可以几行命令搞定. 我的主要参考资料是Landon Schropp的文章和Solved ...

  3. 在移动端中的flex布局

    flex布局介绍: flex布局很灵活, 这种布局我们也可以称之为弹性布局,  弹性布局的主要优势就是元素的宽或者高会自动补全; flex布局实例: 比如有两个div,一个div的宽度为100px, ...

  4. css flex布局

    关于flex布局的一些简单用法 效果(下图) 实现代码: <!--html--> <div class="wrap"> <div class=&quo ...

  5. FLEX布局的一些问题和解决方法

    前言 露珠最近研究了一下flex的布局方式,发现项w3c推出的这套布局解决方案对于日益复杂的前端开发布局来说是确实是一利器,并且在不同的屏幕上实现了真正的响应式布局:不再单纯地依赖百分比和float的 ...

  6. CSS之flex布局

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  7. flex布局示例

    来自:授权地址 作者:水牛01248 几个横排元素在竖直方向上居中 display: flex; flex-direction: row;//横向排列 align-items: center;//垂直 ...

  8. 【转】Flex 布局语法教程

    网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中 ...

  9. [flex布局]-flex教程

    简介:2009年,W3C提出了一种新的方案----Flex布局,可以简便.完整.响应式地实现各种页面布局.目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能. Flex布局是什 ...

随机推荐

  1. poi导出word、excel

    在实际的项目开发中,经常会有一些涉及到导入导出的文档的功能.apache开源项目之一poi对此有很好的支持,对之前的使用做一些简要的总结. 1,导入jar 为了保证对格式的兼容性,在项目的pom.xm ...

  2. Sql Server 中锁的概念

    锁的概述 一. 为什么要引入锁 多个用户同时对数据库的并发操作时会带来以下数据不一致的问题: 丢失更新A,B两个用户读同一数据并进行修改,其中一个用户的修改结果破坏了另一个修改的结果,比如订票系统 脏 ...

  3. 【Java EE 学习 29 上】【PL/SQL】【存储过程】【存储函数】【触发器】

    一.PL/SQL简介 1.概念:PL/SQL语言是Oracle数据库专用的一种高级程序设计语言,是对标准SQL语言进行了过程化扩展的语言. 2.功能:既能够实现对数据库的操作,也能够通过过程化语言中的 ...

  4. 利用python的双向队列(Deque)数据结构实现回文检测的算法

    #!/usr/bin/env python # -*- coding: utf-8 -*- # learn <<Problem Solving with Algorithms and Da ...

  5. Cycles渲染研究测试效果图

    从左到右:.贴图镂空透明  2.纹理半透明  3.纹理  4.材质半透明  5.材质 输入输出节点信息如下: ############################################# ...

  6. tomcat 常用优化配置

    1.精简Tomcat和配置文件 1.删除不需要的管理应用和帮助应用,提高tomcat安全性. # 删除webapps下所有文件 # rm –fr $CATALINA_HOME/webapps/* # ...

  7. JS: How to detect my browser version and operating system using JavaScript?

    Example: 1. for IE 11,  navigator.userAgent  returns "Mozilla/5.0 (Windows NT 6.1; WOW64; Tride ...

  8. Java直接(堆外)内存使用详解

    本篇主要讲解如何使用直接内存(堆外内存),并按照下面的步骤进行说明: 相关背景-->读写操作-->关键属性-->读写实践-->扩展-->参考说明 希望对想使用直接内存的朋 ...

  9. Web用户的身份验证及WebApi权限验证流程的设计和实现

    5. WebApi 服务端代码示例 5.1 控制器基类ApiControllerBase [csharp] view plaincopy   /// /// Controller的基类,用于实现适合业 ...

  10. Linux下redis的安装

    第一部分:安装redis 希望将redis安装到此目录 /usr/local/redis 希望将安装包下载到此目录 /usr/local/src 那么安装过程指令如下: $ mkdir /usr/lo ...