flex布局,即为弹性布局,其为盒模型提供最大的灵活性,任何一个容器都可以指定为flex布局。

  eg:.box{

    display:flex;

  }

行内元素也可以使用flex布局。

注意:设置flex布局后,子元素的float、clear和vertical-align属性将会失效。

采用flex布局:

元素:称为flex容器,他的所有子元素自动成为容器成员,称为flex项目,

容器默认存在两根轴,水平的主轴(main axis)和垂直的交叉轴(cross axis)主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;

同理也存在cross start和cross end;

项目沿主轴排列单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size;

一、容器的属性:

1.flex-direction:决定主轴的方向

  row:主轴为水平方向,起点在左侧;

  row-reverse:。。。。。。起点在右侧;

  column:主轴为垂直方向,起点在上沿;

  column-reverse:。。。。起点在下沿;

2.flex-wrap:默认所有项目排列在一条轴线上,而该属性是定义如果一条轴线排不下,如何进行换行

  nowrap:不换行;

  wrap:换行,第一行再上方;

  wrap-reverse:换行,第一行在下方;

3.flex-flow:是-direction和-wrap的缩写

  默认值为: row nowrap;

4.justify-cotent:定义了项目在主轴上的对齐方式

  flex-start:左对齐;

  flex-end:右对齐;

  center:居中对齐;

  space-between:两端对齐,项目之间间隔等距;

  space-around:每个项目两侧等间隔,所以项目间的间隔要比项目和边框的间隔大;

5.align-items:定义项目在交叉轴的对齐方式

  flex-start:交叉轴的起点对齐;

  flex-end:交叉轴的终点对齐;

  center:交叉轴的中点对齐;

  baseline:项目的第一行文字的基线对齐;

  stretch默认值:如果项目未设置高度或者设置为auto,将占满整个容器的高度;

6.align-cotent:定义了多根轴线的对齐方式,如果项目只有一根轴线则该属性无效

  flex-start:与交叉轴的起点对齐;

  flex-end:与交叉轴的终点对齐;

  center:。。中点。。;

  space-between:与交叉轴两端对齐,轴线之间的间隔等距;

  space-around:每根轴线的两侧距离相等,所以轴线之间的距离比边框与轴线之间的距离大一倍;

  stretch默认值:轴线占满整个交叉轴;

二、项目的属性

1.order:定义项目的排列顺序,数值越小,排列越靠前,默认为0;

2.flex-grow:定义项目的放大比例,默认为0,即如果存在剩余空间也不能放大;

3.flex-shrink:定义项目的缩小比例,即空间不足,该项目将缩小;

4.flex-basis:在分配的多余空间之前,项目占据主轴的空间,浏览器根据此属性计算主轴是否有多余空间,默认为auto,即为项目本来的大小;

5.flex:是-grow、-shrink、basis的缩写,默认值为0,1,auto,该属性有两个快捷值,auto(1,1,auto)和none(0,0,auto);

6.align-self:允许单个项目与其他项目不一样的对齐方式,可覆盖align-items属性,默认值为auto,表示继承父元素的align-items,如无父元素则等同于stretch,该属性除了auto值外,其余的属性含义等同于align-items;

