flex布局是一种新的布局方式也就是弹性盒子;在布局上更加方便,但是要注意的是在flex布局中float、position是无效的。

图片来自阮一峰的博客 。下面我们进入正题:

flex布局分为分为主轴justify-content和纵轴align-items/content

justify-content:

  1属性:定义为主轴上的内容

  2具体分为:flex-start;flex-end;space-between;space-around;center;

align-items/content:

  1属性:定义为纵轴上的内容

  2具体分为:flex-start;flex-end;space-between;space-around;center;

  3items定义为只有一条纵轴线;content定义为多条纵轴线;

flex-direction(方向):

  1属性:定义主轴方向;

  2具体分为以下四种:row定位主轴方向为横向默认状态;row-reverse定位主轴方向横向反转;

            column定位主轴方向为纵向默认状态由上至下;column定位主轴方向为横向反转状态;

flex-wrap:定义子元素是否换行:

  1.nowrap定义元素不会换行;

  2wrap定义元素会换行;

  3wrap-reverse定义元素换行反转;

flex-flow是元素flex-direction和flex-wrap和简写属性,默认为row nowrap。

flex-shrink:属性为缩小  根据大小从整体上按照所写比例缩小

flex-grow:属性为增大 根据整体来从整体剩余部分按比例成长

order给flex元素排序 如order:number/integer(整体)

flex-basis:定义为在浏览器分配空间之前,所占得空间大小,可以用width和height来定义 ,默认为auto即项目本来的大小;

align-self:定义子元素内容自己的位置,允许子项目与其他项目对齐方式不一样。可以覆盖align-items的属性,默认属性为auto表示继承

     父元素的属性,如果没有父元素就等同于stretch(拉伸);

    具体属性有 flex-start;flex-end;auto;baseline;stretch;center;

flex属性是flex-grow、flex-shrink和flex-basis的简写 默认为0 1 auto;

他有2个快捷键auto(1 1 auto)和none(0 0 auto)。

关于flex的布局理解的更多相关文章

  1. 记一下flex弹性布局

    flex弹性布局也越来越广泛的在我们代码中出现了,更加方便我们的布局.自己用了查,查了用,有些还是记不住,俗话说好脑子不如烂笔头,原来都是写在本子上的,很不幸的一次次的想翻的时候总是找不到,还是写博客 ...

  2. flex盒子布局

    看过很多对于弹性盒子flex的简介,但还是觉得阮一峰大神的解析和张鑫旭大神(旧版flex)的解析比较容易理解,下面,我以自己的理解来叙述关于flex弹性布局! 1.概念(容器和项目) 在flex中,有 ...

  3. 2021年3月-第02阶段-前端基础-Flex 伸缩布局-移动WEB开发_流式布局

    移动web开发流式布局 1.0 移动端基础 1.1 浏览器现状 PC端常见浏览器:360浏览器.谷歌浏览器.火狐浏览器.QQ浏览器.百度浏览器.搜狗浏览器.IE浏览器. 移动端常见浏览器:UC浏览器, ...

  4. CSS弹性盒模型flex在布局中的应用

    × 目录 [1]元素居中 [2]两端对齐 [3]底端对齐[4]输入框按钮[5]等分布局[6]自适应布局[7]悬挂布局[8]全屏布局 前面的话 前面已经详细介绍过flex弹性盒模型的基本语法和兼容写法, ...

  5. CSS3动画属性和flex弹性布局各个属性

    [CSS3动画的使用] 1.声明一个关键帧(动画): @keynames name{ from{} to{} } 每个阶段的写法: ①可以直接使用from-to的写法 ②可以设置0%-100%的写法, ...

  6. flex 输入框布局

    1:创建一个弹性容器(display:flex) 2:构建2个或3个弹性项目. 3:把弹性项目设置为居中对齐.(align-items:center) 4:改变input自身对齐方式,把它设置为拉伸以 ...

  7. flex弹性布局心得

    概述 最近做项目用flex重构了一下网页中的布局,顺便学习了一下flex弹性布局,感觉超级强大,有一些心得,记录下来供以后开发时参考,相信对其他人也有用. 参考资料: Solved by Flexbo ...

  8. 整理CSS中display flex(布局利器)

    关于display:flex布局,有人了解颇深,我也是看着别人的东西学习的. display:flex的布局是什么.基本概念之类的我根本就不了解,只会用.每次看到概念之类的东西,我都是扫一眼就过去. ...

  9. flex弹性布局属性详解!

    详细看下flex弹性布局具体属性: flex容器属性详解:flex-direction:row/column:(横排/竖排) 决定元素的排列方向:flex-wrap:nowrap/wrap/wrap- ...

随机推荐

  1. 【翻译】我如何使用CSS来制作bitsofcode Logo动画

    翻译文章,翻译不好,还望大家指出 原文地址:How I Animated the bitsofcode Logo with CSS 我是css动画的新手,这样说是因为我只在有限的案例中使用过他们,而且 ...

  2. Quartz动态改变任务时间

    基于quartz-2.2 的动态任务调度 Quartz是一个完全由java编写的开源作业调度框架. 调度器 Quartz框架的核心是调度器.调度器负责管理Quartz应用运行时环境.调度器不是靠自己做 ...

  3. c中const定义的问题

    /* 这题有个疑问: const double BASE1=BREAK1*RATE1; //第二个分界点前总共要缴的税收 const double BASE2=BASE1+(BREAK2-BREAK1 ...

  4. cisco模拟器GNS3和虚拟机VMware的整合

    微软和思科环境: 在思科认证的学习中,我们需要用到许多类的模拟器,但这些模拟器并不能够更真实的模拟我们的用户机在应用中所出现的现象.因此,我们借由微软的环境来更真实地体现我们所搭建的网络中的一些应用. ...

  5. python调用百度语音(语音识别-斗地主语音记牌器)

    一.概述 本篇简要介绍百度语音语音识别的基本使用(其实是斗地主时想弄个记牌器又没money,抓包什么的又不会,只好搞语音识别的了) 二.创建应用 打开百度语音官网,产品与使用->语音识别-> ...

  6. DLL文件修复

    当你在Windows计算机中安装非操作系统的软件时,往往会覆盖或改写系统共享文件, 如动态链接库(.dll文件)和可执行文件(.exe文件). * 对于Windows系统来说,当用户操作不当(如非正常 ...

  7. uva140

    全排列回溯剪枝. 题目数据很水.记录当前最小带宽,边回溯边计算当前序列最大的距离(也就是带宽),如果当前带宽超过了当前的最小带宽就剪枝. 注意下,数据读入时的字符串处理. AC代码 #include& ...

  8. Codeforces 257D

    题意略. 思路:这个题目最重要的是那个不等式 a[i] <= a[i+1] <= 2 * a[i]  ,你会发现0 <= a[i+1]  -  a[i] <= a[i],令x ...

  9. 两种实现方式mycat多租户,枚举分片,注解拦截

    第一种: 优点:支持进一步分片 缺点:schema配置繁琐 注解式  /*!mycat:schema=[schemaName] */   注意:这在navicat 里面是会报错的,请用命令行登陆myc ...

  10. 决策树-C4.5算法(三)

    在上述两篇的文章中主要讲述了决策树的基础,但是在实际的应用中经常用到C4.5算法,C4.5算法是以ID3算法为基础,他在ID3算法上做了如下的改进: 1) 用信息增益率来选择属性,克服了用信息增益选择 ...