详细介绍弹性盒模型(display:flex)
弹性盒模型,即Flexbox,是css3中的新特性,其实弹性盒模型的原身是dispaly:box;这里,我们暂时不考虑旧的,我们只看新的。
为容器指定弹性盒子,只需在父元素(也就是容器)中设置:display:flex;(注意,webkit内核的需要加webkit前缀,行内元素设置弹性盒子的话,设置display:inline-flex;而且,设置了弹性盒子,子元素的float,clear,vertical属性都将失效)。
弹性盒子默认有两条轴,横轴和纵轴,默认横轴为主轴(默认自左向右)纵轴为辅轴(默认自上而下)。设置了display:flex的容器(也就是父元素)的属性有:flex-direction、flex-wrap,justify-content,flex-flow,align-items,align-content;
其中:flex-direction决定了主轴的方向,其值有:row(默认值,自左向右)/row-reverse(自右向左)/column(主轴为垂直的,自上而下)/column-reverse(自下而上)。
flex-wrap定义一排容不下的时候是否换行,默认为nowrap不换行(一行容不下时,各条目的宽度会按比例缩小)。wrap为正常换行。wrap-reverse是换行时第一行跑到了下面,第二行跑到了上面(暂时还没想好如何描述更清楚)。
flex-flow是flex-direction和flex-wrap的合并写法。默认为row nowrap。
justify-content定义了条目在主轴上的排列方式:有左对齐flex-start(默认值),右对齐flex-end,居中对齐center,两端对齐space-between,等分space-around即每个条目两端的空隙相等。
align-item定义了条目在纵轴上的排列方式:有顶部对齐flex-start,底部对齐flex-end,居中对齐center,strecth(默认值,如果条目不设置具体数值的高度,则高度会沾满整个父元素的高度),baseline,以条目里的第一行文字的基线为准。
align-content定义了多跟轴线时,条目的在纵轴的对齐方式,如果只有一根主轴线则该属性不起作用。值和justify-content的值是一样的。
说完容器(也就是父元素)所拥有的属性,该来说说容器中的条目(也就是子元素)所用有的属性了,不能父亲一手遮天,我们崇尚自由民主,所以,父亲有属性,孩子也有属性。
孩子的属性都有:order,flex-grow,flex-shrink,flex-basis,(flex),align-self。
order定义了子元素出现的排列先后,值越小,排列越靠前,默认为0。
flex-grow(看到grow我们就应该联想到变大)定义了子元素的放大比例,默认为0,表示即使父元素还有剩余空间也不放大该子元素。设父元素的宽度为700px,三个子元素宽度分别为200px,如果所有子元素的flex-grow的值为1,则如果父元素有剩余空间,子元素会等比例放大,即剩余出来的100/3分给三个孩子;如果是一个子元素flex-grow为1,一个为2,第三个为3,则三个子元素分别多分到,100*(1/6),100*(2/6),100*(3/6)。
flex-shrink(看到shrink,我们就赢联想到变小)定义了子元素的缩小比例,默认为1,当容器空间不足时,如果各个条目的flex-shrink值均为1,则表明等比例缩小,如果为0,则表示不缩小。
剩余的几个条目属性我们稍后再说。。
详细介绍弹性盒模型(display:flex)的更多相关文章
- 弹性盒模型display:flex
Flex布局意为"弹性布局",用来为盒模型提供更多灵活性.此外,Flex定义的容器可以对块级元素(display: flex;)或行内元素(display: inline-flex ...
- 弹性盒子模型display:flex
1.div上下左右居中 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- 弹性盒布局display:flex详解
一:弹性盒子 随着响应式设计的流行,网站开发者在设计网页布局时往往要考虑到页面在适配不同分辨率的浏览器时其内部组件位置大小都会产生变化,因此需要设计者根据窗口尺寸来调整布局,从而改变组件的尺寸和位置, ...
- CSS3弹性盒模型,Flex布局教程
布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现. CSS3中引入flex的弹性盒模型 ...
- 弹性盒模型,flex布局
弹性盒模型 弹性盒子是css3的一种新布局模式,由容器(父元素)和项目(子元素)组成. 弹性盒子是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式. 引入弹性盒模型的 ...
- CSS弹性盒布局(display:flex)
CSS弹性布局(display:flex) 参考: http://www.runoob.com/w3cnote/flex-grammar.html https://www.jianshu.com/p/ ...
- 弹性盒子模型display:flex(2)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 弹性盒模型:flex多行多列两端对齐,列不满左对齐
[1]需求: [2]解决方案: 最近遇到布局上要求item两端对齐,且最后一行在列不满的情况下要求左对齐,使用flex的justify-content: space-between;实现时发现最后一行 ...
- CSS3弹性盒模型 display:box
刚开始做网页时就有一个困惑,为什么display:block只能垂直排列,如果要水平排列就要使用float:left等方式.这种方法最难受的当然是当子元素的数量改变时,需要去修改子元素的宽度使重新适应 ...
随机推荐
- 图片懒加载 jquery.lazyload
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- js分割字符串
js分割字符串 我想达到通过 : 分割 只要第一次分割,后面的内容不使用分割 不行,没找到可以直接用的方法,不过可以通过其它方式达到效果 eg: str.split(':',2)[0] (第一个分隔符 ...
- echarts重新加载动画
echarts重新加载动画 var option1 = area_right_top1.getOption();area_right_top1.clear();area_right_top1.setO ...
- npm install 报错
今天准备在服务器上部署一下pm2,发现 npm install -g pm2 爆出了错误 error Unexpected end of JSON input while parsing near ...
- H5混合开发进阶
混合开发: 原生app里面,IOS 安卓的原生app里面,嵌套h5界面. 通过原生app里的一个webView盒子进行交互.webView是原生app内置的一个XXX,里面可以放置h5界面.可以相互调 ...
- Python 一些好玩的函数
一.匿名函数 什么匿名是函数: 不需要使用def函数名的函数或者子程序 函数语法: lambda 参数:表达式 函数特点: 1.lambda只是一个表达式,省去定义函数过程,让代码更精简 2.lamb ...
- Leecode刷题之旅-C语言/python-35.搜索插入位置
/* * @lc app=leetcode.cn id=35 lang=c * * [35] 搜索插入位置 * * https://leetcode-cn.com/problems/search-in ...
- POJ 3210 : Coins
参考:https://blog.csdn.net/u010885899/article/details/46636523 http://kqwd.blog.163.com/blog/static/41 ...
- POJ1679(次小生成树)
The Unique MST Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 36692 Accepted: 13368 ...
- 海思NB-IOT的SDK添加AT指令方法
1. 首先打开app_at_cmd_parse.c文件,在文件的末尾找到,可在中间添加需要的代码 /查询电信自注册结果 {AT_FLAG_VISIABLE | AT_FLAG_LOGABLE, &qu ...