前端flex布局学习笔记的更多相关文章

  1. CSS flex 布局学习笔记

    写在前面 Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为 Flex 布局. 采用 Flex 布局的元素 ...

  2. Flex布局学习笔记

    任何元素都可以使用Flex布局,包括行内元素 display: flex; display: inline-flex使用Flex布局之后,子元素的float, clear, vertical-alig ...

  3. Flex 布局学习笔记

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. CSS3与页面布局学习笔记(八)——浏览器兼容性问题与前端性能优化方案

    一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...

  5. CSS Grid 布局学习笔记

    CSS Grid 布局学习笔记 好久没有写博客了, MDN 上关于 Grid 布局的知识比较零散, 正好根据我这几个月的实践对 CSS Grid 布局做一个总结, 以备查阅. 1. 基础用法 Grid ...

  6. flex 布局学习

    flex 布局学习 寻根溯源话布局 一切都始于这样一个问题:怎样通过 CSS 简单而优雅的实现水平.垂直同时居中.记得刚开始学习 CSS 的时候,看到 float 属性不由得感觉眼前一亮,顺理成章的联 ...

  7. flex弹性布局学习笔记

    前言 资料来源于网络,本人只是对此作了一下操作,记录于此以便以后查阅.目的在于梳理自己前端凌乱的知识点. 本文根据 Brian Franco 的一个flexbox.scss库来记录 入职新公司前对移动 ...

  8. CSS3与页面布局学习笔记(四)——页面布局大全(负边距、双飞翼、多栏、弹性、流式、瀑布流、响应式布局)

    一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...

  9. 原生 CSS 网格布局学习笔记

    下是来自Oliver Williams的帖子. Oliver已经学习了相当长时间的原生CSS网格,可以说是在CSS网格方面有一定的发言权.在这篇文章中,他将以非同寻常的思路分析自己的CSS网格布局学习 ...

随机推荐

  1. 为什么 HTTPS 比 HTTP 安全

    HTTP(超文本传输协议)是目前互联网应用最广泛的协议,伴随着人们网络安全意识的加强,HTTPS 被越来越多地采纳.不论是访问一些购物网站,或是登录一些博客.论坛等,我们都被 HTTPS 保护着,甚至 ...

  2. 资深架构师Sum的故事:正则!入门就是这样简单

    | 故事背景 职场如战场!Sum带领三个小队友用了两周,成功把代理功能给干出来了.如果说产品经理是最魔鬼的指挥官,那测试就是最魔鬼的教官.这两周,让Sum深深领略了什么是X市的日出. 不过话又说回来, ...

  3. Vue学习之Vue模拟后台数据

    前后端项目的开发,需要前端和后端同时进行开发,有时后端开发人员还未完成API接口可以提供给前端调用,因此就需要模拟前端请求后端接口,后端返回数据.一般开发中都是返回json数据格式来完成前后端的交互. ...

  4. 使用idea来部署git项目

    使用idea来部署git项目 一).将项目交由git管理 VCS ---->import into Version Cntorl ------>create Git Repository ...

  5. mysql--时区问题(时间差8个小时?修改Mysql 时区)

    发现评论时间比本地时间晚8小时,原因:mysql默认时区选择了CST 解决办法: Ubuntu系统环境下: 1.检查mysql系统时区 进入mysql:mysql -u root -p mysql&g ...

  6. python的Requests库的使用

    Requests模块: Requests 是用Python语言编写,基于 urllib,采用 Apache2 Licensed 开源协议的 HTTP 库.它比 urllib 更加方便,可以节约我们大量 ...

  7. 数据降维-NMF非负矩阵分解

    1.什么是非负矩阵分解? NMF的基本思想可以简单描述为:对于任意给定的一个非负矩阵V,NMF算法能够寻找到一个非负矩阵W和一个非负矩阵H,使得满足 ,从而将一个非负的矩阵分解为左右两个非负矩阵的乘积 ...

  8. length of the longest substring without repeating character

    Given a string, find the length of the longest substring without repeating characters. 来源:力扣(LeetCod ...

  9. python基础-网络编程part01

    软件开发架构 C/S(Client / Server) 架构 概念:是一种软件系统体系结构.Client是客户端,Server是服务端.客户端需要安装专用的客户端软件. 比如:微信.QQ.王者荣耀等应 ...

  10. 2753:走迷宫(dfs+初剪)//可以说是很水了。。。

    总时间限制:  1000ms 内存限制:  65536kB 描述 一个迷宫由R行C列格子组成,有的格子里有障碍物,不能走:有的格子是空地,可以走.给定一个迷宫,求从左上角走到右下角最少需要走多少步(数 ...