flex弹性布局笔记
学习自菜鸟教程的flex布局笔记
布局的传统解决方案,基于盒装模型,依赖 display 属性 + position 属性 + float 属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。
简介:
W3C提出了一种新的方案—-Flex布局,
是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。可以简便、完整、响应式地实现各种页面布局。对浏览器的支持性如下图
注意:在css样式中,当元素设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。使用必须加上浏览器前缀的兼容性写法,如下
.box{display: -webkit-flex; /* Safari */display: flex;
}
基本概念:
采用Flex布局的元素,称为Flex容器(flex container),简称”容器”。它的所有子元素自动成为容器成员,称为Flex项目(flex item),简称”项目”。
容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size
flex布局的几个容器属性:
1、flex-direction属性:决定主轴的方向(即项目的排列方向)。有以下值
.box {flex-direction: row | row-reverse | column | column-reverse;
}
2、flex-wrap属性:定义如果一条轴线排不下,如何换行
.box{flex-wrap: nowrap | wrap | wrap-reverse;
}
3、flex-flow属性:是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。
.box {flex-flow: <flex-direction> <flex-wrap>;
}
4、justify-content属性:定义了项目在主轴上的对齐方式。
.box {justify-content: flex-start | flex-end | center | space-between | space-around;
}
5、align-items属性:定义项目在交叉轴上如何对齐。
.box {align-items: flex-start | flex-end | center | baseline | stretch;
}
6、align-content属性:定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。
.box {align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
flex布局的几个项目的属性:
1、order属性:定义项目的排列顺序。数值越小,排列越靠前,默认为0。
.item {order: <integer>;
}
2、flex-grow属性:定义项目的放大比例,默认为0,根据数值按比例分配剩余空间。比如所有项目的flex-grow
属性都为1,则它们将等分剩余空间(如果有的话)。如果一个项目的flex-grow
属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。
.item {flex-grow: <number>; /* default 0 */
}
3、flex-shrink属性:定义了项目的缩小比例,默认为1,根据数值按比例分配剩余空间。比如,所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。
.item {flex-shrink: <number>; /* default 1 */
}
4、flex-basis属性:定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。
.item {flex-basis: <length> | auto; /* default auto */
}
5、flex属性:是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。
.item {flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
flex计算可以参考网址详细了解:https://blog.csdn.net/fengyjch/article/details/79047908
6、align-self属性:允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,继承父元素的align-items属性,如果没有父元素,则等同于stretch。
.item {align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
flex弹性布局笔记相关推荐
- 页面布局 - flex弹性布局
flex弹性布局 html: <!DOCTYPE html> <html><head><meta charset="utf-8" /> ...
- 移动web现状、viewport视口、二倍图、移动web开发主流方案、布局技术选型(流式布局、flex弹性布局、less+rem+媒体查询布局、混合布局、媒体查询、bootstrap)
移动端web现状: 移动端常见浏览器:UC浏览器,QQ浏览器,Opera浏览器,百度手机浏览器,360安全浏览器,谷歌浏览器,搜狗手机浏览器,猎豹浏览器及杂牌浏览器.移动端常见的浏览器都是基于webk ...
- HTML中用弹性布局设置位置,HTML的flex弹性布局
flex 布局概述 1. flex 是什么flex 是 Flexible Box 的缩写,意为弹性布局 flex 2009 年就已出现,浏览器兼容性很好,请放心使用 2. flex 解决了什么问题块元 ...
- CSS3 Flex 弹性布局用法详解
什么是Flex弹性布局 Flex是Flexible Box的简称,意为弹性布局,顾名思义,在网页布局时,他可以给我们提供更多的灵活性. 说明: 1.flex是display的一个属性值.与之相当应的还 ...
- 微信小程序开发(三)——IE盒子,Flex弹性布局,色子六面
目录 ie盒子模型 Flex弹性布局 三大特性: 块元素和内联元素的转换 background-image背景图片 尺寸单位rpx 定位 练习:色子的六面 ie盒子模型 盒子模型是css中一个重要的概 ...
- 移动端基础(2)—— flex弹性布局
一.flex弹性布局 flexible-box-layout 弹性盒式模型,它能更加高效的控制元素的对齐.排列,更重要的是能够自动计算布局内元素的尺寸,无论这个元素的尺寸是固定的还是动态的. 父元素( ...
- flex弹性布局教程-04项目属性flex-grow
本节目标 掌握flex-grow的使用. 掌握flex-grow放大的计算公式(难点). 掌握编写导航条的技巧. 内容摘要 本篇介绍了项目属性 flex-grow,用于定义项目的扩大系数,用于分配容器 ...
- flex弹性布局教程-03-项目属性flex-basis
本节目标 掌握 flex-basis 的用法. 了解 flex-basis 和 width 的不同. 阅读时间大约5分钟. 内容摘要 本篇介绍了 flex 项目属性的第一个 flex-basis ,用 ...
- flex弹性布局教程-10容器属性justify-content
本节目标 掌握justify-content的基础使用. 掌握项目多列排列使用justify-content对齐的技巧. 内容摘要 本篇介绍了容器属性justify-content,用来设置项目在主轴 ...
最新文章
- C++11 并发指南三(std::mutex 详解)
- Android--高德地图自动定位
- python3命令行安装pip_win10系统下python3安装及pip换源和使用教程
- Bootstrap教程:学习构建第一个Bootstrap 4网站
- css3 filter url,CSS3 filter(滤镜) 属性
- Bug,昂首走进2005
- JS组件系列——两种bootstrap multiselect组件大比拼
- 伪验证码(含随机验证码方法)js+css
- 组队训练3回放 ——hnqw1214
- mysql中的cube和rollup_【hive】cube和rollup函数
- Layui laypage分页
- linux+软盘启动程序,红旗Linux桌面版 4.0软盘启动硬盘安装过程图解 (Red Flag Linux 4.0)...
- 【数据库】三级模式两级映射详解
- k8s集群灾难恢复-原机器能起来
- 模糊查找文件和文件夹
- Word2vec 计算两个文本之间相似度
- 智慧工地安全施工实时监测系统解决方案
- 软件的破解原理是什么?
- IDE工具(42) Alibaba Cloud Toolkit 一键部署插件使用入门
- i5集显和独显的区别_核显和独显、集成显卡有什么区别,那个好!
热门文章
- mysql压力写入测试_mysql压力测试工具
- tensorflow学习笔记(1):sess.run()
- [转载] 用Java语言实现对十六进制字符串异或运算
- kotlin 小数位数_Kotlin程序生成4位数OTP
- linux进程q是什么意思,Linux进程
- linux ntp手动授时,关于我校NTP授时服务的使用说明
- java 方法 示例_Java语言环境getDisplayVariant()方法与示例
- math.sqrt_Math.SQRT1_2属性与JavaScript中的示例
- 解决React Native unable to load script from assets index.android.bundle on windows
- C#单例模式的简单使用